公司做了个数字货币行情的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发送消息并实时接收消息，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 小骆驼-《草原狼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]