公司做了個(gè)數(shù)字貨幣行情的H5，需要用到websocket，剛好自己也不會(huì)，可以學(xué)習(xí)一下，美滋滋。

項(xiàng)目結(jié)合vue腳手架和websocket來(lái)搭建，主要遇到了兩個(gè)問(wèn)題，一個(gè)是：斷開(kāi)重連機(jī)制要如何處理；另外一個(gè)是：如何在頁(yè)面上隨時(shí)的發(fā)送消息并實(shí)時(shí)接收返回的數(shù)據(jù)，斷開(kāi)重連后又如何重新發(fā)送消息，接收消息

一、斷開(kāi)重連機(jī)制處理 （詳細(xì)參考這里）

寫(xiě)一個(gè)重連的方法（重連方法中必須加一把鎖，重連方法執(zhí)行過(guò)程中不再執(zhí)行重連動(dòng)作，避免重復(fù)連接），然后在websocket的onclose和error中綁定重連方法，這樣一般情況下，websocket斷開(kāi)或者鏈接出錯(cuò)就可以實(shí)現(xiàn)重連了。針對(duì)斷網(wǎng)重連問(wèn)題，就需要用心跳檢測(cè)了（主要是利用websocket定時(shí)發(fā)送消息，當(dāng)超過(guò)一定時(shí)間消息還未發(fā)送成功，瀏覽器的websocket會(huì)自動(dòng)觸發(fā)onclose方法，而此時(shí)onclose有綁定了重連函數(shù)，于是就觸發(fā)websocket重新連接），項(xiàng)目這邊暫時(shí)不考慮這個(gè)，所以沒(méi)做心跳檢測(cè)。

主要代碼：

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() //后端說(shuō)暫時(shí)不需要做心跳檢測(cè)  }  socket.onmessage = (ev)=>{ console.log(ev,'連接正常') //heartCheck.reset().start() //后端說(shuō)暫時(shí)不需要做心跳檢測(cè) }  socket.onerror = ()=>{ console.log('websocket服務(wù)出錯(cuò)了---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 = { //心跳檢測(cè) 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方法清除定時(shí)器 socket.send('heart check') this.serverTimeoutObj = setTimeout(()=>{ socket.close() },that.timeout) },this.timeout) }}

二、在頁(yè)面上隨時(shí)發(fā)送消息并實(shí)時(shí)接收消息

在上面代碼的基礎(chǔ)上增加一個(gè)發(fā)送數(shù)據(jù)的方法，該方法有兩個(gè)參數(shù)，一個(gè)是需要發(fā)送的數(shù)據(jù)；另一個(gè)為接收和處理返回?cái)?shù)據(jù)的回調(diào)函數(shù)，然后把這個(gè)方法暴露出去并掛載到Vue原型上，這樣就可以在任意頁(yè)面或者組件隨時(shí)的發(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)聽(tīng)onmessage，并把數(shù)據(jù)傳給回調(diào)函數(shù) callback && callback(ev) }}