working websocket from vue to tornado

backend/app/ChameleonVisionApp.py

@@ -11,7 +11,8 @@ define("port", default=8888, help="run on the given port", type=int)
 
 class ChameleonApplication(tornado.web.Application):
     def __init__(self):
-        handlers = [(r"/", MainHandler),
+        handlers = [
+            # (r"/", MainHandler),
                     (r"/websocket", ChameleonWebSocket)]
 
         settings = dict(

backend/app/handlers/SocketHandler.py

@@ -1,12 +1,16 @@
 import tornado.websocket
+import json
 
 class ChameleonWebSocket(tornado.websocket.WebSocketHandler):
+    def check_origin(self, origin):
+        return True
     def open(self):
         print("WebSocket opened")
 
     def on_message(self, message):
-        print(message)
-        self.write_message("why the fuck did you send a message")
+        print(json.loads(message))
+        # print(message)
+        self.write_message(message)
 
     def on_close(self):
         print("WebSocket closed")

chameleon-client/package-lock.json

@@ -5665,7 +5665,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5683,11 +5684,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5700,15 +5703,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5811,7 +5817,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5821,6 +5828,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5833,6 +5841,7 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5932,7 +5941,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5942,6 +5952,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6047,6 +6058,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6064,6 +6076,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6102,7 +6115,8 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",

chameleon-client/src/App.vue

@@ -54,7 +54,7 @@
 <script>
   import Vue from "vue"
   import chselect from './components/ch-select.vue'
-
+  
   export default {
     name: 'app',
     components:{
@@ -94,7 +94,10 @@
               this.isCollapsed ? 'collapsed-menu' : ''
           ]
       }
-    }
+    },
+    created () {
+    // this.$options.sockets.onmessage = (data) => console.log(data.data); // console writes recived data
+  }
   }
 
 </script>

chameleon-client/src/components/InputTab.vue

@@ -26,7 +26,9 @@ import chselect from './ch-select.vue'
         },
         methods: {
             onChange(i) {
-                console.log(i);
+                // console.log(i);
+                this.$socket.send(JSON.stringify(i));
+                
             }
         }
     }

chameleon-client/src/components/ch-select.vue

@@ -14,11 +14,11 @@
 <script>
     export default {
         name: 'ch-select',
-        props:{
-            title:"",
-            placeholdert:"",
-            list:{}
-        },
+        props:[
+            'title',
+            'placeholdert',
+            'list'
+        ],
         data() {
             return {
                 content:this.value
@@ -26,7 +26,7 @@
         },
         methods: {
             handleInput() {
-                this.$emit('input',this.value);
+                this.$emit('input',{[this.title]:this.value});
             }
         }
     }

chameleon-client/src/components/ch-slider.vue

@@ -24,7 +24,7 @@
         },
         methods: {
             handleInput() {
-                this.$emit('input',this.value);
+                this.$emit('input',{[this.title]:this.value});
             }
         }
     }

chameleon-client/src/main.js

@@ -4,10 +4,11 @@ import VueRouter from 'vue-router'
 import iView from 'iview';
 import router from "./routes";
 import '../theme/index.less';
+import VueNativeSock from 'vue-native-websocket'
 
 Vue.use(VueRouter);
 Vue.use(iView);
-
+Vue.use(VueNativeSock,'ws://'+location.hostname+':8888/websocket');
 Vue.config.productionTip = false
 
 new Vue({