vue实现websocket发送消息并实时接收消息
公司做了个⾏情的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
console.log('socket连接成功')
//set().start() //后端说暂时不需要做⼼跳检测
}
console.log(ev,'连接正常')
//set().start() //后端说暂时不需要做⼼跳检测
}
console.log('websocket服务出错了---onerror');
reconnet(wsUrl)
}
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)=>{ //发送数据，接收处理数据
adyState===1){
globalCallback = callback; //把接收处理回调函数保存到全局
sendData = data; //把发送数据也保存到全局
data = JSON.stringify(data);
socket.send(data);
}else{
setTimeout(()=>{
console.log(socket,'等待socket链接成功')
sendMsg(data,callback)
},1500)
return false
}
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)=>{ //发送数据，接收数据
adyState===1){
globalCallback = callback;
sendData = data;
data = JSON.stringify(data);
socket.send(data);
}else{
setTimeout(()=>{
console.log(socket,'等待socket链接成功')
sendMsg(data,callback)
},1500)
return false
}
callback && callback(ev)
}
}
let initSocket = ()=>{ //初始化websocket
console.log('socket连接成功')
//set().start() //后端说暂时不需要做⼼跳检测
if(isReconnet){//执⾏全局回调函数
websocket和socket//console.log('websocket重新连接了')
sendMsg(sendData,globalCallback)
isReconnet = false
}
}
console.log(ev,'连接正常')
/
/set().start() //后端说暂时不需要做⼼跳检测
}
console.log('websocket服务出错了---onerror');
reconnet(wsUrl)
}
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发送消息并实时接收消息，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。