1.vue项目内src文件夹下创建socket.js用于封装websocket的各类方法

import _this from '../main.js';
//初始化websocket对象
var ws = null;
// 调用sendMsg方法时传入的处理获取数据的具体逻辑方法
var globalCallback = null;

// 初始化weosocket
function initWebSocket (HOST) {
    // HOST地址 -->请求路径
    ws = new WebSocket(HOST);
    ws.onmessage = function (msg) {
        recvDelegate(msg);
    }
    ws.onclose = function (e) {
        websocketclose(e);
    }
    ws.onopen = function () {
        console.log('连接成功');
    }
    // 连接发生错误的回调方法
    ws.onerror = function () {
        console.log('WebSocket连接发生错误');
    }
}
// 发送方法
function sendMsg (params,callback) {
    // 将发送数据后的回调函数赋值给globalCallback
    globalCallback = callback;
    // 发送消息订阅
    ws.send(params);
}
// 解包获取的数据
function recvDelegate(data){
    globalCallbac()
}
// 关闭socket
function websocketclose (e) {
  console.log('connection closed (' + e.code + ')')
}
// 将方法暴露出去
export {
    initWebSocket,
    sendMsg,
}

vue单页面应用，每次进入程序前都会重新加载App.vue文件，因此在此文件的created声明周期中执行创建websocket实例化最为合适，无论刷新进入哪个页面都将重新创建websocket。

2.vue组件或页面如何获取执行发送订阅后返回的数据

在组件或页面中调用socket.js中的sendMsg方法，在调用时将回调函数作为参数一并传入，当socket接收服务返回的参数时，即会执行globalCallbac()方法，而此方法即为调用sendMsg时传入的回调函数，可在此方法中写具体的业务逻辑

this.socketApi.sendMsg({msg_id:20101},'TASK',(res)=>{
    this.allMac = res.data;
    for(let i of res.data){
        this.groupArr.push({
            name:i.name,
            id:i.id
        })
    }
})

作者：DMC蛋铁

原文地址： https://segmentfault.com/a/1190000021849543