VUE WebSocket

公共js文件

let websock = null;
const initWebSocket = () => {
    const wsuri = window.socket_ip;
    websock = new WebSocket(wsuri);
    websock.onmessage = websocketonmessage;
    websock.onopen = websocketonopen;
    websock.onerror = websocketonerror;
    websock.onclose = websocketclose;
};
const websocketonopen = () => {      //连接建立之后执行send方法发送数据
    let actions = { "test": "ok" };
    websocketsend(JSON.stringify(actions));
};
const websocketonerror = () => {     //重连
    initWebSocket();
};
const websocketonmessage = (e) => {     //数据接收
    console.log(e.data);
};
const websocketsend = (Data) => {     //数据发送
    console.log(Data);
    websock.send(Data);
};
const websocketclose = (e) => {     //关闭
    console.log('断开连接', e);
};


export default {
    initWebSocket,
    websocketonopen,
    websocketonerror,
    websocketonmessage,
    websocketsend,
    websocketclose
};

main.js引入并挂载

import publicFunction from '公共js路径'
Vue.prototype.pub_fun = publicFunction

publicFunction.initWebSocket();    // 连接

const obj = { 'name': 'websocket心跳包' };    // 心跳包,每隔一段时间发送一次数据,防止自动断开链接
let heartbeat = setInterval(() => {
    publicFunction.websocketsend(JSON.stringify(obj))
}, 10000);

socket 的使用

this.pub_fun.websocketsend('要传输的数据,必须是字符串');