Как создать чат-приложение на Node.js: Express и Socket.IO

Короткий ответ: для учебного чата на Node.js проще всего взять Express и Socket.IO. Express отдаст HTML-страницу, а Socket.IO будет держать постоянное соединение между браузером и сервером, чтобы сообщения появлялись без обновления страницы

Запрос «как создать чат-приложение на node.js» обычно означает не корпоративный мессенджер, а первый понятный пример real-time приложения. Поэтому начнем с минимальной версии: одно поле ввода, кнопка отправки, список сообщений и проверка в двух вкладках браузера

Содержание

Создайте проект
Сервер чата
HTML-страница
Запустите и проверьте
Что здесь происходит
Как добавить имя пользователя
Мини-практика
Частые ошибки
Что почитать дальше по Node.js

Создайте проект

mkdir node-chat-demo
cd node-chat-demo
npm init -y
npm install express socket.io

Создайте структуру

node-chat-demo/
  server.js
  public/
    index.html

Сервер чата

Файл server.js

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

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

app.use(express.static(path.join(__dirname, "public")));

io.on("connection", (socket) => {
  console.log("Пользователь подключился");

  socket.on("chat message", (message) => {
    io.emit("chat message", message);
  });

  socket.on("disconnect", () => {
    console.log("Пользователь отключился");
  });
});

server.listen(3000, () => {
  console.log("Чат запущен: http://localhost:3000");
});

Здесь Express отдает страницу, а Socket.IO слушает событие chat message и рассылает сообщение всем подключенным клиентам

HTML-страница

Файл public/index.html

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Чат на Node.js</title>
    <style>
      body { font-family: sans-serif; max-width: 720px; margin: 40px auto; }
      #messages { padding: 0; list-style: none; }
      #messages li { padding: 8px 0; border-bottom: 1px solid #ddd; }
      form { display: flex; gap: 8px; }
      input { flex: 1; padding: 10px; }
      button { padding: 10px 16px; }
    </style>
  </head>
  <body>
    <h1>Чат на Node.js</h1>
    <ul id="messages"></ul>
    <form id="form">
      <input id="input" autocomplete="off" placeholder="Введите сообщение">
      <button>Отправить</button>
    </form>

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

      form.addEventListener("submit", (event) => {
        event.preventDefault();

        if (input.value.trim()) {
          socket.emit("chat message", input.value.trim());
          input.value = "";
        }
      });

      socket.on("chat message", (message) => {
        const item = document.createElement("li");
        item.textContent = message;
        messages.appendChild(item);
      });
    </script>
  </body>
</html>

Запустите и проверьте

node server.js

Откройте две вкладки

http://localhost:3000

Напишите сообщение в одной вкладке. Если оно появилось во второй, чат работает

Что здесь происходит

Обычный HTTP-запрос подходит для страницы, но чат требует постоянной связи. Socket.IO открывает соединение и позволяет серверу отправлять события клиентам в момент, когда сообщение пришло

В примере нет авторизации, комнат, истории сообщений и базы данных. Это нормально: первый чат должен показать механику, а не закрыть все требования продукта

Как добавить имя пользователя

Простой вариант — отправлять объект

socket.emit("chat message", {
  name: "Динар",
  text: input.value.trim()
});

На сервере можно передать объект дальше

socket.on("chat message", (message) => {
  io.emit("chat message", message);
});

А на клиенте выводить message.name и message.text

Мини-практика

Добавьте поле имени пользователя и выводите сообщения в формате Имя: текст. Затем откройте две вкладки с разными именами и проверьте, что сообщения различаются

Следующий шаг — сохранять сообщения в базу, но лучше делать это после того, как real-time часть стала понятной

Частые ошибки

Страница открывается, но сообщения не приходят Проверьте, подключен ли <script src="/socket.io/socket.io.js"></script> и нет ли ошибок в консоли браузера

Событие называется по-разному Если клиент отправляет chat message, сервер должен слушать именно chat message

Используют app.listen вместо server.listen Для Socket.IO в этом примере нужен HTTP-сервер, созданный через http.createServer(app)

Чат работает только в одной вкладке Проверьте, что на сервере используется io.emit, а не только локальное добавление сообщения на клиенте

Что почитать дальше по Node.js

Если нужен общий маршрут по теме, откройте рубрику Node.js. Для соседних задач пригодятся эти разборы: