0Pricing
Node.js Backend Development Bootcamp · Aula

Implementação de Socket.IO no Node.js

Integre Socket.IO na sua aplicação Express para permitir comunicação bidirecional baseada em eventos.

Implementação de Socket.IO no Node.js é uma aula grátis de Node.js Backend Development Bootcamp no CoddyKit. Esta é a aula 3 de 6. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Node.js Backend Development Bootcamp, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Node.js Backend Development Bootcamp inclui 6 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Meet Socket.IO

In the previous lesson, we learned about WebSockets for real-time communication. While powerful, raw WebSockets can be complex to manage, especially with connection stability and fallback options.

This is where Socket.IO comes in! It's a library that enables real-time, bi-directional, and event-based communication between web clients and servers. It works on every platform, browser, and device, ensuring reliable connections.

  • Abstraction: Simplifies WebSocket API.
  • Reliability: Handles disconnections and re-connections.
  • Fallback: Uses HTTP long-polling if WebSockets aren't available.
  • Broadcasting: Easily send messages to multiple clients.

Project Setup

First, let's prepare our project. We'll need Node.js and npm installed. Open your terminal and create a new project folder.

Inside your new folder, initialize a Node.js project and then install the necessary packages: express for our web server and socket.io for real-time communication.

  • npm init -y
  • npm install express socket.io

Our Base: Express Server

Before integrating Socket.IO, let's set up a basic Express server. This server will handle our HTTP requests and also serve as the foundation for our real-time communication.

Create a file named server.js and add the following code. This sets up an Express app that listens on port 3000.

const express = require('express');
const http = require('http'); // Needed for Socket.IO

const app = express();
const server = http.createServer(app); // Create HTTP server
const PORT = 3000;

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Attach Socket.IO

Now, let's attach Socket.IO to our existing Express HTTP server. This allows Socket.IO to listen for WebSocket connections on the same port as our web server.

We import the socket.io library and pass our http server instance to it. This creates a Socket.IO server instance, conventionally named io.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io'); // Import Server class

const app = express();
const server = http.createServer(app);
const io = new Server(server); // Attach Socket.IO to HTTP server

const PORT = 3000;

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Client Connection Events

The most fundamental event in Socket.IO is 'connection'. This event fires every time a new client successfully connects to the Socket.IO server.

Inside this event listener, you get a socket object, which represents the individual client. You can then listen for specific events from that client or send messages directly to it.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

// Listen for incoming connections
io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);

  // Listen for disconnection
  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Server Emits Events

The server can send (or 'emit') custom events to clients. To send a message to a specific client who just connected, we use socket.emit().

This method takes an event name (e.g., 'welcome') and any data you want to send along with it. The client will then listen for this specific event.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  
  // Send a 'welcome' event to the newly connected client
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Server Receives Events

Just as the server can emit events, it can also listen for events sent from clients. We use socket.on() for this, similar to how we listened for 'connection'.

When a client sends an event with a specific name, the corresponding server-side listener will execute, receiving any data the client sent.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);

  // Listen for a 'clientMessage' event from this specific client
  socket.on('clientMessage', (message) => {
    console.log(`Message from ${socket.id}: ${message}`);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Client-Side Interaction

To connect to our Socket.IO server, the client needs the Socket.IO client library. You can include it via a CDN or npm.

This HTML snippet shows a basic client that connects, listens for the 'welcome' event, and sends a 'clientMessage' event to the server. Save this as index.html.

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO Client</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <h1>Socket.IO Client</h1>
  <p id="status">Connecting...</p>
  <button onclick="sendMessage()">Send Hello</button>
  <ul id="messages"></ul>

  <script>
    const socket = io('http://localhost:3000'); // Connect to your server

    socket.on('connect', () => {
      document.getElementById('status').innerText = 'Connected to server!';
      console.log('Connected to server!');
    });

    socket.on('welcome', (msg) => {
      const item = document.createElement('li');
      item.innerText = `Server: ${msg}`;
      document.getElementById('messages').appendChild(item);
      console.log('Received from server:', msg);
    });

    socket.on('disconnect', () => {
      document.getElementById('status').innerText = 'Disconnected.';
      console.log('Disconnected from server.');
    });

    function sendMessage() {
      const msg = 'Hello from client!';
      socket.emit('clientMessage', msg);
      const item = document.createElement('li');
      item.innerText = `Client: ${msg}`;
      document.getElementById('messages').appendChild(item);
    }
  </script>
</body>
</html>

Broadcasting Messages

Often, you need to send a message to *all* connected clients, not just the one that triggered an event. This is called broadcasting.

Instead of socket.emit(), which sends to a specific socket, we use io.emit() to send to everyone connected to the Socket.IO server.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);
  
  // Broadcast to all clients (except the sender) when a new user connects
  socket.broadcast.emit('user joined', `User ${socket.id} joined.`);

  socket.on('clientMessage', (message) => {
    console.log(`Message from ${socket.id}: ${message}`);
    // Broadcast the message to ALL connected clients
    io.emit('serverMessage', `[${socket.id}] ${message}`); 
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
    // Broadcast to all clients when a user disconnects
    io.emit('user left', `User ${socket.id} left.`);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Quick Check: Event Scope

You've seen how to send messages using both socket.emit() and io.emit(). Which method would you use to send a message to *all* connected clients?

Recap: Socket.IO Integration

Excellent work! In this lesson, you've learned to integrate Socket.IO into your Node.js Express application, enabling powerful real-time features.

  • Setup: Installed express and socket.io.
  • Server: Attached Socket.IO to an existing HTTP server.
  • Connections: Handled client 'connection' and 'disconnect' events.
  • Communication: Used socket.emit() to send to specific clients and io.emit() for broadcasting to all clients.
  • Listeners: Set up socket.on() to receive custom events from clients.

You now have the foundation to build interactive, real-time applications!

Perguntas Frequentes

A aula “Implementação de Socket.IO no Node.js” é grátis?

Sim — o texto completo de “Implementação de Socket.IO no Node.js” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Node.js Backend Development Bootcamp, atualize para CoddyKit PRO. O curso de Node.js Backend Development Bootcamp inclui 6 aulas no total.

O que vou aprender em “Implementação de Socket.IO no Node.js”?

Integre Socket.IO na sua aplicação Express para permitir comunicação bidirecional baseada em eventos. Você pratica Node.js Backend Development Bootcamp com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Node.js Backend Development Bootcamp?

Nenhuma experiência prévia é necessária. Node.js Backend Development Bootcamp no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 6.

Quanto tempo leva a aula “Implementação de Socket.IO no Node.js”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Node.js Backend Development Bootcamp?

Sim. Cada aula de Node.js Backend Development Bootcamp inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Introdução aos WebSockets
  2. WebSockets com NestJS
  3. Implementação de Socket.IO no Node.js
  4. Configuração de Gateways
  5. Criação de uma Aplicação de Conversação em Tempo Real
  6. Aplicação de Chat em Tempo Real
← Voltar para Node.js Backend Development Bootcamp