如何在 Vue.js 中使用 Websockets - 謝宗佑的作品集網站

在現代網站開發中，實時性越來越受到重視。即時通訊、協同編輯、實時遊戲等應用場景需要一個高效、可靠的實時通訊機制。Websockets 是一種網絡通訊協定，它能夠在客戶端和伺服器之間建立持久的、全雙工的連接，以實現即時交流。

本文將詳細介紹如何在 Vue.js 專案中使用 Websockets。我們會透過一個簡單的聊天室示例來解釋實作的過程。

前置準備

首先，確保你的開發環境已經安裝了 Node.js 和 Vue CLI。如果尚未安裝，請參考官方文檔進行安裝。

# 安裝 Vue CLI
npm install -g @vue/cli

建立 Vue.js 專案

使用 Vue CLI 建立一個新專案，並進入專案目錄：

vue create my-websocket-app
cd my-websocket-app

安裝 Socket.io 客戶端

在這個範例中，我們會使用 Socket.io 作為 Websocket 的客戶端和伺服器庫。首先，安裝 Socket.io 客戶端：

npm install socket.io-client

實作 Websocket 客戶端

打開 src/App.vue，將以下程式碼添加到 <script> 區塊。

import { ref, onMounted, onUnmounted } from "vue";
import io from "socket.io-client";

export default {
  setup() {
    const messageList = ref([]);

    const socket = io("ws://localhost:3000");

    onMounted(() => {
      socket.on("message", (message) => {
        messageList.value.push(message);
      });
    });

    onUnmounted(() => {
      socket.disconnect();
    });

    return {
      messageList
    };
  }
};

程式碼解釋

import io from "socket.io-client";：導入 Socket.io 客戶端庫。
const socket = io("ws://localhost:3000");：初始化一個到本地伺服器的 Socket 連接。
onMounted 和 onUnmounted：在組件掛載和卸載時，設定和移除事件監聽。

後端 WebSocket 伺服器

你也需要一個 WebSocket 伺服器來配合前端。以下是一個使用 Socket.io 建立的簡單 Node.js 伺服器範例：

const express = require("express");
const { Server } = require("socket.io");

const app = express();
const httpServer = app.listen(3000);

const io = new Server(httpServer);

io.on("connection", (socket) => {
  socket.on("message", (message) => {
    io.emit("message", message);
  });
});

未來可能的修改方向

安全性：目前的示例並未包括任何身份驗證或加密。在實際應用中，應使用 HTTPS 和 JWT 等技術來增加安全性。
錯誤處理：需要加入更多的錯誤處理和重連機制。
狀態管理：在更大型的應用中，應該考慮使用 Vuex 來管理狀態。