本篇文章為大家展示了怎么在vue中使用websocket發(fā)送消息，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
一、斷開重連機制處理
寫一個重連的方法（重連方法中必須加一把鎖，重連方法執(zhí)行過程中不再執(zhí)行重連動作，避免重復(fù)連接），然后在websocket的onclose和error中綁定重連方法，這樣一般情況下，websocket斷開或者鏈接出錯就可以實現(xiàn)重連了。針對斷網(wǎng)重連問題，就需要用心跳檢測了（主要是利用websocket定時發(fā)送消息，當(dāng)超過一定時間消息還未發(fā)送成功，瀏覽器的websocket會自動觸發(fā)onclose方法，而此時onclose有綁定了重連函數(shù)，于是就觸發(fā)websocket重新連接），項目這邊暫時不考慮這個，所以沒做心跳檢測。
主要代碼：
重慶分公司
重慶分公司
let socket = null;
let lockReconnet = false; //避免重復(fù)連接
const wsUrl = '自己的websocket接口';
let createSocket = url=>{ //創(chuàng)建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服務(wù)出錯了---onerror');
reconnet(wsUrl)
}
socket.onclose = ()=>{
console.log('websocket服務(wù)關(guān)閉了+++onclose');
reconnet(wsUrl)
}
}
let reconnet = url=>{ //重新連接websock函數(shù)
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(()=>{
//發(fā)送數(shù)據(jù)，如果onmessage能接收到數(shù)據(jù)，表示連接正常,然后在onmessage里面執(zhí)行reset方法清除定時器
socket.send('heart check')
this.serverTimeoutObj = setTimeout(()=>{
socket.close()
},that.timeout)
},this.timeout)
}
}二、在頁面上隨時發(fā)送消息并實時接收消息
在上面代碼的基礎(chǔ)上增加一個發(fā)送數(shù)據(jù)的方法，該方法有兩個參數(shù)，一個是需要發(fā)送的數(shù)據(jù)；另一個為接收和處理返回數(shù)據(jù)的回調(diào)函數(shù)，然后把這個方法暴露出去并掛載到Vue原型上，這樣就可以在任意頁面或者組件隨時的發(fā)送消息，并接收消息了。具體代碼：
let sendMsg = (data,callback)=>{ //發(fā)送數(shù)據(jù),接收處理數(shù)據(jù)
if(socket.readyState===1){
globalCallback = callback; //把接收處理回調(diào)函數(shù)保存到全局
sendData = data; //把發(fā)送數(shù)據(jù)也保存到全局
data = JSON.stringify(data);
socket.send(data);
}else{
setTimeout(()=>{
console.log(socket,'等待socket鏈接成功')
sendMsg(data,callback)
},1500)
return false
}
socket.onmessage = ev=>{ //重新監(jiān)聽onmessage，并把數(shù)據(jù)傳給回調(diào)函數(shù)
callback && callback(ev)
}
}三、斷開重連后如何重新發(fā)送消息和接收消息
增加一個保存要發(fā)送消息的全局變量，以及一個保存接收處理消息回調(diào)函數(shù)的全局變量，當(dāng)重連觸發(fā)后，重新調(diào)用下senMsg方法，并把這兩個變量傳進去就可以了。
完整的封裝代碼（mysocket.js）：
//import Vue from 'vue'
let socket = null;
let lockReconnet = false; //避免重復(fù)連接
const wsUrl = '自己的websocket接口';
let isReconnet = false;
let globalCallback = null,sendData = null; //把要發(fā)送給socket的數(shù)據(jù)和處理socket返回數(shù)據(jù)的回調(diào)保存起來
let createSocket = url=>{ //創(chuàng)建socket
try{
if('WebSocket' in window){
socket = new WebSocket(url)
}else if('MozWebSocket' in window){
socket = new MozWebSocket(url)
}
//Vue.prototype.socket = socket //需要主動關(guān)閉的話就可以直接調(diào)用this.socket.close()進行關(guān)閉，不需要的話這個可以去掉
initSocket()
}catch(e){
reconnet(url)
}
}
let sendMsg = (data,callback)=>{ //發(fā)送數(shù)據(jù),接收數(shù)據(jù)
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){//執(zhí)行全局回調(diào)函數(shù)
//console.log('websocket重新連接了')
sendMsg(sendData,globalCallback)
isReconnet = false
}
}
socket.onmessage = (ev)=>{
console.log(ev,'連接正常')
//heartCheck.reset().start() //后端說暫時不需要做心跳檢測
}
socket.onerror = ()=>{
console.log('websocket服務(wù)出錯了---onerror');
reconnet(wsUrl)
}
socket.onclose = ()=>{
console.log('websocket服務(wù)關(guān)閉了+++onclose');
reconnet(wsUrl)
}
}
let reconnet = url=>{ //重新連接websock函數(shù)
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(()=>{
//發(fā)送數(shù)據(jù)，如果onmessage能接收到數(shù)據(jù)，表示連接正常,然后在onmessage里面執(zhí)行reset方法清除定時器
socket.send('heart check')
this.serverTimeoutObj = setTimeout(()=>{
socket.close()
},that.timeout)
},this.timeout)
}
}
createSocket(wsUrl)
export default {sendMsg}在main.js里面引入這個文件，并把sendMsg掛載到Vue原型上，就可以再頁面上隨時發(fā)送消息接收消息了。
import socket from './assets/js/mysocket' Vue.prototype.sendMsg = socket.sendMsg
在頁面上調(diào)用方法：
getSocketData(symbol){
let data = {"event":"subscription","data":"market.kline."+symbol};
this.sendMsg(data,ev=>{
console.log(JSON.parse(ev.data),'K線相關(guān)數(shù)據(jù)')
})
}上述內(nèi)容就是怎么在vue中使用websocket發(fā)送消息，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
