Как сделать чат на WebSocket на JavaScript: сообщения без перезагрузки

WebSocket держит соединение открытым, поэтому сервер может отправить новое сообщение браузеру сразу, без очередного HTTP-запроса и перезагрузки. Мы поднимем сервер на Node.js, подключим две вкладки и увидим, как один JSON-пакет появляется у всех клиентов. Заодно добавим индикатор соединения, проверку входа и безопасный вывод текста.

Обычный fetch похож на вопрос и ответ: браузер обращается к серверу, получает данные и завершает запрос. Для чата нужно другое поведение. Пользователь не знает, когда собеседник напишет, поэтому серверу нужен открытый канал в обе стороны. WebSocket начинается с HTTP upgrade, затем соединение остаётся активным и передаёт сообщения небольшими фреймами.

Чем WebSocket отличается от обычного fetch

Сервер запускает WebSocketServer на порту 8080. При connection он отправляет системное сообщение только новому клиенту. Когда приходит message, сервер ограничивает размер, разбирает JSON, проверяет name и text, добавляет время и рассылает объект всем sockets со статусом OPEN.

У проекта есть один главный маршрут: получить входные данные, проверить их, выполнить действие и показать результат. Если каждый этап можно проверить отдельно, ошибка перестаёт быть загадкой.

От входных данных до видимого результата. Открытый канал работает в обе стороны

Пишем сервер и браузерный клиент

Создайте каталог, выполните npm init -y и npm install ws. Сохраните server.mjs и запустите node server.mjs. HTML отдавайте отдельным локальным сервером, например npx serve .. Откройте адрес в двух вкладках. В браузере используется встроенный WebSocket; пакет ws импортируется только в server.mjs.

import WebSocket, { WebSocketServer } from "ws";

const wss = new WebSocketServer({ port: 8080 });

function broadcast(payload) {
  const json = JSON.stringify(payload);
  for (const client of wss.clients) {
    if (client.readyState === WebSocket.OPEN) client.send(json);
  }
}

wss.on("connection", (socket) => {
  socket.send(JSON.stringify({ type: "system", text: "Соединение установлено" }));

  socket.on("message", (raw) => {
    try {
      if (raw.length > 4_000) throw new Error("Слишком длинное сообщение");
      const input = JSON.parse(raw.toString());
      const name = String(input.name ?? "Гость").trim().slice(0, 30);
      const text = String(input.text ?? "").trim().slice(0, 500);
      if (!text) return;
      broadcast({ type: "chat", name: name || "Гость", text, at: Date.now() });
    } catch {
      socket.send(JSON.stringify({ type: "error", text: "Неверный формат сообщения" }));
    }
  });
});

console.log("WebSocket: ws://localhost:8080");

Сервер не доверяет JSON только потому, что его отправил наш интерфейс. Любой клиент может подключиться вручную, поэтому длина и типы проверяются до broadcast.

Что отличает устойчивый проект от случайного успеха. Каждый пакет проверяется до рассылки

Что происходит с одним сообщением

После события open обе стороны могут отправлять данные в любой момент. socket.send не является HTTP POST и не создаёт новый запрос. Сервер хранит набор активных wss.clients. Broadcast проходит по нему и отправляет пакет только соединениям WebSocket.OPEN. Порядок сообщений внутри одного соединения сохраняется, но глобальная история нигде не хранится.

У соединения есть состояния CONNECTING, OPEN, CLOSING и CLOSED. Нельзя отправлять форму до OPEN, поэтому кнопка сначала disabled. Для нестабильной сети добавьте переподключение с растущей задержкой, но не запускайте бесконечный цикл каждую миллисекунду. Ping/pong помогает обнаруживать мёртвые соединения на сервере.

Проверяем две вкладки и разрыв соединения

Откройте две вкладки с разными именами и отправьте по два сообщения. Затем введите строку Привет: она должна отображаться с угловыми скобками, а не жирным HTML. Остановите сервер и проверьте статус. Запустите снова: в базовом варианте вкладка сама не подключится, поэтому добавьте кнопку «Переподключиться» или функцию reconnect с ограниченным числом попыток.

Чат становится понятным, когда вы видите жизненный цикл соединения, а не только летящие сообщения. Open разрешает отправку, message приносит данные, close требует реакции, а сервер проверяет каждый пакет.

Четыре проверки перед следующим шагом. Close и неверный JSON являются обычными сценариями

Готовим чат к реальному использованию

Для следующей версии добавьте комнаты и имя пользователя, но не доверяйте им из JSON. Сессию нужно проверять на сервере. Историю сообщений храните отдельно и выдавайте с пагинацией. Добавьте ping/pong, ограничение частоты и логирование технических событий без полного текста приватных сообщений.

Как изучить тему в Кодике

В Кодике сначала закрепите события, JSON и работу с DOM. Затем сделайте эхо через один WebSocket. Только после этого добавляйте broadcast и две вкладки. Такой порядок отделяет сеть от интерфейса.

Не пытайтесь запомнить весь API. В тренажёре Кодика сначала воспроизведите чистую логику без библиотеки, затем восстановите подключение и обработку ошибок. Финальный тест: объяснить проект по памяти и добавить одну свою функцию.

Что получится в итоге

Две вкладки держат открытые соединения, сервер проверяет один JSON-пакет и мгновенно рассылает безопасный текст всем подключённым клиентам.