Что такое Server-Sent Events

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

Часто SSE могут стать отличной альтернативой WebSocket. Он отлично подойдёт для кейсов, когда:

1. Нам нужно постоянно получать обновления с сервера
2. Не нужно постоянно отправлять что-то с клиента

Такая односторонняя связь полезна при реализации:

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

И многих других случаях

Фикус в том, что держать SSE гораздо проще и дешевле, чем держать WebSocket. Как по коду, так и по перфомансу

Для реализации понадобится только простенький эндпоинт на сервере, а далее процесс выглядит так:

1. Клиент делает GET запрос на подготовленный эндпоинт через EventStream
2. Сервер создаёт event-stream, просто устанавливая нужный заголовок. Соединение не закрывается, и с этого момента сервер может пушить в стрим любые строковые данные
3. Клиент подписывается на новое сообщение в стриме

На сервере это будет выглядеть примерно так:

javascript
1const http = require('http');
2
3http.createServer((req, res) => {
4    if (req.url === '/stream') {
5        res.writeHead(200, {
6            'Content-Type': 'text/event-stream',
7            'Cache-Control': 'no-cache',
8            'Connection': 'keep-alive',
9        });
10    
11        setInterval(() => {
12          res.write('data:  ПРИВЕТ!\n\n');
13        }, 1000);
14    }
15}).listen(3000);
16

На клиенте это будет выглядеть примерно так:

javascript
1const source = EventSource('/stream')
2
3sourse.addEventListener('message', (message) => {
4    console.log(message.data)
5})
6

С таким кодом мы будем получать на клиенте сообщение "ПРИВЕТ!" каждую секунду

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

И конечно же никто не запрещает обернуть стрим в какой-нибудь React хук и сделать дженеричное решение для всего проекта/проектов

Если вы ни разу не работали SSE, то очень рекомендую потыкать хотя бы в песочнице — очень крутая штука!