Закрытие WebSocket корректно: сценарии и эвенты в JS, HTML5

Быстрый ответ

Для корректного закрытия WebSocket воспользуйтесь методом WebSocket.close():

if (ws.readyState === WebSocket.OPEN) {
  ws.close(1000, 'Пришло время закончить работу');
}

ws.onclose = function() {
  ws.onclose = ws.onerror = ws.onopen = ws.onmessage = null;
};

Необходимо проверить состояние readyState и удостовериться, что соединение открыто, прежде чем его закрывать. Также стоит очистить все обработчики событий, чтобы избежать утечки памяти.

Знакомство с протоколом WebSocket

Чтобы правильно разорвать соединение, важно понимать принципы работы протокола WebSocket. При окончании сессии необходимо отправить контрольный фрейм, подтверждающий закрытие — это своего рода ритуал прощания.

В прошлом для этого использовались устаревшие байты 0xFF и 0x00, но сегодня мы применяем современные методы, в частности — финальный фрейм (0x88).

Будьте готовы к неожиданностям

Следите за такими событиями, как beforeunload и unload. Обратите внимание на следующий пример:

window.addEventListener('beforeunload', function() {
  if (ws.readyState === WebSocket.OPEN) {
    ws.onclose = function () {};
    ws.close(1000, 'Браузер закрывается');
  }
});

Не стоит торопиться с переподключением сразу после разрыва соединения.

Лучше предотвратить, чем исправлять

Не пытайтесь закрывать уже закрытый WebSocket. Сделайте вот так:

if (ws.readyState === WebSocket.CLOSING || ws.readyState === WebSocket.CLOSED) {
  console.log("WebSocket уже находится в процессе закрытия или уже закрыт.");
} else {
  ws.close(1000, "Завершаем соединение с элегантностью");
}

Серверная сторона — ого, сколько внимания!

На серверной стороне требуется особое внимание к обработке событий onClose и onError.

Для разработчиков в среде Java EE особенно полезен javax.websocket.Endpoint.

Визуализация

Представьте WebSocket как процесс движения поезда, где важно правильно завершить маршрут:

1. Из браузера посылаем сигнал об окончании связи.
2. Поезд подтверждает получение сигнала.
3. Связь прерывается, поезд приостанавливает движение.

Всегда будьте начеку

Оставайтесь в курсе состояния WebSocket, фиксируйте изменения и перед установлением нового соединения проверяйте готовность.

Особенности поведения браузеров

Будьте готовы к различиям в том, как разные браузеры обрабатывают WebSocket:

window.onbeforeunload = function() {
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.close(1000, "До встречи!");
  }
};

Задержки и переподключения

Порой закрытие TCP-сокета может вызывать задержки и необходимость в переподключении. Будьте к этому готовы.

Полезные материалы

1. WebSocket – Веб-API | MDN – Основные сведения о WebSocket от MDN.
2. Введение в WebSockets – основная информация на сайте web.dev – Все о базовых принципах работы с WebSocket.
3. Стандарты WebSockets – Информация для соответствия стандартам WebSocket API от WHATWG.
4. HTML5 – WebSockets – Практические примеры использования WebSockets.
5. Web Sockets | Can I use... – Информация о поддержке WebSockets в различных браузерах.
6. GitHub – facundofarias/awesome-websockets – Подборка лучших библиотек WebSocket и ресурсов.
7. WebSocket API и протокол: принципы работы, применение и многое другое — Подробное руководство по WebSocket.