在現代網站開發中，實時通訊變得愈加重要。無論是即時聊天、協同編輯，還是線上遊戲，都需要高效且可靠的通訊機制。WebSocket 協定提供了客戶端與伺服器之間的持久性全雙工連線，滿足了這些需求。本文將介紹如何在 Vue 3 專案中整合 WebSocket，並提供一個簡單的聊天室範例。
前置準備
首先，確保您的開發環境已安裝 Node.js（建議版本 18.0 或以上）。您可以從 Node.js 官方網站下載並安裝最新版本。
建立 Vue 3 專案
使用 Vite 建立新的 Vue 3 專案：
# 建立新專案
npm create vue@latest
# 進入專案目錄
cd my-websocket-app在執行 npm create vue@latest 時，系統會提示您選擇專案名稱和所需的功能，例如是否使用 TypeScript、是否添加 Vue Router 等。根據您的需求進行選擇即可。
安裝套件
在專案目錄中，安裝必要的套件：
# 安裝專案相依套件
npm install
# 安裝 Socket.io 客戶端
npm install socket.io-client實作 WebSocket 客戶端
在 src/App.vue 中，添加以下程式碼：
<template>
<div>
<ul>
<li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
</ul>
<input v-model="newMessage" @keyup.enter="sendMessage" placeholder="輸入訊息並按 Enter 發送" />
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { io } from 'socket.io-client';
const messages = ref([]);
const newMessage = ref('');
const socket = io('http://localhost:3000');
const sendMessage = () => {
if (newMessage.value.trim()) {
socket.emit('message', newMessage.value);
newMessage.value = '';
}
};
onMounted(() => {
socket.on('message', (message) => {
messages.value.push(message);
});
});
onBeforeUnmount(() => {
socket.disconnect();
});
</script>
<style>
/* 您可以在此添加樣式 */
</style>程式碼解釋
導入必要模組：ref、onMounted 和 onBeforeUnmount 來自 Vue 3 的 Composition API，io 則來自 socket.io-client。
定義響應式變數：
messages：儲存接收到的訊息列表。newMessage：綁定使用者輸入的新訊息。
建立 Socket 連線：使用 io('http://localhost:3000') 與伺服器建立連線。
定義 sendMessage 方法：當使用者按下 Enter 鍵時，檢查 newMessage 是否非空，然後透過 socket.emit('message', newMessage.value) 發送訊息，並清空輸入框。
設定生命週期鉤子：
onMounted：組件掛載後，監聽來自伺服器的 ‘message’ 事件，並將接收到的訊息添加到messages。onBeforeUnmount：組件卸載前，斷開 Socket 連線。
建立後端 WebSocket 伺服器
為了與前端進行通訊，需要建立一個 WebSocket 伺服器。以下是使用 Node.js 和 Socket.io 建立的簡單伺服器範例：
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = new Server(server);
io.on('connection', (socket) => {
console.log('使用者已連線');
socket.on('message', (message) => {
io.emit('message', message);
});
socket.on('disconnect', () => {
console.log('使用者已斷開連線');
});
});
server.listen(3000, () => {
console.log('伺服器正在 http://localhost:3000 上運行');
});程式碼解釋
導入模組：express 用於建立 HTTP 伺服器，http 和 socket.io 用於 WebSocket 通訊。
建立伺服器：使用 express 建立應用，並透過 http.createServer 和 new Server 建立 Socket.io 伺服器。
設定連線事件：當有使用者連線時，監聽 ‘message’ 事件，並將接收到的訊息廣播給所有連線的客戶端。
啟動伺服器：伺服器監聽 3000 埠，並在控制台輸出運行訊息。
透過上述步驟，您已成功在 Vue 3 專案中整合 WebSocket，並建立了一個簡單的聊天室應用。這種實時通訊的實作方式可應用於各種需要即時資料更新的場景，如即時聊天、協同編輯等。