Set up the project

Initialize the project and install Socket.io with Claude Code

⏱ Est. ~8 min

01 · Read

Time to build. We start the same way as every Node.js project: create a folder, initialize npm, install dependencies. You did this in Level 7.

What's new is Socket.io — a library that makes WebSocket easy to use. It handles connection upgrades, reconnection, and message serialization so you can focus on game logic instead of low-level networking.

You'll also use Express to serve the HTML for your game. Express and Socket.io work together: Express serves the pages, Socket.io handles the realtime communication.

Key points

Socket.io is a library that simplifies WebSocket communication
Express serves HTML/CSS/JS files to the browser
Socket.io handles realtime events between client and server
Both run on the same server — Express for files, Socket.io for events

02 · Real-machine exercise

Create the project folder and install the dependencies. Run these commands in your terminal.

03 · Prompt template

Ask Claude Code to build the server. Give it a specific description of what you want — not just "make a server", but exactly what it should do.

Help me create a server.js file that acts as the server for a tic-tac-toe game. Use Express to serve static files from the public/ directory, and integrate Socket.io to handle realtime communication. When a client connects, log 'Player connected' with the socket ID; when they disconnect, log 'Player disconnected' with the socket ID. Listen on the PORT environment variable, falling back to port 3000.

04 · Code example

After Claude produces server.js, look for this key pattern. Socket.io can't be attached to the Express app directly — it needs the raw HTTP server object.

Express + Socket.io integration pattern

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);

Notice the three layers: Express (app) handles HTTP requests and serves files. HTTP server (httpServer) wraps Express. Socket.io (io) wraps the HTTP server to intercept WebSocket upgrade requests. That's why Socket.io needs the raw HTTP server — it needs to catch the 'Upgrade: websocket' header before Express sees it.

05 · Real-machine exercise

Create a minimal test page to verify the connection works.

06 · Fill in the blank

Socket.io needs the raw HTTP _____ object, not just the Express app, because it needs to handle the WebSocket upgrade handshake.

07 · Quiz

What does npm install express socket.io add to your project?

Two programming languages for building games
A database and a cache layer
A front-end framework and a CSS library
A web framework (Express) and a realtime communication library (Socket.io)

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.