SSE vs WebSockets: разобрались, что где лучше работает

Сегодня в веб-разработке есть много технологий для обмена данными между сервером и клиентом в реальном времени. Среди них особое место занимают SSE (Server-Sent Events) и WebSockets. Обе технологии позволяют создавать динамичные приложения, такие как чаты, онлайн-игры или панели мониторинга. Но они работают по-разному и подходят для разных задач.

Вместе с Марком Садыковым, главным инженером по разработке в Сбере и ментором Эйч Навыки, разбираемся как работают SSE и WebSockets, чем они отличаются и даже как ответить на вопросы о них на собеседовании.

Что такое WebSockets и SSE и как они работают на базовом уровне?

Существуют 4 главные стратегии общения клиента и сервера в реальном времени: WebSocket, Server-Sent Events, Long Polling и Short Polling. Нужно четко понимать различие в стратегиях, чтобы построить быстрое и поддерживаемое приложение, хотя и принято в любой непонятной ситуации использовать WebSocket.

WebSocket — протокол связи поверх TCP-соединения для обмена сообщениями между клиентом и сервером, он использует постоянное соединение.

SSE (Server-Sent Events) — push-технология (связь инициируется сервером, а не клиентом), позволяющая клиенту получать автоматические обновления с сервера через HTTP-соединения.

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

Вот как это выглядит в виде схемы:

WebSocket

SSE

Long Pooling

Short Pooling

В общем случае для реального времени в вебе лучше использовать WebSocket и SSE.

WebSocket можно сравнить с телефонным разговором. Когда вы звоните другу, вы устанавливаете связь (как начальный Handshake в WebSocket). После этого линия остается постоянно открытой, и вы можете говорить друг с другом долго, не прерывая разговор и не набирая номер заново для каждого слова.

SSE можно сравнить с подпиской на журнал. Вы подписываетесь один раз, после этого издатель сам отправляет вам новые выпуски каждый месяц, как только они выходят.

Принцип работы WebSocket

Установка соединения (WebSocket Handshake)

Соединение WebSocket начинается с WebSocket Handshake, который является специальным начальным HTTP-запросом, инициируемым клиентом.

• Клиент отправляет HTTP-запрос с методом GET на сервер и заголовком Upgrade: websocket.
• Заголовок Connection: Upgrade подтверждает намерение перейти на другой протокол.
• Сервер отвечает с кодом статуса 101 Switching Protocols, если поддерживает WebSocket.
• После успешного Handshake соединение переходит в WebSocket-протокол.

			GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Version: 13
		

			HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
		

Принципы работы SSE

Рассмотрим установку соединения HTTP/2, поскольку эта версия наиболее популярная. При использовании HTTP/2 устанавливается одно TCP-соединение для всего обмена данными.

			GET /events HTTP/2
Host: example.com
Accept: text/event-stream
		

			HTTP/2 200
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
		

Формат события SSE

			event: status
id: 101
data: {"cpu": "65%", "memory": "80%"}

event: alert
id: 102
data: {"type": "warning", "message": "Высокая нагрузка на сервер"}

event: status
id: 103
data: {"cpu": "70%", "memory": "85%"}

		

Когда лучше использовать WebSockets, а когда SSE?

Выбор между WebSockets и Server-Sent Events (SSE) зависит от требований конкретного приложения и от того, как данные должны передаваться между клиентом и сервером.

• Приложения с высокой интерактивностью и двусторонней связью. WebSockets идеально подходят для чатов, игр и финансовых платформ.
• Работа с бинарными данными. WebSockets поддерживают как текстовые, так и бинарные данные.
• SSE для однонаправленного потока. Уведомления, ленты новостей, ценовые обновления — идеальный кейс для SSE.
• SSE автоматически переподключается при разрыве и не требует сложной логики на клиенте.

WebSocket и SSE: собеседования по проектированию

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

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