WebSocket: что это, как работает и как запустить первый прим

Короткий ответ: WebSocket — это протокол и браузерный API для постоянного двустороннего соединения между клиентом и сервером. Обычный HTTP-запрос работает по схеме “клиент спросил — сервер ответил”. WebSocket после начального подключения оставляет канал открытым, и обе стороны могут отправлять сообщения в любой момент

WebSocket нужен для чатов, уведомлений, онлайн-игр, биржевых графиков, совместного редактирования, live-дашбордов и любых интерфейсов, где данные должны приходить без постоянного опроса сервера

Содержание

Минимальный клиент в браузере
Минимальный сервер на Node.js
Чем WebSocket отличается от HTTP
ws и wss
Частые ошибки
Самопроверка
Что почитать дальше по WebSocket

Минимальный клиент в браузере

В браузере клиент создается так:

const socket = new WebSocket("ws://localhost:8080");

socket.addEventListener("open", () => {
  console.log("Соединение открыто");
  socket.send("Привет, сервер");
});

socket.addEventListener("message", (event) => {
  console.log("Ответ сервера:", event.data);
});

socket.addEventListener("close", () => {
  console.log("Соединение закрыто");
});

socket.addEventListener("error", () => {
  console.log("Ошибка WebSocket");
});

Важный момент: отправлять данные нужно после события open. Если вызвать socket.send() сразу после new WebSocket(...), соединение может еще не успеть открыться

Минимальный сервер на Node.js

Для локальной проверки можно использовать пакет ws:

mkdir websocket-demo
cd websocket-demo
npm init -y
npm install ws

Создайте server.js:

const { WebSocketServer } = require("ws");

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

wss.on("connection", (socket) => {
  console.log("Клиент подключился");

  socket.on("message", (message) => {
    console.log("Получено:", message.toString());
    socket.send(`Сервер получил: ${message}`);
  });

  socket.on("close", () => {
    console.log("Клиент отключился");
  });
});

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

Запустите:

node server.js

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

Чем WebSocket отличается от HTTP

HTTP отлично подходит для страниц, API-запросов, форм и загрузки данных по требованию. Но если сервер должен сам присылать новые события, у HTTP появляются обходные схемы: polling, long polling или Server-Sent Events

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

ws и wss

ws:// используется для обычного незашифрованного соединения, обычно в локальной разработке

wss:// используется для защищенного соединения поверх TLS. На публичном сайте, который работает через HTTPS, WebSocket тоже должен идти через wss://. Иначе браузер может заблокировать подключение как небезопасное

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

Ошибка WebSocket connection failed часто означает, что сервер не запущен, порт не совпадает или адрес указан неверно

Ошибка mixed content возникает, когда страница открыта по HTTPS, а WebSocket подключается по ws://. Для продакшена используйте wss://

Если сообщения не отправляются, проверьте readyState. Отправлять можно только при WebSocket.OPEN

Если сервер получает бинарные данные или Buffer, преобразуйте сообщение в строку: message.toString()

Самопроверка

Поменяйте клиентский код так, чтобы он отправлял JSON:

socket.send(JSON.stringify({ type: "ping", payload: "hello" }));

На сервере распарсьте сообщение:

const data = JSON.parse(message.toString());
socket.send(JSON.stringify({ type: "pong", received: data }));

Если браузер получает pong, значит вы сделали полноценный обмен структурированными сообщениями

Что почитать дальше по WebSocket

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

WebSocket: что это, как работает и как запустить первый пример