在現代Web應用中，實時數據交互和推送是一個非常關鍵的功能。WebSocket作為一種在單個TCP連接上進行全雙工通信的協議，使得服務器與客戶端之間的數據傳輸更加高效、實時。本文將詳細介紹如何在Vue3框架下利用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連接的穩定性和可靠性，通常還需要實現重連邏輯以及心跳檢測機制。當連接斷開時，可以嘗試重新連接；同時，定期發送心跳包維持長連接，防止因網絡波動導致的意外斷開。

<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>

總結

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

詳解Vue3中的WebSocket通訊實現

WebSocket簡

Vue3中實現WebSocket通訊

總結