連 Client 跟 Server
用 Socket.io 事件接瀏覽器跟 server
⏱ 預估 ~7 分鐘
01 · 讀一讀
你有管遊戲的 server 跟顯示棋盤的頁。它們現在不講話。缺的塊是 client.js — 跑在瀏覽器、在玩家做什麼（點 cell、按按鈕）跟 server 懂什麼（Socket.io 事件）之間翻譯的 JavaScript。
想 client.js 像外交會議翻譯員。玩家講「點擊跟按鈕」。Server 講「事件跟資料」。翻譯員聽雙方、轉訊息、確保所有人懂。
重點整理
- client.js 在瀏覽器跑，不是 server
- 把使用者動作（點擊）翻成 Socket.io 事件
- 把 server 事件翻成 UI 更新（顯示移動、狀態訊息）
- io() 函式自動連 server
02 · Prompt 範本
請 Claude 蓋 client 端 JavaScript。對每個事件跟 UI 更新明確。
幫我建一個 public/client.js，給井字遊戲用。要求：（1） 用 io() 連到伺服器——Socket.io 會自動連到提供這個頁面的 host。（2） 點下 'Find Game' 時 emit 'find-game'，並把狀態更新為 'Searching for opponent...'。（3） 收到 'waiting' 事件時，狀態更新為 'Waiting for another player...'。（4） 收到 'game-start' 事件時（會收到 symbol 和 roomId），記錄玩家的符號，狀態顯示輪到誰，並啟用棋盤。（5） 點擊格子時，emit 'make-move' 帶上 cell index 和 roomId——但只有在輪到自己且該格是空的時候才送。（6） 收到 'move-made' 事件時，把對應符號填到該格，更新輪次狀態，並依照輪到誰來啟用或停用點擊。（7） 收到 'game-over' 事件時，顯示結果（贏 / 輸 / 平手），有需要的話 highlight 獲勝的三格，並顯示 Play Again 按鈕。（8） 收到 'opponent-left' 事件時，顯示 'Opponent disconnected' 並顯示 Play Again 按鈕。（9） 點下 Play Again 時，重置棋盤並再次 emit 'find-game'。
03 · 看程式碼
Claude 產出 client.js 後，找這核心模式。這是每個 Socket.io client 怎麼運作。
Socket.io client 模式
const socket = io();
// Sending events TO the server
socket.emit('find-game');
socket.emit('make-move', { index: 4, roomId: myRoom });
// Receiving events FROM the server
socket.on('game-start', (data) => {
// data.symbol is 'X' or 'O'
// data.roomId identifies this game
});
socket.on('move-made', (data) => {
// data.index, data.symbol
// Update the board cell
});
io() 建跟 server 的連線。socket.emit() 送事件。socket.on() 聽事件。事件名（'find-game'、'game-start'、'move-made'）是 client 跟 server 之間契約 — 要一字不差。這是你在規劃課研究的同事件流。
04 · 讀一讀
Client 永不決定移動有效。它送每個點擊到 server 等 server 回。Server 說移動有效（emit 'move-made'），client 更新棋盤。Server 忽略移動，什麼都不發生。
這是規劃課同原則：server 是權威。Client 就是顯示。你可能加 client 端檢查（像不是你回合時停用點擊）讓 UI 感覺反應靈敏，但 server 還是獨立驗證一切。
重點整理
- Client 送移動到 server、等確認
- Server 驗證每步 — client 永不決定有效
- Client 端檢查只給 UX，不給安全
- client.js 事件名要跟 server.js 預期一字不差
05 · 真機練習
測完整遊戲流程。這是真相時刻 — 開兩個瀏覽器分頁到同 URL 自己跟自己玩。
06 · 填空
client.js 的 io() 函式建跟 server 的 _____ 連線，整個遊戲 session 保持開。
07 · 選擇題
玩家在瀏覽器點 cell。接下來發生什麼？
- Client 立刻在棋盤放符號、之後告訴 server
- Client 送 HTTP POST 請求到 server
- 瀏覽器重新整理頁拿更新棋盤
- Client emit 'make-move' 到 server、等 server emit 'move-made' 才更新棋盤
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。