在vue中使用websocket

楼主^#

更多发布于：2020-12-09 10:57

更新时间：2020.12.14
degui_ws已经更新至1.2.0版本

其实vue中使用websocket的方法和原生差不多，无非也是创建连接、监听消息、发送消息等内容，为了更方便使用，我便封装了一个websocket的包发布在npm上了；

npm i degui_ws

这个包暴露了4个方法出来：

createSocket(url,recNum);
sendWSPush(message);
sendPing(tiem,ping);
closeWS();

分别是创建socket、发送消息、定义心跳、关闭连接

接下来看看例子

getSocketData(e){
      const data = e && e.detail.data
      console.log("接受到的ws数据："+data)
      this.getDataChange(JSON.parse(data))
    },
    open(){
      createSocket("ws://47.96.129.24:8888",5);
      window.addEventListener('msgChange', this.getSocketData)
    }

在open方法中使用了createSocket方法，定义了连接地址以及重连次数(重连次数不定义默认10)
然后监听msgChange事件，这个事件是degui_ws定义的监听消息事件，没法更改，然后是接收到消息后的回调，这样一来就可以收到来自服务器的消息了。

然后可以使用sendWSPush方法发送消息

sendData(){
      sendWSPush({
        name:"Vue测试机",
        message:this.wsData
      })
      this.wsData = ""
    }

sendWSPush可以发送字符串、对象等类型。

然后还可以自定义心跳sendPing,可以定义发送时间，以及心跳内容。默认情况下，心跳每5秒发送一次，内容为
{name:"pingTest",message:"ping"}。

最后就是关闭连接，关闭连接后需要清除监听的事件，不然再次打开会同时收到两次消息

close(){
      window.removeEventListener('msgChange',this.getSocketData)
      closeWS()
    }

接下来看看degui_ws的源码：

let Socket = ''
let setPingAndReconnectionPush = null
let wsUrl;
let reconnectionNum;
let reconnectionNow=0;
let relinkOrClose = true;
export const createSocket = (url,recNum) =&gt; {
    if (!Socket) {
        wsUrl = url
        reconnectionNum = recNum || 10;
        relinkOrClose = true;
        Socket = new WebSocket(url)
        Socket.onopen = openChange
        Socket.onmessage = msgChange
        Socket.onerror = errChange
        Socket.onclose = closeChange
    }
    else {
        console.log("重复创建");
    }
}
const openChange = () =&gt; {
    sendPing()
}
const errChange = () =&gt; {
    Socket.close()
    clearInterval(setPingAndReconnectionPush)
    if (Socket.readyState !== 3) {
        Socket = null
        createSocket(wsUrl,reconnectionNum)
    }
}
const msgChange = e =&gt; {
    console.log(e);
    window.dispatchEvent(new CustomEvent('msgChange', {
        detail: {
            data: e.data
        }
    }))
}
const connecting = message =&gt; {
    setTimeout(() =&gt; {
        if (Socket.readyState === 0) {
            connecting(message)
        } else {
            Socket.send(JSON.stringify(message))
        }
    }, 1000)
}
export const sendWSPush = message =&gt; {
    if (Socket !== null && Socket.readyState === 3) {
        Socket.close()
        createSocket(wsUrl,reconnectionNum)
    } else if (Socket.readyState === 1) {
        Socket.send(JSON.stringify(message))
    } else if (Socket.readyState === 0) {
        connecting(message)
    }
}
const closeChange = () =&gt; {
    clearInterval(setPingAndReconnectionPush)
    if(relinkOrClose){
        console.log("正在尝试第"+(reconnectionNow+1)+"次重连");
        if (Socket.readyState !== 2) {
            Socket = null
            createSocket(wsUrl,reconnectionNum)
            reconnectionNow++;
            reconnection(reconnectionNum);
        }
    }
    else {
        Socket.close()
        Socket = ''
        wsUrl=null;
        reconnectionNum=null;
        reconnectionNow=0;
        relinkOrClose=true;
    }
}
export const sendPing = (time = 5000, ping = {name:"pingTest",message:"ping"}) =&gt; {
    clearInterval(setPingAndReconnectionPush)
    Socket.send(JSON.stringify(ping))
    setPingAndReconnectionPush = setInterval(() =&gt; {
        Socket.send(JSON.stringify(ping))
    }, time)
}
const reconnection = () =&gt; {
    if(reconnectionNow&gt;=reconnectionNum){
        clearInterval(setPingAndReconnectionPush)
        relinkOrClose = false;
        Socket.close()
        console.log("重连失败，自动关闭");
    }
}
export const closeWS = () =&gt; {
    clearInterval(setPingAndReconnectionPush)
    relinkOrClose = false;
    Socket.close()
}

同时，ws://47.96.129.24:8888 这个地址也是可用的websocket地址，如果有需要测试的话可用直接发送消息到这个地址，消息格式是{name:String,message:String}，然后可用通过www.xidegui.top:1919这个地址进行另外客户端的发送，用户名自定，密码9575。由于服务器是临时搭建的node服务器，QPS低的很，一旦服务器挂了还没法自己重启，必须人工重启，所以还是不要大量的发送消息。

这个包我也会继续在npm上维护

喜欢1

在vue中使用websocket

最新喜欢：