設定專案
用 Claude Code 初始化專案跟裝 Socket.io
⏱ 預估 ~8 分鐘
01 · 讀一讀
該蓋了。我們跟每個 Node.js 專案一樣開始：建資料夾、初始化 npm、裝相依套件。你 Level 7 做過。
新材料是 Socket.io — 讓 WebSocket 容易用的函式庫。它處理連線升級、重連、訊息序列化，讓你專注遊戲邏輯不用底層網路。
你也會用 Express 提供你遊戲的 HTML 檔。Express 跟 Socket.io 合作：Express 提供頁、Socket.io 處理即時溝通。
重點整理
- Socket.io 是簡化 WebSocket 溝通的函式庫
- Express 提供 HTML/CSS/JS 檔到瀏覽器
- Socket.io 處理 client 跟 server 之間即時事件
- 兩個都跑在同 server — Express 給檔、Socket.io 給事件
02 · 真機練習
建專案資料夾跟裝相依套件。在你終端機跑這些指令。
03 · Prompt 範本
請 Claude Code 蓋 server。給它具體你要什麼描述 — 不只「做 server」，而是它該確切做什麼。
幫我建一個 server.js 檔案，做為井字遊戲的伺服器。使用 Express 從 public/ 目錄提供靜態檔案，並整合 Socket.io 處理即時通訊。當 client 連線時，用 socket ID 印出 'Player connected'；當對方斷線時，用 socket ID 印出 'Player disconnected'。監聽 PORT 環境變數，沒有的話 fallback 到 port 3000。
04 · 看程式碼
Claude 產出 server.js 後，找這關鍵模式。Socket.io 不能直接接 Express app — 它要原始 HTTP server 物件。
Express + Socket.io 整合模式
const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');
const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer);
app.use(express.static('public'));
io.on('connection', (socket) => {
console.log('Player connected:', socket.id);
socket.on('disconnect', () => {
console.log('Player disconnected:', socket.id);
});
});
httpServer.listen(process.env.PORT || 3000);
注意三層：Express(app)處理 HTTP 請求跟提供檔。HTTP server(httpServer)包 Express。Socket.io(io)包 HTTP server 攔截 WebSocket 升級請求。所以 Socket.io 需要原始 HTTP server — 它要在 Express 看到前抓 'Upgrade: websocket' header。
06 · 填空
Socket.io 要原始 HTTP _____ 物件，不只 Express app，因為它要處理 WebSocket 升級握手。
07 · 選擇題
npm install express socket.io 加什麼到你專案？
- 兩個蓋遊戲的程式語言
- 資料庫跟快取層
- 前端框架跟 CSS 函式庫
- Web 框架（Express）跟即時溝通函式庫（Socket.io）
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。