怎么在vue中使用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發送消息，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。