Закрытие 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-сокета может вызывать задержки и необходимость в переподключении. Будьте к этому готовы.
Полезные материалы
- WebSocket – Веб-API | MDN – Основные сведения о WebSocket от MDN.
- Введение в WebSockets – основная информация на сайте web.dev – Все о базовых принципах работы с WebSocket.
- Стандарты WebSockets – Информация для соответствия стандартам WebSocket API от WHATWG.
- HTML5 – WebSockets – Практические примеры использования WebSockets.
- Web Sockets | Can I use... – Информация о поддержке WebSockets в различных браузерах.
- GitHub – facundofarias/awesome-websockets – Подборка лучших библиотек WebSocket и ресурсов.
- WebSocket API и протокол: принципы работы, применение и многое другое — Подробное руководство по WebSocket.