公司做了个数字货币行情的H5,需要用到websocket,刚好自己也不会,可以学习一下,美滋滋。
项目结合vue脚手架和websocket来搭建,主要遇到了两个问题,一个是:断开重连机制要如何处理;另外一个是:如何在页面上随时的发送消息并实时接收返回的数据,断开重连后又如何重新发送消息,接收消息
一、断开重连机制处理 (详细参考这里)
写一个重连的方法(重连方法中必须加一把锁,重连方法执行过程中不再执行重连动作,避免重复连接),然后在websocket的onclose和error中绑定重连方法,这样一般情况下,websocket断开或者链接出错就可以实现重连了。针对断网重连问题,就需要用心跳检测了(主要是利用websocket定时发送消息,当超过一定时间消息还未发送成功,浏览器的websocket会自动触发onclose方法,而此时onclose有绑定了重连函数,于是就触发websocket重新连接),项目这边暂时不考虑这个,所以没做心跳检测。
主要代码:
let socket = null; let lockReconnet = false; //避免重复连接 const wsUrl = '自己的websocket接口'; let createSocket = url=>{ //创建socket try{ if('WebSocket' in window){ socket = new WebSocket(url) }else if('MozWebSocket' in window){ socket = new MozWebSocket(url) } initSocket() }catch(e){ reconnet(url) } } let initSocket = ()=>{ //初始化websocket socket.onopen = ()=>{ console.log('socket连接成功') //heartCheck.reset().start() //后端说暂时不需要做心跳检测 } socket.onmessage = (ev)=>{ console.log(ev,'连接正常') //heartCheck.reset().start() //后端说暂时不需要做心跳检测 } socket.onerror = ()=>{ console.log('websocket服务出错了---onerror'); reconnet(wsUrl) } socket.onclose = ()=>{ console.log('websocket服务关闭了+++onclose'); reconnet(wsUrl) } } let reconnet = url=>{ //重新连接websock函数 if(lockReconnet) return false lockReconnet = true setTimeout(()=>{ createSocket(url) lockReconnet = false },2000) } let heartCheck = { //心跳检测 timeout: 60*1000, timeoutObj: null, serverTimeoutObj: null, reset(){ clearTimeout(this.timeoutObj) clearTimeout(this.serverTimeoutObj) return this; }, start(){ let that = this; this.timeoutObj = setTimeout(()=>{ //发送数据,如果onmessage能接收到数据,表示连接正常,然后在onmessage里面执行reset方法清除定时器 socket.send('heart check') this.serverTimeoutObj = setTimeout(()=>{ socket.close() },that.timeout) },this.timeout) } }
二、在页面上随时发送消息并实时接收消息
在上面代码的基础上增加一个发送数据的方法,该方法有两个参数,一个是需要发送的数据;另一个为接收和处理返回数据的回调函数,然后把这个方法暴露出去并挂载到Vue原型上,这样就可以在任意页面或者组件随时的发送消息,并接收消息了。具体代码:
let sendMsg = (data,callback)=>{ //发送数据,接收处理数据 if(socket.readyState===1){ globalCallback = callback; //把接收处理回调函数保存到全局 sendData = data; //把发送数据也保存到全局 data = JSON.stringify(data); socket.send(data); }else{ setTimeout(()=>{ console.log(socket,'等待socket链接成功') sendMsg(data,callback) },1500) return false } socket.onmessage = ev=>{ //重新监听onmessage,并把数据传给回调函数 callback && callback(ev) } }
三、断开重连后如何重新发送消息和接收消息
增加一个保存要发送消息的全局变量,以及一个保存接收处理消息回调函数的全局变量,当重连触发后,重新调用下senMsg方法,并把这两个变量传进去就可以了。
完整的封装代码(mysocket.js):
//import Vue from 'vue' let socket = null; let lockReconnet = false; //避免重复连接 const wsUrl = '自己的websocket接口'; let isReconnet = false; let globalCallback = null,sendData = null; //把要发送给socket的数据和处理socket返回数据的回调保存起来 let createSocket = url=>{ //创建socket try{ if('WebSocket' in window){ socket = new WebSocket(url) }else if('MozWebSocket' in window){ socket = new MozWebSocket(url) } //Vue.prototype.socket = socket //需要主动关闭的话就可以直接调用this.socket.close()进行关闭,不需要的话这个可以去掉 initSocket() }catch(e){ reconnet(url) } } let sendMsg = (data,callback)=>{ //发送数据,接收数据 if(socket.readyState===1){ globalCallback = callback; sendData = data; data = JSON.stringify(data); socket.send(data); }else{ setTimeout(()=>{ console.log(socket,'等待socket链接成功') sendMsg(data,callback) },1500) return false } socket.onmessage = ev=>{ callback && callback(ev) } } let initSocket = ()=>{ //初始化websocket socket.onopen = ()=>{ console.log('socket连接成功') //heartCheck.reset().start() //后端说暂时不需要做心跳检测 if(isReconnet){//执行全局回调函数 //console.log('websocket重新连接了') sendMsg(sendData,globalCallback) isReconnet = false } } socket.onmessage = (ev)=>{ console.log(ev,'连接正常') //heartCheck.reset().start() //后端说暂时不需要做心跳检测 } socket.onerror = ()=>{ console.log('websocket服务出错了---onerror'); reconnet(wsUrl) } socket.onclose = ()=>{ console.log('websocket服务关闭了+++onclose'); reconnet(wsUrl) } } let reconnet = url=>{ //重新连接websock函数 if(lockReconnet) return false isReconnet = true; lockReconnet = true setTimeout(()=>{ createSocket(url) lockReconnet = false },2000) } let heartCheck = { //心跳检测 timeout: 60*1000, timeoutObj: null, serverTimeoutObj: null, reset(){ clearTimeout(this.timeoutObj) clearTimeout(this.serverTimeoutObj) return this; }, start(){ let that = this; this.timeoutObj = setTimeout(()=>{ //发送数据,如果onmessage能接收到数据,表示连接正常,然后在onmessage里面执行reset方法清除定时器 socket.send('heart check') this.serverTimeoutObj = setTimeout(()=>{ socket.close() },that.timeout) },this.timeout) } } createSocket(wsUrl) export default {sendMsg}
在main.js里面引入这个文件,并把sendMsg挂载到Vue原型上,就可以再页面上随时发送消息接收消息了。
import socket from './assets/js/mysocket' Vue.prototype.sendMsg = socket.sendMsg
在页面上调用方法:
getSocketData(symbol){ let data = {"event":"subscription","data":"market.kline."+symbol}; this.sendMsg(data,ev=>{ console.log(JSON.parse(ev.data),'K线相关数据') }) }
效果:
总结
以上所述是小编给大家介绍的vue 实现websocket发送消息并实时接收消息,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]