Wire the client to the server
Connect the browser and the server with Socket.io events
⏱ Est. ~7 min
01 · Read
You have a server that manages games and a page that displays the board. They aren't talking to each other yet. The missing piece is client.js — the JavaScript that runs in the browser and translates between what the player does (clicks a cell, presses a button) and what the server understands (Socket.io events).
Think of client.js like an interpreter at a diplomatic meeting. The player speaks "clicks and buttons." The server speaks "events and data." The interpreter listens to both sides, translates the messages, and makes sure everyone understands.
Key points
- client.js runs in the browser, not on the server
- It translates user actions (clicks) into Socket.io events
- It translates server events into UI updates (showing moves, status messages)
- The io() function automatically connects to the server
02 · Prompt template
Ask Claude to build the client-side JavaScript. Be explicit about every event and UI update.
Help me create public/client.js for the tic-tac-toe game. Requirements: (1) Use io() to connect to the server — Socket.io will automatically connect to the host that served the page. (2) When 'Find Game' is clicked, emit 'find-game' and update the status to 'Searching for opponent...'. (3) When a 'waiting' event arrives, update the status to 'Waiting for another player...'. (4) When a 'game-start' event arrives (with symbol and roomId), record the player's symbol, display whose turn it is, and enable the board. (5) When a cell is clicked, emit 'make-move' with the cell index and roomId — but only if it's your turn and the cell is empty. (6) When a 'move-made' event arrives, place the corresponding symbol in the cell, update the turn status, and enable or disable clicks based on whose turn it is. (7) When a 'game-over' event arrives, show the result (win / lose / draw), highlight the winning three cells if applicable, and show the Play Again button. (8) When an 'opponent-left' event arrives, display 'Opponent disconnected' and show the Play Again button. (9) When Play Again is clicked, reset the board and emit 'find-game' again.
03 · Code example
After Claude produces client.js, find this core pattern. This is how every Socket.io client works.
Socket.io client pattern
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() creates the connection to the server. socket.emit() sends events. socket.on() listens for events. The event names ('find-game', 'game-start', 'move-made') are the contract between client and server — they have to match exactly. This is the same event flow you studied in the planning lesson.
04 · Read
The client never decides whether a move is valid. It sends every click to the server and waits for the server to respond. If the server says the move is valid (emits 'move-made'), the client updates the board. If the server ignores it, nothing happens.
This is the same principle from the planning lesson: the server is the authority. The client is just the display. You can add client-side checks (like disabling clicks when it's not your turn) to make the UI feel responsive, but the server still validates everything independently.
Key points
- Client sends moves to the server, waits for confirmation
- Server validates every move — the client never decides validity
- Client-side checks are for UX only, not security
- Event names in client.js have to match what server.js expects exactly
05 · Real-machine exercise
Test the full game flow. This is the moment of truth — open two browser tabs to the same URL and play yourself.
06 · Fill in the blank
The io() function in client.js opens a _____ connection to the server that stays open for the entire game session.
07 · Quiz
The player clicks a cell in the browser. What happens next?
- The client places the symbol on the board immediately, then tells the server
- The client sends an HTTP POST request to the server
- The browser reloads the page to get the updated board
- The client emits 'make-move' to the server and waits for the server to emit 'move-made' before updating the board
Other lessons in this chapter
⚠ The full interactive experience needs JavaScript. Please enable it and reload.
※ This is an independent Traditional Chinese teaching project — not an official Anthropic product. Claude™ is a trademark of Anthropic, PBC.