1.在vue项目的src文件夹下创建socket.js封装websocket的各种方法import_thisfrom'../main.js';//初始化websocket对象varws=null;//调用sendMsg时传递method输入处理和获取数据的具体逻辑方法varglobalCallback=null;//初始化weosocketfunctioninitWebSocket(HOST){//HOST地址-->请求路径ws=newWebSocket(HOST);ws.onmessage=function(msg){recvDelegate(msg);}ws.onclose=function(e){websocketclose(e);}ws.onopen=function(){console.log('连接成功');}//connectionerror=function(){console.log('WebSocketconnectionerroroccurred')的回调方法ws.onerror}}//发送方法functionsendMsg(params,callback){//给globalCallback分配发送数据后的回调函数globalCallback=callback;//发送消息订阅ws.send(params);}//解压得到的数据functionrecvDelegate(data){globalCallbac()}//关闭socketfunctionwebsocketclose(e){console.log('connectionclosed('+e.code+')')}//暴露方法export{initWebSocket,sendMsg,}Vue单页应用每次进入程序前都会重新加载App.vue文件，所以在created语句循环中创建websocket实例化这个文件最适合，不管刷输入的任何新页面都将重新创建websocket。2、vue组件或页面如何获取执行发送订阅后返回的数据？在组件或页面中调用socket.js中的sendMsg方法，调用时将回调函数作为参数传入。当socket接收到service返回的参数时，就会执行globalCallbac()方法，这个方法就是调用sendMsg时传入的回调函数。具体业务逻辑可以写在这个方法中this.socketApi.sendMsg({msg_id:20101},'TASK',(res)=>{this.allMac=res.data;for(letiofres.data){this.groupArr.push({name:i.name,id:i.id})}})
