0Pricing
Node.js Backend Development Bootcamp · Урок

Реализация Socket.IO в Node.js

Интегрируйте Socket.IO в приложение Express, чтобы обеспечить двунаправленное взаимодействие на основе событий.

«Реализация Socket.IO в Node.js» — бесплатный урок Node.js Backend Development Bootcamp на CoddyKit. Это урок 3 из 6. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Node.js Backend Development Bootcamp, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Node.js Backend Development Bootcamp содержит 6 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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!

Часто задаваемые вопросы

Урок «Реализация Socket.IO в Node.js» бесплатный?

Да — полный текст урока «Реализация Socket.IO в Node.js» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Node.js Backend Development Bootcamp, подпишись на CoddyKit PRO. Курс Node.js Backend Development Bootcamp содержит 6 уроков всего.

Чему я научусь в уроке «Реализация Socket.IO в Node.js»?

Интегрируйте Socket.IO в приложение Express, чтобы обеспечить двунаправленное взаимодействие на основе событий. Ты практикуешь Node.js Backend Development Bootcamp с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Node.js Backend Development Bootcamp?

Предыдущий опыт не требуется. Node.js Backend Development Bootcamp на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 6.

Сколько времени занимает урок «Реализация Socket.IO в Node.js»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Node.js Backend Development Bootcamp?

Да. Каждый урок Node.js Backend Development Bootcamp включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Введение в WebSockets
  2. WebSockets с NestJS
  3. Реализация Socket.IO в Node.js
  4. Настройка шлюзов
  5. Создание чата в реальном времени
  6. Чат-приложение в реальном времени
← Назад к Node.js Backend Development Bootcamp