使用場(chǎng)景：
前端需要和服務(wù)端進(jìn)行服務(wù)連接，當(dāng)前端在收到服務(wù)端發(fā)送的相關(guān)指令后可進(jìn)行頁(yè)面上的相關(guān)處理或者數(shù)據(jù)展示；
為什么使用它呢？
答案很簡(jiǎn)單，因?yàn)?HTTP 協(xié)議有一個(gè)缺陷：通信只能由客戶端發(fā)起。
舉例來說，我們想了解今天的天氣，只能是客戶端向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回查詢結(jié)果。HTTP 協(xié)議做不到服務(wù)器主動(dòng)向客戶端推送信息。
WebSocket 協(xié)議在2008年誕生，2011年成為國(guó)際標(biāo)準(zhǔn)。所有瀏覽器都已經(jīng)支持了。
它的最大特點(diǎn)就是，服務(wù)器可以主動(dòng)向客戶端推送信息，客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息，是真正的雙向平等對(duì)話，屬于服務(wù)器推送技術(shù)的一種。
方式對(duì)比.png
大家一起手把手?jǐn)]一次：
最近做的項(xiàng)目中發(fā)現(xiàn)Websocket的使用頻率還是比較高的，話不多說，上代碼：
//data中定義要使用的變量：
data(){
return {
websock: null, //websocket
}
},
相關(guān)api的使用：
!!!在相關(guān)的操作方法在可以加上自己項(xiàng)目的實(shí)際邏輯操作
methods:{
// WebSocket
initWebSocket(){
console.log('websocket連接了');
//初始化weosocket
let Ip = window.location.host
//這里的wsuri是根據(jù)服務(wù)端的ip進(jìn)行配置（開發(fā)環(huán)境），生產(chǎn)環(huán)境的話可以使用上面的Ip或者是nginx做代理
const wsuri = `ws://192.168.20.28:10068/websocket/power`; //協(xié)議標(biāo)識(shí)符是ws（如果加密，則為wss），服務(wù)器網(wǎng)址就是 URL。
// const wsuri = `ws://${Ip}/ws/${localStorage.getItem('name')}`;
this.websock = new WebSocket(wsuri);
this.websock.onmessage = this.websocketonmessage;
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose;
},
websocketsend(){//數(shù)據(jù)發(fā)送
// let msg=JSON.stringify(111111);
// this.websock.send(msg);
},
websocketonopen(){ //連接建立之后執(zhí)行send方法發(fā)送數(shù)據(jù)
},
websocketonerror(error){//連接建立失敗重連
this.initWebSocket();
},
websocketonmessage(e){ //數(shù)據(jù)接收
console.log(e）
},
websocketclose(e){ //關(guān)閉
this.websock.close()
},
}
鉤子函數(shù)：
mounted(){
this.initWebSocket()
},
beforeDestroy () {
this.websocketclose()
}
注意：在單獨(dú)某些頁(yè)面使用的時(shí)候切記要在beforeDestroy里進(jìn)行銷毀，雖然是輕量級(jí)，但不用的時(shí)候是還是斷開吧。
當(dāng)然，在使用的時(shí)候還會(huì)出現(xiàn)一種情況：就是出現(xiàn)連接失敗，控制臺(tái)報(bào)錯(cuò)，因?yàn)榇a中的處理方式是斷線一直重新連接，在這里，我們可以自行添加一個(gè)‘心跳處理’，就是如果一段時(shí)間沒有相關(guān)處理，那就不在主動(dòng)進(jìn)行連接，這個(gè)讀者可以自行編寫，或者查閱一下相關(guān)處理方式；
Tips:以上是本人在項(xiàng)目中的處理方式，或許存在不完善的地方，歡迎大家留言指正。
附上阮老師的詳解鏈接：http://www.ruanyifeng.com/blog/2017/05/websocket.html 有興趣的小伙伴可以深入研究一下。
希望各位小猿技術(shù)更上一層樓！
