WebSocket test: как проверить соединение и сообщения

Короткий ответ: websocket test — это проверка, что клиент реально подключается к WebSocket-серверу, событие open срабатывает, сообщение уходит через send, ответ приходит в message, а закрытие фиксируется в close. Начинайте не со сложного приложения, а с маленького ping/pong-теста

Содержание

Самый простой тест в браузере
Локальный сервер для проверки
Что смотреть в Network
Проверка readyState
Тест JSON-сообщений
Частые ошибки
Чек-лист тестирования
Что почитать дальше по WebSocket

Самый простой тест в браузере

Если у вас уже есть WebSocket-сервер, откройте DevTools в браузере и выполните:

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

socket.addEventListener("open", () => {
  console.log("OPEN");
  socket.send("ping");
});

socket.addEventListener("message", (event) => {
  console.log("MESSAGE:", event.data);
});

socket.addEventListener("close", (event) => {
  console.log("CLOSE:", event.code, event.reason);
});

socket.addEventListener("error", () => {
  console.log("ERROR");
});

Рабочий минимум: вы должны увидеть OPEN, затем MESSAGE. Если есть только ERROR или сразу CLOSE, значит проблема в адресе, сервере, протоколе или доступе

Локальный сервер для проверки

Если сервера нет, поднимите тестовый:

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

server.js:

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

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

wss.on("connection", (socket) => {
  socket.on("message", (message) => {
    const text = message.toString();
    socket.send(`pong: ${text}`);
  });
});

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

Запуск:

node server.js

Теперь браузерный тест должен получить ответ pong: ping

Что смотреть в Network

В DevTools откройте Network и найдите WebSocket-соединение. В браузерах обычно есть фильтр WS. Там можно проверить:

статус подключения;
отправленные сообщения;
полученные сообщения;
close code;
время жизни соединения.

Если соединение не появляется в Network, клиентский код может вообще не выполняться. Если появляется и сразу закрывается, смотрите close code и серверные логи

Проверка readyState

У WebSocket есть состояния:

console.log(socket.readyState);

Основные значения:

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

Для отправки нужно состояние OPEN. Поэтому безопасная функция выглядит так:

function sendSafe(socket, data) {
  if (socket.readyState !== WebSocket.OPEN) {
    console.log("Сокет еще не открыт или уже закрыт");
    return;
  }

  socket.send(JSON.stringify(data));
}

Тест JSON-сообщений

В реальном приложении лучше проверять не только строки, но и структуру сообщения:

socket.addEventListener("open", () => {
  socket.send(JSON.stringify({
    type: "ping",
    requestId: crypto.randomUUID(),
    payload: { time: Date.now() },
  }));
});

На сервере:

socket.on("message", (message) => {
  const data = JSON.parse(message.toString());

  socket.send(JSON.stringify({
    type: "pong",
    requestId: data.requestId,
    ok: true,
  }));
});

Такой тест сразу показывает, умеет ли сервер читать JSON, сохранять requestId и отвечать в ожидаемом формате

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

ws:// на HTTPS-странице часто ломается из-за mixed content. Для публичного сайта нужен wss://

Если тест работает локально, но не работает на сервере, проверьте reverse proxy. Nginx или другой прокси должен поддерживать Upgrade-заголовки для WebSocket

Если send вызывается до open, сообщение может не уйти. Отправляйте первый ping внутри обработчика open

Если в браузере виден CLOSED, а сервер ничего не логирует, проверьте адрес и порт. Возможно, вы подключаетесь не к WebSocket endpoint, а к обычному HTTP API

Чек-лист тестирования

Проверяйте по порядку:

сервер запущен;
адрес начинается с ws:// или wss://;
событие open сработало;
клиент отправил ping;
сервер залогировал сообщение;
клиент получил pong;
закрытие соединения обрабатывается без зависших таймеров.

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

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