YuKi
论坛版主
论坛版主
  • 最后登录2020-12-16
  • 发帖数17
  • 社区居民
阅读:476回复:1

在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) => {
    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 = () => {
    sendPing()
}
const errChange = () => {
    Socket.close()
    clearInterval(setPingAndReconnectionPush)
    if (Socket.readyState !== 3) {
        Socket = null
        createSocket(wsUrl,reconnectionNum)
    }
}
const msgChange = e => {
    console.log(e);
    window.dispatchEvent(new CustomEvent('msgChange', {
        detail: {
            data: e.data
        }
    }))
}
const connecting = message => {
    setTimeout(() => {
        if (Socket.readyState === 0) {
            connecting(message)
        } else {
            Socket.send(JSON.stringify(message))
        }
    }, 1000)
}
export const sendWSPush = message => {
    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 = () => {
    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"}) => {
    clearInterval(setPingAndReconnectionPush)
    Socket.send(JSON.stringify(ping))
    setPingAndReconnectionPush = setInterval(() => {
        Socket.send(JSON.stringify(ping))
    }, time)
}
const reconnection = () => {
    if(reconnectionNow>=reconnectionNum){
        clearInterval(setPingAndReconnectionPush)
        relinkOrClose = false;
        Socket.close()
        console.log("重连失败,自动关闭");
    }
}
export const closeWS = () => {
    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上维护

最新喜欢:

doubleyongdouble...
doubleyong
管理员
管理员
  • 最后登录2021-02-28
  • 发帖数972
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
沙发#
发布于:2020-12-09 22:19
666,很赞
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号