文章目錄
1. 什么是websocket
2. 什么情況下使用websocket？
3. websocket的使用場景
4. 我的使用場景
5. 安裝reconnecting-websocket
6. 邏輯處理
7. 心跳機制
一、什么是websocket？
- WebSocket是一種在單個TCP連接上進行全雙工通信的協(xié)議
- WebSocket API被W3C定為標準。
- WebSocket使得客戶端和服務器之間的數(shù)據(jù)交換變得更加簡單，允許服務端主動向客戶端推送數(shù)據(jù)
- 瀏覽器和服務器只需要完成一次握手，就可以創(chuàng)建永久性連接，并進行雙向數(shù)據(jù)傳輸
二、什么情況下使用websocket？
- 高實時性
- 信息即時更新
- 數(shù)據(jù)實時雙向傳輸
- 傳統(tǒng)的通過輪詢http浪費資源，消耗性能
三、websocket的使用場景
- 彈幕聊天
- 協(xié)同編輯
- 社交聊天
- 體育賽況
- 在線教育
- 智能家居
- 實時打分系統(tǒng)
四、我的使用場景
實時統(tǒng)計各人員打分情況，并可以控制計時器的開始、暫停、結(jié)束
如果websocket斷開將進行重新連接文章來源：http://www.zghlxwxcb.cn/news/detail-541612.html
五、安裝reconnecting-websocket
npm install reconnecting-websocket --save
六、邏輯處理
import ReconnectingWebSocket from "reconnecting-websocket";
data() {
return {
scoket: null,
heartTimer: null
};
},
created() {
this.initWebSocket();
},
methods: {
//websocket初始化
initWebpack() {
this.scoket = new ReconnectingWebSocket('ws://xxx.xxx.xxx');
// websocket四個生命周期
this.scoket.onopen = this.socketOpen;
this.scoket.onmessage = this.socketonMessage;
this.scoket.onclose = this.socketClose;
this.scoket.onerror = this.socketError;
},
//建立連接
socketOpen(e) {
this.heartbeat()
},
//信息接收
socketonMessage(response){
}
//斷開連接
socketClose(){
},
//連接失敗
socketError(){
}
},
beforeDestroy() {
clearInterval(this.heartTimer); //清除心跳計時器
this.scoket.close(); //斷開心跳連接
},
七、心跳機制
為什么要有心跳機制呢？就是為了確保連接的穩(wěn)定性，說白了就是客戶端通過心跳的形式告訴服務端“我”還活著，連接請不要斷開。文章來源地址http://www.zghlxwxcb.cn/news/detail-541612.html
// 定時向服務器發(fā)送心跳標識
heartbeat(){
this.heartTimer = setInterval(() => {
if (this.scoket.readyState == 1) {
this.scoket.send("heartCheck");
}
}, 5000);
}
到了這里，關于vue中如何使用websocket的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
