Как проверить локальный WebSocket-сервер через wss

WebSocket открывает постоянное соединение между браузером и сервером. Пока оно работает, обе стороны могут отправлять сообщения сразу, без нового запроса на каждое действие. Если сервер запущен на 127.0.0.1:8080/ws, из другой сети нельзя обратиться к этому адресу напрямую. DevProxy позволяет вывести локальный HTTP-порт наружу по HTTPS, а браузер откроет на том же адресе защищённый WebSocket через wss.

wss означает WebSocket с TLS. Это тот же протокол обмена сообщениями, но канал между браузером и внешним адресом защищён TLS. Для DevProxy это обычный HTTP-канал, а не отдельный тип туннеля.

Что проверим

Возьмём небольшой сервер, который возвращает каждый полученный текст. Так сразу видно, что соединение открылось и сообщения проходят в обе стороны. Свой сервер тоже подойдёт, но его нужно проверять в его собственном формате. Если приложение ждёт JSON, строка Проверка может не вызвать ожидаемого ответа.

Понадобятся Node.js с npm, браузер, DevProxy и ключ компьютера с назначением «Сайт или API». Порядок установки описан в статье «Как начать пользоваться DevProxy». Публичный TCP-порт не нужен.

Запустите эхо-сервер

Создайте отдельную папку ws-demo. В PowerShell перейдите в неё и выполните:

npm init -y
npm install ws@8.20.1

Сохраните рядом файл server.mjs:

import { WebSocketServer } from 'ws';

const echo = new WebSocketServer({
  host: '127.0.0.1',
  port: 8080,
  path: '/ws',
  maxPayload: 65536
});

echo.on('connection', socket => {
  socket.on('error', console.error);
  socket.on('message', data => socket.send(data.toString()));
});

console.log('Эхо-сервер: ws://127.0.0.1:8080/ws');

Запустите его командой node server.mjs и оставьте терминал открытым. В окне должна появиться строка с адресом. Это тестовый сервер без входа и без доступа к системным командам. Не подключайте к нему настоящие приватные сервисы.

Сохраните страницу проверки

Создайте в той же папке файл test.html. Это обычная страница, которую можно открыть в браузере; вставлять код в консоль разработчика не нужно.

<!doctype html>
<html lang="ru">
<meta charset="utf-8">
<title>Проверка WebSocket</title>
<label for="address">Адрес WebSocket</label>
<input id="address" value="ws://127.0.0.1:8080/ws">
<button id="check" type="button">Проверить</button>
<pre id="log"></pre>
<script>
const address = document.querySelector("#address");
const log = document.querySelector("#log");
let currentSocket = null;

function write(line) {
  log.textContent += line + "\n";
}

document.querySelector("#check").addEventListener("click", () => {
  if (currentSocket) currentSocket.close(1000, "Новая проверка");
  log.textContent = "";
  try {
    const ws = new WebSocket(address.value);
    currentSocket = ws;
    ws.addEventListener("open", () => {
      if (ws !== currentSocket) return;
      write("Соединение открыто");
      ws.send("Проверка");
    });
    ws.addEventListener("message", event => {
      if (ws !== currentSocket) return;
      write("Ответ: " + String(event.data));
      write("Эхо получено; запрашиваю закрытие 1000");
      ws.close(1000);
    });
    ws.addEventListener("error", () => {
      if (ws !== currentSocket) return;
      write("Ошибка соединения");
    });
    ws.addEventListener("close", event => {
      if (ws !== currentSocket) return;
      if (event.code === 1000 && event.wasClean) {
        write("Закрытие подтверждено: 1000, wasClean=true");
      } else {
        write("Закрытие не подтверждено: code=" + event.code + ", wasClean=" + event.wasClean);
      }
      currentSocket = null;
    });
  } catch (error) {
    write("Ошибка адреса: " + error.message);
  }
});
</script>
</html>

Откройте test.html двойным щелчком. Оставьте адрес ws://127.0.0.1:8080/ws и нажмите «Проверить». При работающем эхо-сервере в окне появятся «Соединение открыто», «Ответ: Проверка», «Эхо получено; запрашиваю закрытие 1000» и «Закрытие подтверждено: 1000, wasClean=true». Здесь страница подключается напрямую к Node.js, без DevProxy.

Добавьте канал в DevProxy

Откройте файл настроек клиента. Для нового отдельного файла подойдёт такой YAML:

server: https://control.devtunnels.ru
token: КЛЮЧ_КОМПЬЮТЕРА
reconnect: true
tunnels:
  - name: ws-demo
    kind: http
    local: http://127.0.0.1:8080

