Что такое WebSocket

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

Простыми словами, Вебсокет — это технология, которая позволяет устанавливать постоянное соединение между клиентом и сервером, так что они могут обмениваться данными в реальном времени.

А теперь перейдем к самому определению и к тому, как технология работает

Вебсокет (WebSocket) — это протокол, который позволяет устанавливать постоянное двустороннее соединение между клиентом (например, браузером) и сервером. В отличие от традиционных HTTP-запросов, где клиент каждый раз отправляет запрос, а сервер отвечает на него, вебсокет позволяет обмениваться данными в реальном времени, не прерывая соединение.

Суть вебсокета в том, что после установления соединения оно остается открытым, и сервер может отправлять данные клиенту без того, чтобы тот запрашивал их каждый раз. Это делает вебсокет полезным для приложений, где важен моментальный обмен данными, например, в чатах, онлайн-играх или сервисах с реальным временем, таких как биржи.

Основные особенности вебсокетов

Двусторонний обмен данными

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

Малые задержки

так как соединение постоянное, обмен данными происходит почти без задержек.

Эффективность

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

Процесс работы с вебсокетом

Клиент инициирует запрос на установление соединения.
Сервер отвечает и, если всё в порядке, устанавливается постоянное соединение.
После этого клиент и сервер могут обмениваться данными, пока соединение не будет закрыто.

Формат передачи данных

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

Запрос на установление соединения

Когда вы открываете чат, ваш браузер отправляет на сервер запрос на установление соединения по протоколу WebSocket.
Изначально этот запрос выглядит как обычный HTTP-запрос, но содержит специальные заголовки, которые сообщают серверу о необходимости перейти на WebSocket. Например, один из таких заголовков — Upgrade: websocket.

Ответ от сервера

Сервер, если он поддерживает WebSocket, отвечает с подтверждением установления соединения. Это также выглядит как HTTP-ответ, но с дополнительным заголовком Upgrade: websocket, который подтверждает начало использования WebSocket.

Обмен данными после установления соединения

После установления соединения данные передаются в фреймах. Эти фреймы могут содержать текстовую информацию (например, сообщение в чате) или бинарные данные.
Каждый фрейм может быть маленьким и содержать, например, одно сообщение, и сервер может отправлять фреймы снова клиенту, как только появляются новые данные.

Ответ клиента

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

Пример

Пример фрейма, который клиент отправляет серверу через WebSocket:

Текстовое сообщение: предположим, что клиент отправляет текстовое сообщение "Привет, как дела?".

Фрейм для текста, отправленный от клиента на сервер, может выглядеть так (на уровне данных WebSocket):

81 0e 50 72 69 76 65 74 2c 20 6b 61 73 20 64 65 6c 3f

Разберём это:

81: где 8 — это первые 4 бита (1000), что соответствует числу 8 в шестнадцатеричной системе (0x8). 1 — это вторые 4 бита (0001), что соответствует числу 1 в шестнадцатеричной системе (0x1). Это и есть опкод*, который указывает, что сообщение содержит текстовые данные.
0e: длина данных, которые следуют, в данном случае это 14 байтов.
Следующие байты (50 72 69 76 65 74 2c 20 6b 61 73 20 64 65 6c 3f) — это сами данные, которые закодированы в формате UTF-8. Это текстовое сообщение: "Привет, как дела?".

*opcode — это сокращение от operation code, то есть "код операции". Это часть заголовка кадра (фрейма), которая говорит что именно содержит этот фрейм: текст, бинарные данные и т.д.

Бинарное сообщение: если клиент отправляет бинарные данные (например, изображение или файл), фрейм будет немного отличаться. Например, для бинарных данных будет использоваться опкод 0x2 (опкод для бинарных сообщений).

В случае текстового сообщения WebSocket автоматически кодирует его в формат UTF-8 и отправляет в виде фреймов, как показано выше.

Обсудить статью, узнать больше можно в телеграм канале «Тестировщики нужны».