Configurar o projeto
Inicializar o projeto com Claude Code e instalar o Socket.io
⏱ Estim. ~8 min
01 · Ler
Hora de construir. Começamos como em todo projeto Node.js: criar a pasta, inicializar o npm, instalar as dependências. Você já fez isso no Level 7.
A novidade é o Socket.io — uma biblioteca que torna WebSocket fácil de usar. Ela cuida do upgrade da conexão, da reconexão, da serialização das mensagens, e deixa você focado na lógica do jogo, sem ficar lidando com rede de baixo nível.
Você também vai usar Express para servir os arquivos HTML do jogo. Express e Socket.io trabalham juntos: o Express entrega as páginas, o Socket.io cuida da comunicação em tempo real.
Pontos-chave
- Socket.io é uma biblioteca que simplifica a comunicação por WebSocket
- Express serve os arquivos HTML/CSS/JS para o navegador
- Socket.io cuida dos eventos em tempo real entre cliente e servidor
- Os dois rodam no mesmo servidor — Express entrega arquivos, Socket.io entrega eventos
02 · Prática real
Crie a pasta do projeto e instale as dependências. Rode estes comandos no seu terminal.
03 · Modelo de prompt
Peça ao Claude Code para construir o servidor. Descreva com precisão o que você quer — não só "faz um servidor", mas o que ele deve fazer exatamente.
Me ajuda a criar um arquivo server.js que sirva como servidor do jogo da velha. Use Express para servir os arquivos estáticos do diretório public/ e integre o Socket.io para a comunicação em tempo real. Quando um cliente conectar, imprima 'Player connected' com o socket ID; quando desconectar, imprima 'Player disconnected' com o socket ID. Escute a variável de ambiente PORT, com fallback para a porta 3000 se ela não existir.
04 · Exemplo de código
Depois que o Claude gerar o server.js, procure este padrão central. Socket.io não conecta direto à instância do Express — ele precisa do objeto HTTP server bruto.
Padrão de integração 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);
Repare nas três camadas: Express (app) cuida das requisições HTTP e serve os arquivos. O HTTP server (httpServer) envolve o Express. O Socket.io (io) envolve o HTTP server para interceptar as requisições de upgrade de WebSocket. Por isso o Socket.io precisa do HTTP server bruto — ele precisa pegar o header 'Upgrade: websocket' antes que o Express veja.
05 · Prática real
Crie uma página de teste mínima para verificar se a conexão funciona.
06 · Preencher
O Socket.io precisa do objeto HTTP _____ bruto, não apenas da instância do Express, porque precisa lidar com o handshake de upgrade do WebSocket.
07 · Quiz
O que o npm install express socket.io adiciona ao seu projeto?
- Duas linguagens de programação para construir o jogo
- Um banco de dados e uma camada de cache
- Um framework de front-end e uma biblioteca CSS
- Um framework web (Express) e uma biblioteca de comunicação em tempo real (Socket.io)
Outras lições deste capítulo
⚠ A experiência interativa completa precisa de JavaScript. Ative-o e recarregue a página.
※ Este é um projeto educacional independente — não é um produto oficial da Anthropic. Claude™ é uma marca registrada da Anthropic, PBC.