Привет Medium, через некоторое время я снова здесь.

В последние дни я изучал Network Socket.
Существует множество различных пакетов npm, которые упрощают и ускоряют его реализацию, например socket.io, ws , веб-сокет и т. д.

Но основная информация и примеры в Интернете используют их, так что, если мы хотим понять больше, чем просто готовые абстракции. Как и почему это работает?

Это определенно непростая задача, несколько часов поиска и все примеры Vanilla JS не были достаточно понятны… Почему алгоритм такой сложный, почему он так написан, откуда информация?

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

Поэтому я решил уделить больше времени и еще больше узнать о сетевых протоколах, особенно из официальных документов TCP (протокол управления передачей) и WebSocket.

Несколько часов спустя я наконец получил четкую информацию и действительно понял, как должен вести себя код, и я горжусь тем, что делюсь ею со всеми вами. Надеюсь быть достаточно ясным и помочь другим любопытным умам.

Проверьте проект GitHub: https://github.com/gustavograeff/vanilla-js-web-socket.

Я объясню некоторые важные части, разделив код:

getValidHandShakeKey создает хэш sha1, необходимый для проверки связи.

writeSocketValidUpgrade создает и записывает правильные заголовки, необходимые протоколу WebSocket.

sendClientDataFrame создает буфер и записывает его в WebSocket, отправляя эти данные всем клиентам, которые прослушивают соединение.

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

Это все, ребята, я очень надеюсь, что вам всем очень понравятся эти советы, и не стесняйтесь задавать любые вопросы/предложения в комментариях ниже.
До скорой встречи!