Vue3與WebSocket結合能夠很好地滿足實時通訊的需求。通過合理設計和管理WebSocket連接的生命周期，以及實現必要的重連邏輯和心跳檢測機制，可以構建出響應迅速且穩定的實時應用。

WebSocket

WebSocket允許服務端主動向客戶端發送數據，無需客戶端發起請求，從而實現了低延遲、高效率的數據交換。它通過HTTP升級協議握手來建立持久性的連接，并使用幀（frame）的形式傳輸數據。

Vue3中實現WebSocket通訊

創建WebSocket實例

首先，在Vue3組件中創建一個WebSocket實例，并監聽其生命周期事件：

<template><!-- 省略其他UI元素 --><button @click="sendMessage">發送消息</button><ul><li v-for="(message, index) in messages" :key="index">{{ message }}</li></ul>
</template><script setup>
import { ref } from 'vue';// 創建WebSocket實例，替換為你的實際服務器地址
const ws = new WebSocket('ws://your-websocket-server-url/webSocket');// 初始化消息數組
const messages = ref([]);// 監聽WebSocket打開事件
ws.addEventListener('open', () => {console.log('WebSocket已連接');
});// 監聽接收到消息的事件
ws.addEventListener('message', (event) => {const data = JSON.parse(event.data);messages.value.push(data.message);
});// 發送消息至服務器的方法
function sendMessage() {const message = 'Hello, Server!';ws.send(JSON.stringify({ message }));
}// 監聽WebSocket關閉事件
ws.addEventListener('close', () => {console.log('WebSocket連接已關閉');
});// 監聽錯誤事件
ws.addEventListener('error', (error) => {console.error('WebSocket發生錯誤:', error);
});
</script>

上述代碼展示了如何在Vue3組件內初始化WebSocket連接，并添加了基本的消息發送和接收功能。

管理WebSocket連接的生命周期

在真實項目中，你需要考慮在組件掛載時建立連接，在卸載時關閉連接，以確保資源的有效管理和回收：

<script setup>
import { onMounted, onUnmounted } from 'vue';let ws;onMounted(() => {ws = new WebSocket('ws://your-websocket-server-url/webSocket');// ... 添加其他生命周期事件監聽器
});onUnmounted(() => {if (ws.readyState !== WebSocket.CLOSED) {ws.close();}
});
</script>

webSocket.readyState

readyState屬性返回實例對象的當前狀態，共有四種。

• CONNECTING：值為0，表示正在連接。
• OPEN：值為1，表示連接成功，可以通信了。
• CLOSING：值為2，表示連接正在關閉。
• CLOSED：值為3，表示連接已經關閉，或者打開連接失敗。

處理重連邏輯和心跳檢測

為了保證WebSocket連接的穩定性和可靠性，通常還需要實現重連邏輯以及心跳檢測機制。當連接斷開時，可以嘗試重新連接；同時，定期發送心跳包維持長連接，防止因網絡波動導致的意外斷開。

<script setup>
import { ref, watchEffect } from 'vue';// ... 其他變量定義和初始化// 用于控制重連的計數器
const reconnectAttempts = ref(0);// 在斷開連接后嘗試重新連接
function handleReconnect() {setTimeout(() => {reconnectAttempts.value++;if (reconnectAttempts.value <= MAX_RECONNECT_ATTEMPTS) {connectWebSocket();} else {console.log('超過最大重試次數，停止重連');}}, RECONNECT_DELAY);
}// 心跳檢測函數
function sendHeartbeat() {// 定期發送心跳包給服務器ws.send(JSON.stringify({ type: 'heartbeat' }));
}// 在連接成功后啟動心跳檢測
function startHeartbeat() {setInterval(sendHeartbeat, HEARTBEAT_INTERVAL);
}// 連接WebSocket的方法
function connectWebSocket() {ws = new WebSocket('ws://your-websocket-server-url/webSocket');// 添加事件監聽器...// ...ws.addEventListener('close', handleReconnect);ws.addEventListener('open', startHeartbeat);
}onMounted(connectWebSocket);
// ... 其他生命周期處理
</script>

實例對象的onmessage屬性，用于指定收到服務器數據后的回調函數。

ws.onmessage = function(event) {var data = event.data;// 處理數據
};ws.addEventListener("message", function(event) {var data = event.data;// 處理數據
});

注意，服務器數據可能是文本，也可能是二進制數據（blob對象或Arraybuffer對象）。

ws.onmessage = function(event){if(typeof event.data === String) {console.log("Received data string");}if(event.data instanceof ArrayBuffer){var buffer = event.data;console.log("Received arraybuffer");}
}

除了動態判斷收到的數據類型，也可以使用binaryType屬性，顯式指定收到的二進制數據類型。

// 收到的是 blob 數據
ws.binaryType = "blob";
ws.onmessage = function(e) {console.log(e.data.size);
};// 收到的是 ArrayBuffer 數據
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {console.log(e.data.byteLength);
};

webSocket.send()

實例對象的send()方法用于向服務器發送數據。

發送文本的例子。

ws.send('your message');

發送 Blob 對象的例子。

var file = document.querySelector('input[type="file"]').files[0];
ws.send(file);

發送 ArrayBuffer 對象的例子。

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {binary[i] = img.data[i];
}
ws.send(binary.buffer);

webSocket.bufferedAmount

實例對象的bufferedAmount屬性，表示還有多少字節的二進制數據沒有發送出去。它可以用來判斷發送是否結束。

var data = new ArrayBuffer(10000000);
socket.send(data);if (socket.bufferedAmount === 0) {// 發送完畢
} else {// 發送還沒結束
}

總結

綜上所述，Vue3與WebSocket結合能夠很好地滿足實時通訊的需求。通過合理設計和管理WebSocket連接的生命周期，以及實現必要的重連邏輯和心跳檢測機制，可以構建出響應迅速且穩定的實時應用。在實際開發中，還可以根據具體業務需求對WebSocket通訊做更深入的定制和優化。