working websocket from vue to tornado

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({