В существующем файле добавьте только новый элемент в список tunnels, сохранив остальные разделы и каналы. В поле local указывается обычный HTTP-адрес без ws и без /ws. Путь /ws браузер добавит при подключении, и DevProxy сохранит его в запросе к локальному серверу.

Запустите devproxy start. Если файл лежит в другом месте, используйте:

devproxy start --file "ПОЛНЫЙ_ПУТЬ_К_devproxy.yml"

Если клиент уже обслуживает другие каналы, после правки его нужно перезапустить в удобное время. Каналы этого клиента ненадолго прервутся. Другие программы и серверы на компьютере при этом останавливать не надо.

Подставьте настоящий адрес

Откройте кабинет DevProxy и раздел «Туннели». Скопируйте фактический HTTPS-адрес канала ws-demo. Не придумывайте домен по шаблону: только кабинет показывает имя, которое выдано вашему каналу.

Замените в адресе страницы https:// на wss:// и добавьте реальный путь /ws. Если в кабинете есть адрес https://ИМЯ_ИЗ_КАБИНЕТА, проверочный адрес будет выглядеть так:

wss://ИМЯ_ИЗ_КАБИНЕТА/ws

Вставьте эту строку в поле test.html и нажмите «Проверить». Получение эха и закрытие проверяйте отдельно. Сначала должен появиться «Ответ: Проверка». Это подтверждает обмен сообщением. После него страница запросит закрытие с кодом 1000. Дождитесь строки «Закрытие подтверждено: 1000, wasClean=true»: она показывает, что обе стороны завершили соединение. Полученный ответ и закрытие оценивайте отдельно.

Для страницы, открытой по HTTPS, используйте wss. На localhost браузеры обычно разрешают и ws, но переносить этот адрес на удалённую HTTPS-страницу нельзя.

Запрос к корню сайта может вернуть 404 или 426. Это не доказывает, что WebSocket сломан: проверка должна быть Upgrade-запросом именно на правильном пути. Сообщение нужно отправлять после события open. Вызов send раньше этого события завершится ошибкой.

Проверьте из другой сети

Откройте ту же страницу на другом компьютере или на телефоне с мобильной точкой доступа. Наблюдателю не нужен клиент DevProxy. Должны работать компьютер с вашим сервером, сам эхо-сервер и DevProxy.

Вставьте полный wss-адрес с путём /ws и нажмите «Проверить». Ответ приходит из вашей локальной сети через DevProxy. Сначала убедитесь, что получен «Ответ: Проверка». Затем дождитесь отдельного результата закрытия. Оно подтверждено только при event.code === 1000 && event.wasClean. Если условие не выполнено, закрытие не подтверждено. Код 1006 в таком результате означает обрыв без нормального завершения соединения и не называет точную причину.

TLS защищает соединение с внешним адресом; участок от DevProxy до локального сервера может оставаться ws внутри этого компьютера. Защита внешнего адреса не означает, что зашифрованы все участки пути. При смене Wi-Fi или мобильной сети соединение может оборваться.

Сохранённая страница с диска имеет Origin null. Чужой сервер может отклонить такой источник. Не отключайте проверку Origin и вход рабочего приложения. Если нужен Origin вашей страницы, добавьте его в разрешённые адреса по настройкам приложения. Также не помещайте API-ключи, пароли и долгоживущие токены в адрес тестовой страницы.

Если что-то не получилось

• Корень отвечает 404 или 426. Введите в поле test.html полный адрес с путём /ws, например wss://ИМЯ_ИЗ_КАБИНЕТА/ws, и убедитесь, что сервер слушает этот путь.
• Появляется 502. Убедитесь, что эхо-сервер запущен, слушает 127.0.0.1:8080 и в YAML указан тот же порт.
• Ответ 401 или 403. Проверьте вход, cookies, Origin и формат сообщений вашего приложения. Не отключайте защиту ради проверки.
• Обычное приложение не отвечает на «Проверку». Оно может ждать JSON, подпротокол или другой путь. Проверьте его документацию; эхо-ответ гарантирован только у отдельного демо-сервера.
• Браузер жалуется на сертификат `wss`. Проверьте срок и имя сертификата внешнего адреса. Не обходите предупреждение браузера.

После проверки остановите только эхо-сервер из папки ws-demo. Остальные приложения и каналы оставьте работать. Демо без авторизации подходит для несекретной проверки; рабочий WebSocket сохраняйте за входом и правилами вашего приложения. Если нужен отдельный пример публикации обычного сайта, посмотрите статью «Как показать заказчику сайт с localhost по HTTPS-ссылке».