WebSocket 後端設置筆記 📝

專案背景

• 後端技術棧：Node.js + Express

• WebSocket 套件：ws (來自 npm)

程式碼修改說明

原本的 Express 設置

import express from "express"
const app = express()
const PORT = 3300

app.listen(PORT, () => {
  console.log(`server running on port ${PORT}`)
})

為什麼需要修改？

Express 的 app.listen() 雖然會在內部創建 HTTP server，但我們沒辦法直接取得這個 server 實例。而 WebSocket 需要一個可以直接操作的 HTTP server 實例來運作。

修改後的完整設置

import express from "express"
import { WebSocketServer } from 'ws'
import http from 'http'

const app = express()
const PORT = 3300

// 1. 手動創建 HTTP server
const server = http.createServer(app)

// 2. 將 server 實例傳給 WebSocket
const wss = new WebSocketServer({ server })

// 3. 使用 server 來監聽
server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`)
})

錯誤示範

如果不共用 server，就需要開啟多個 port：

app.listen(3300)  // HTTP 用 3300
const wss = new WebSocketServer({ port: 3301 })  // WebSocket 用 3301

共用 Server 的好處

1. HTTP 和 WebSocket 可以共用同一個 port

2. 統一管理server實例

3. 部署設定更簡單

4. 前端連接更方便

使用多個 Port 的壞處

1. 需要管理多個 port

2. 需要確保所有 port 都可用

3. 部署時需要開放多個 port

4. 前端需要處理不同的連接

補充說明

• 記得要安裝 ws 套件：npm install ws

---

碎碎念...

感謝 AI 幫忙釐清觀念，比起看到最後才發現別人說 "是錯的" 的教學文章，有 AI 即時指導真的超棒der！🙌