【前端】vue单独使用websocket（js封装）

websocket不同于http协议，是由后端往前端推送数据，因此对于即时性数据比较合适。

创建websocket：

let base = config.wsIp;** 

let webSocketIP = ``;

let socket = '';

let isFirst = true;

export const createSocket =tid => {

    isFirst = true;

    console.log('establish websocket connection')

    webSocketIP = `${base}/websocket/${tid}`

    socket = new WebSocket(webSocketIP);

    socket.onopen = onopenWs;

    socket.onclose = oncloseWs;

    socket.onerror = onerrorWs;

    socket.onmessage = onmessageWs;

}

const onopenWs = event => {

    console.log("链接", event);

    socket.send("websocket client connect testss");

}

const oncloseWs = event => {

    console.log("断开链接", event);

    clearInterval(setIntervalWesocketPush)

}

const onerrorWs = event => {

    console.log("出现错误", event);

    clearInterval(setIntervalWesocketPush)

}

const onmessageWs = event => {

    console.log(JSON.parse(event.data))

    window.dispatchEvent(new CustomEvent('onmessageWS', {

        detail: {

          data: event,

          isFirst: isFirst

        }

    }))

    if(isFirst) {

      isFirst = false;

    }

}

使用：

import { createSocket } from '../apis/websocket'

this.getNoticeData(this.tid);

getNoticeData(tid) {

        createSocket(tid);

        window.addEventListener('onmessageWS', this.setNoticeData)

 },

这种写法是参考的简书上的一个老哥的，但他那个里边有点问题，所以简单做了修改。修改主要是去除了前端的每隔一定时间请求一下，这是没必要的，后端定时推送数据本身就是websocket的一大优势，如果使用前端每隔一段时间请求一下，那还不如直接使用http请求那。

参考链接