0Pricing
Node.js Backend Development Bootcamp · Leçon

Créer une application de discussion en temps réel

Développez une application de discussion en temps réel pleinement fonctionnelle afin de consolider votre compréhension des WebSockets et de Socket.IO.

Créer une application de discussion en temps réel est une leçon Node.js Backend Development Bootcamp gratuite sur CoddyKit. Ceci est la leçon 5 sur 6. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Node.js Backend Development Bootcamp, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Node.js Backend Development Bootcamp comprend 6 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Build a Real-time Chat App

Welcome! In this lesson, we'll bring together your knowledge of WebSockets and Socket.IO to build a practical real-time chat application.

This hands-on project will solidify your understanding of how clients and servers communicate instantly, making live interactions possible.

Server Setup: Express & Socket.IO

First, let's set up our Node.js server using Express and integrate Socket.IO. This foundation will handle our HTTP requests for serving the HTML page and establish real-time WebSocket connections.

Remember to install dependencies: npm install express socket.io

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

// Serve our HTML file
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// Listen for new Socket.IO connections
io.on('connection', (socket) => {
  console.log('A user connected');
});

// Start the server
server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Handling User Connections

When a client successfully connects to our Socket.IO server, a 'connection' event is emitted. Similarly, when a client closes their browser or loses connection, a 'disconnect' event occurs.

These events allow us to track who is currently online.

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

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('A user connected');

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

server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Broadcasting Chat Messages

For a chat application, when one user sends a message, it needs to be seen by all other connected users. We achieve this by listening for a 'chat message' event from a client and then using io.emit() to broadcast it to everyone.

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

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('A user connected');

  // Listen for 'chat message' from this client
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg); // Broadcast to all connected clients
  });

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

server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Client-Side HTML Structure

Now, let's create a simple index.html file. This will be the user interface for our chat application. It needs an input field to type messages and a list (<ul>) to display them.

Crucially, include the Socket.IO client library script via /socket.io/socket.io.js!

<!DOCTYPE html>
<html>
  <head>
    <title>CoddyKit Chat</title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: sans-serif; }
      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
      #input:focus { outline: none; }
      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages > li { padding: 0.5rem 1rem; }
      #messages > li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <!-- Client-side JavaScript will go here -->
  </body>
</html>

Client: Sending & Receiving Messages

Now, we add JavaScript to our index.html. This script will:

  • Connect to the Socket.IO server.
  • Emit a 'chat message' event when the form is submitted.
  • Listen for incoming 'chat message' events and display them.

The io() function automatically connects to the server where the script is served from.

<!-- ... (inside index.html, before </body>) ... -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io(); // Connect to the Socket.IO server

      const form = document.getElementById('form');
      const input = document.getElementById('input');
      const messages = document.getElementById('messages');

      // Send message when form is submitted
      form.addEventListener('submit', (e) => {
        e.preventDefault(); // Prevent page reload
        if (input.value) {
          socket.emit('chat message', input.value); // Emit event to server
          input.value = ''; // Clear input field
        }
      });

      // Listen for incoming messages and display them
      socket.on('chat message', (msg) => {
        const item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
  </body>
</html>

Adding User Nicknames (Server)

To make the chat more personal, let's add user nicknames. On the server, we can store a nickname for each connected socket. We'll introduce a new event, 'set nickname', for clients to send their chosen name.

This nickname will then be included with their messages.

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

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  let nickname = 'Anonymous'; // Default nickname for new connections

  socket.on('set nickname', (name) => {
    nickname = name;
    console.log(`${nickname} connected`);
    io.emit('chat message', `${nickname} joined the chat`);
  });

  socket.on('chat message', (msg) => {
    io.emit('chat message', `${nickname}: ${msg}`); // Prepend nickname to message
  });

  socket.on('disconnect', () => {
    console.log(`${nickname} disconnected`);
    io.emit('chat message', `${nickname} left the chat`);
  });
});

server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Client: Setting & Displaying Nicknames

On the client side, we need to ask the user for a nickname when they first connect and then emit this to the server using our new 'set nickname' event. We'll also update the client-side display to show messages with the sender's nickname.

<!-- ... (inside index.html, before </body>) ... -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      const form = document.getElementById('form');
      const input = document.getElementById('input');
      const messages = document.getElementById('messages');

      // Prompt for nickname on connection
      let nickname = prompt('Please enter your nickname:');
      if (!nickname) nickname = 'Guest' + Math.floor(Math.random() * 1000);
      socket.emit('set nickname', nickname); // Send nickname to server

      form.addEventListener('submit', (e) => {
        e.preventDefault();
        if (input.value) {
          socket.emit('chat message', input.value);
          input.value = '';
        }
      });

      socket.on('chat message', (msg) => {
        const item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
  </body>
</html>

Tracking Online Users (Bonus)

To enhance our chat, let's add a feature to display who is currently online. The server can maintain a Set of active nicknames and broadcast this list whenever a user connects or disconnects.

Clients will listen for an 'online users' event to update their UI.

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

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

const onlineUsers = new Set(); // Store nicknames

io.on('connection', (socket) => {
  let nickname = 'Anonymous';

  socket.on('set nickname', (name) => {
    nickname = name;
    onlineUsers.add(nickname);
    io.emit('chat message', `${nickname} joined the chat`);
    io.emit('online users', Array.from(onlineUsers)); // Broadcast updated user list
  });

  socket.on('chat message', (msg) => {
    io.emit('chat message', `${nickname}: ${msg}`);
  });

  socket.on('disconnect', () => {
    onlineUsers.delete(nickname);
    io.emit('chat message', `${nickname} left the chat`);
    io.emit('online users', Array.from(onlineUsers)); // Broadcast updated user list
  });
});

server.listen(3000, () => {
  console.log('Listening on *:3000');
});

Chat App Workflow Check

Consider the complete flow of a message in our Socket.IO chat application, from one client sending it to all other clients receiving it.

Which of the following steps are essential for this real-time communication to occur?

Recap: Building a Chat App

Congratulations! You've successfully built a functional real-time chat application using Node.js, Express, and Socket.IO.

  • We set up the server to handle WebSocket connections and HTTP requests.
  • We implemented broadcasting to send messages to all connected users instantly.
  • We created a client-side interface to send and receive messages dynamically.
  • We enhanced the chat with user nicknames and real-time online user tracking.

This project demonstrates the power of WebSockets and Socket.IO for creating interactive, live experiences.

Questions Fréquemment Posées

La leçon « Créer une application de discussion en temps réel » est-elle gratuite ?

Oui — le texte complet de « Créer une application de discussion en temps réel » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Node.js Backend Development Bootcamp, passe à CoddyKit PRO. Le cours Node.js Backend Development Bootcamp comprend 6 leçons au total.

Qu'est-ce que j'apprendrai dans « Créer une application de discussion en temps réel » ?

Développez une application de discussion en temps réel pleinement fonctionnelle afin de consolider votre compréhension des WebSockets et de Socket.IO. Tu pratiques Node.js Backend Development Bootcamp avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Node.js Backend Development Bootcamp ?

Aucune expérience préalable n'est requise. Node.js Backend Development Bootcamp sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 5 sur 6.

Combien de temps prend la leçon « Créer une application de discussion en temps réel » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Node.js Backend Development Bootcamp ?

Oui. Chaque leçon Node.js Backend Development Bootcamp inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Introduction aux WebSockets
  2. WebSockets avec NestJS
  3. Implémenter Socket.IO dans Node.js
  4. Configuration des passerelles
  5. Créer une application de discussion en temps réel
  6. Application de discussion en temps réel
← Retour à Node.js Backend Development Bootcamp