🤝🏻 Двусторонняя клиент-серверная связь, часть 3: Server-Sent Events

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

👉🏻 SSE — это технология, позволяющая серверам инициировать отправку данных клиентам, подписанным на эти уведомления. Основное применение SSE – отправка обновлений в режиме реального времени от сервера к клиенту через стандартный HTTP-протокол. Как можно заметить, это не совсем двусторонняя, а скорее односторонняя связь, но она в том числе позволяет обмениваться данными между разными клиентами в реальном времени.

Как это работает:

Клиент создаёт объект EventSource, указывая URL сервера, от которого будет получать обновления:

const eventSource = new EventSource('http://example.com/sse');

Сервер обрабатывает запрос, устанавливает необходимые заголовки ответа (самый важный из которых – Content-Type: text/event-stream), и начинает передавать сообщения в формате, специфичном для SSE. Примеры:

data: Сообщение №1 
retry: 2000
--
data: Сообщение №2
id: 2
--
event: specificevent
data: Сообщение с пользовательским типом события

Клиент в это время подписывается на события и обрабатывает их привычным способом:

eventSource.onopen = function(event) {
    console.log('Соединение установлено');
};

eventSource.onmessage = function(event) {
    console.log('Новое сообщение:', event.data);
};

eventSource.addEventListener('specificevent', function(event) {
    console.log('Сообщение с пользовательским типом:', event.data);
});

⚡️ Вот и всё! Снова всё предельно просто. Пример реализации этого подхода для уже знакомого нам чата можно найти в нашем репозитрии. Здесь как раз используется подход SSE для обеспечения двусторонней связи, так как сервер инициирует отправку данных клиентам через SSE в ответ на получение сообщения от клиентов. А также можно потрогать Live Demo, которое мы сделали и для этой технологии.

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

Из минусов, это все-таки односторонняя коммуникация с ограниченным форматом данных. Но для многих несложных задач этот механизм может прекрасно подойти. Подробнее о нём и о некоторых нюансах как всегда можно почитать на MDN.