working communication between client and backend with message pack with working data flow

New client/chameleon-client/src/App.vue

@@ -24,6 +24,7 @@
 </template>
 
 <script>
+import { async } from 'q';
 export default {
   name: 'App',
 
@@ -51,13 +52,13 @@ export default {
 
   }),
   created(){
-    this.$options.sockets.onmessage = (data) =>{
+    this.$options.sockets.onmessage = async (data) =>{
       try{
-		let info = new Uint8Array(data.data.substring(1, data.data.length-1).split(","));//Converts incoming data to data that msgpack can decode
-        let message = this.$msgPack().decode(info);
+        var buffer = await data.data.arrayBuffer();
+        let message = this.$msgPack.decode(buffer);
         for(let prop in message){
           if(message.hasOwnProperty(prop)){
-            console.log(message);
+            this.handleMessage(prop, message[prop]);
           }
         }
       }

New client/chameleon-client/src/main.js

@@ -9,11 +9,11 @@ import msgPack from 'msgpack5';
 Vue.config.productionTip = false;
 // Vue.use(VueNativeSock,'ws://' + location.host + '/websocket',{format: 'json'});
 Vue.use(VueNativeSock,'ws://'+location.hostname+':8888/websocket');
-Vue.prototype.$msgPack = msgPack;
+Vue.prototype.$msgPack = msgPack(true)
 Vue.mixin({
   methods:{
     handleInput(key,value){
-      let msg = this.$msgPack().encode({[key]:value})
+      let msg = this.$msgPack.encode({[key]:value})
       this.$socket.send(msg);
     }
   }

New client/chameleon-client/src/store.js

@@ -34,7 +34,7 @@ export default new Vuex.Store({
     currentCameraIndex:0,
     currentPipelineIndex:0,
     cameraList:[],
-    pipelinelist:[],
+    pipelineList:[],
     point:{}
   },
   mutations: {
@@ -46,7 +46,7 @@ export default new Vuex.Store({
     currentCameraIndex: set('currentCameraIndex'),
     currentPipelineIndex: set('currentPipelineIndex'),
     cameraList: set('cameraList'),
-    pipelinelist: set('cameraList'),
+    pipelineList: set('pipelineList'),
     point:set('point')
   },
   actions: {
@@ -58,7 +58,7 @@ export default new Vuex.Store({
     currentCameraIndex: state =>state.currentCameraIndex,
     currentPipelineIndex: state =>state.currentPipelineIndex,
     cameraList: state =>state.cameraList,
-    pipelinelist: state =>state.pipelinelist,
+    pipelineList: state =>state.pipelineList,
     point: state =>state.point,
     setPipeValues(state,obj){
       for(let i in obj){

New client/chameleon-client/src/views/Camera.vue

@@ -143,7 +143,7 @@ import CVicon from '../components/cv-icon'
             },
             pipelineList:{
                 get(){
-                    return this.$store.state.pipelinelist;
+                    return this.$store.state.pipelineList;
                 }
             },
             pipeline:{