1.WebScoket心跳機制是？
? ? ? ? 基于上一篇文章，WebScoket在瀏覽器和服務器間完成一次握手，兩者間創建持久性連接，并進行雙向數據連接。node.js-node.js作為服務器，前端使用WebSocket（單個TCP連接上進行全雙工通訊的協議）-CSDN博客文章瀏覽閱讀645次，點贊17次，收藏11次。node.js作為服務器，前端使用WebSocket（單個TCP連接上進行全雙工通訊的協議）https://blog.csdn.net/2301_76671906/article/details/146199752?fromshare=blogdetail&sharetype=blogdetail&sharerId=146199752&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link????????心跳機制簡單的來說，就是(1)客戶端向服務器利用定時（setInterval）發送消息（心跳包）。(2)前端監聽WebScoket的關閉連接（onclose()事件）時重新創建連接。
- ? ? ? ? 客戶端定時向服務器發送心跳數據包，保持持久性連接。
- ? ? ? ? 服務器定時向客戶端發送心跳數據包，檢測客戶端連接是否正常。
2.WebScoket心跳機制的必要性？
? ? ? ? 必要的，心跳機制通過檢測服務器與客戶端連接狀態，處理連接失敗后重連或其他的異常情況。
3.WebScoket心跳機制的缺點？
- ????????不斷地定時發送心跳數據包，會消耗服務器的資源。
- ????????檢測到連接失敗后，重新連接會導致部分的數據丟失。
4.例子
<!DOCTYPE html>
<html>
<head><title>WebSocket測試</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><input v-model="inputMessage" @input="sendMessage" placeholder="輸入消息"><p>收到的消息: {{ receivedMessage }}</p></div><script>// 創建WebSocket實例，連接到本地的8080端口const ws = new WebSocket('ws://localhost:8080');const app = new Vue({el: '#app',data: {inputMessage: '',receivedMessage: ''},methods: {sendMessage() {// 如果WebSocket連接已打開if (ws.readyState === WebSocket.OPEN) {// 發送輸入框中的內容ws.send(this.inputMessage);}}}});// 當WebSocket連接成功時觸發ws.onopen = function() {console.log('已連接到服務器');// 1.連接成功后開始心跳startHeartbeat();};// 2.當收到服務器發送的消息時觸發ws.onmessage = function(event) {console.log('收到消息: ' + event.data);// 更新Vue實例中的receivedMessage變量app.receivedMessage = event.data;//重置心跳計時器resetHeartbeat();};// 3.當WebSocket連接關閉時觸發ws.onclose = function() {console.log('連接已關閉');// 停止心跳計時器stopHeartbeat();// 添加重新連接邏輯};// 4.心跳相關發送心跳消息和重置心跳計時器let heartbeatIntervalId;const heartbeatInterval = 30000; // 心跳間隔，單位為毫秒function startHeartbeat() {heartbeatIntervalId = setInterval(() => {if (ws.readyState === WebSocket.OPEN) {ws.send('heartbeat'); // 發送心跳消息console.log('發送心跳消息');} else {stopHeartbeat(); // 如果連接關閉，停止心跳}}, heartbeatInterval);}// 心跳重置定時器function resetHeartbeat() {clearInterval(heartbeatIntervalId); // 清除心跳計時器startHeartbeat(); // 重新開始心跳計時器}// 停止心跳計時器 function stopHeartbeat() {clearInterval(heartbeatIntervalId); }</script>
</body>
</html>
node.js作為服務器進行對應的接受相關的代碼在上一篇文章。
主要實現思路：
- ????????WebScoket連接成功時開啟心跳
- ????????當服務器發送消息時，重置心跳，開啟心跳
- ????????監聽連接關閉時，停止心跳
- ????????重連服務器未涉及，待學習
)
)
)
