Как проверить соединение WebSocket: практический чек-лист

Короткий ответ: WebSocket-соединение проверяют по цепочке: правильный адрес, событие open, отправка тестового ping, получение ответа в message, состояние readyState, вкладка Network -> WS в DevTools и серверные логи. Не начинайте с бизнес-логики, сначала убедитесь, что канал вообще открыт

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

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

socket.addEventListener("open", () => {
  console.log("OPEN");
  socket.send(JSON.stringify({ type: "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, соединение установлено. Если после ping приходит MESSAGE, обмен работает

Проверьте readyState

console.log(socket.readyState);

Значения:

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

Если состояние 3, сокет закрыт. Если 0 висит слишком долго, сервер не отвечает или подключение блокируется

DevTools Network

Откройте DevTools:

Network -> WS

Проверьте:

• появился ли WebSocket-запрос;
• какие сообщения отправлены;
• какие сообщения получены;
• не закрылось ли соединение сразу;
• какой close code.

Если WebSocket-запроса нет, возможно, код вообще не выполняется

Проверьте ws и wss

Если страница открыта по HTTPS, используйте:

wss://example.com/ws

а не:

ws://example.com/ws

Mixed content — частая причина, почему локально все работает, а на сайте нет

Проверьте сервер

На сервере должны быть логи подключения и сообщения. Минимально:

wss.on("connection", (socket) => {
  console.log("client connected");

  socket.on("message", (message) => {
    console.log("message:", message.toString());
    socket.send(JSON.stringify({ type: "pong" }));
  });
});

Если браузер пишет OPEN, но сервер не логирует сообщения, смотрите endpoint, reverse proxy и формат отправки

Проверка через отдельный тестовый клиент

Если браузерное приложение большое, временно уберите его из диагностики. Подключитесь простым отдельным клиентом или минимальной HTML-страницей. Цель — понять, проблема в WebSocket-сервере или в вашем приложении

Минимальный HTML:

<button id="send">Ping</button>
<pre id="log"></pre>
<script>
  const log = (text) => document.querySelector("#log").textContent += text + "\n";
  const socket = new WebSocket("ws://localhost:8080");

  socket.onopen = () => log("open");
  socket.onmessage = (event) => log("message: " + event.data);
  socket.onclose = () => log("close");
  socket.onerror = () => log("error");

  document.querySelector("#send").onclick = () => socket.send("ping");
</script>

Если этот файл работает, а основное приложение нет, ищите ошибку в коде приложения, авторизации или адрес

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

Первая ошибка — подключаться к обычному HTTP endpoint, а не к WebSocket endpoint

Вторая ошибка — отправлять сообщение до события open

Третья ошибка — забыть Upgrade-заголовки в Nginx или другом proxy

Четвертая ошибка — проверять только браузер и не смотреть серверные логи

Пятая ошибка — не различать error и close. В браузере событие error часто не дает подробностей, а полезнее смотреть Console, Network и сервер

Шестая ошибка — тестировать только успешный сценарий. Обязательно проверьте выключенный сервер, неправильный адрес и закрытие вкладки

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

Сделайте ping/pong. Потом остановите сервер и убедитесь, что клиент получает закрытие или ошибку. Затем запустите сервер снова и проверьте, нужна ли вашему приложению логика reconnect

Быстрый порядок диагностики

Если времени мало, идите строго так:

1. Сервер запущен?
2. адрес точно WebSocket endpoint?
3. ws и wss соответствуют странице?
4. open срабатывает?
5. ping уходит?
6. pong приходит?
7. close code понятен?
8. proxy пропускает Upgrade?

Такой порядок экономит время: вы не чините авторизацию, JSON и frontend-state, пока не доказали, что базовое соединение вообще работает

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

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

• WebSocket test online: как проверить соединение
• WebSocket test: как проверить соединение и сообщения
• OBS WebSocket скачать: как установить плагин и проверить подключение
• OBS WebSocket: как подключить и проверить управление OBS