WebSocket, приятно познакомиться🫱🏼‍🫲🏻

На днях у нас в проекте возникла проблема.
Был запрос, который очень долго обрабатывался на бэке и в итоге отваливался по таймауту.
Предложение увеличить таймаут для этого запроса - ненадежная история, поэтому начали искать альтернативы.
Решили использовать веб-сокеты!

Короче, протокол веб-сокет обеспечивает возможность обмена данными между браузером и сервером через постоянное соединение.
Данные передаются по нему в обоих направлениях в виде «пакетов», без разрыва и дополнительных HTTP-запросов.
Эта тема хороша для мессенджеров, онлайн-игр, торговых площадок и всего, где нужно постоянное обновление данных.

В итоге решение нашей проблемы:
1. Устанавливаем веб-сокет соединение.
2. Я передаю в сообщении данные, которые отправляла в обычном https запросе
3. Бэк их обрабатывает какое-то время и после обработки отправляет мне сообщение о том, что процесс окончен
4. Я понимаю, что процесс окончен, и дальше работа в обычном режиме с https запросами

То есть теперь вся логика спокойно выполняется на бэке, а я просто жду сообщение об успехе.
Красота🙌🏼

Чтобы создать сокет:
const socket = new WebSocket("wss://наш_урл_для_сокета");

Можно еще просто ws, но лучше конечно шифровать данные, это мы знаем,то же самое как http и https.

Как только объект WebSocket создан, мы слушаем его события:
• open – соединение установлено (здесь же мы можем отправить наши данные на сервер),
• message – получены данные (здесь после получения данных можем вызывать какие-то свои экшены),
• error – ошибка (можно просто вывести уведомление об ошибке),
• close – соединение закрыто

Если мы хотим отправить что-нибудь, то вызываем socket.send(data).
Только data должна быть строкой, так что если изначально это был объект, то не забываем про JSON.stringify().

Веб-сокеты можно так же смотреть в network в devtools, только надо выбрать WS, а не обычный наш fetch.

Вот и всё!
Ничего сложного))
Если есть вопросы - пишите, разберёмся вместе😌
Ну и подкиньте огоньков плиз, если заходит такой познавательный контент🔥