阅读:3854回复:1
在vue中使用websocket更新时间: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上维护 |
|
最新喜欢:double... |
沙发#
发布于:2020-12-09 22:19
666,很赞
|
|
|