Что такое Server-Sent Events SSE — это технология для однонаправленного соединения между сервером и клиентом, которая позволяет серверу отправлять обновления данных в реальном времени Часто SSE могут стать отличной альтернативой WebSocket. Он отлично подойдёт для кейсов, когда: 1. Нам нужно постоянно получать обновления с сервера 2. Не нужно постоянно отправлять что-то с клиента Такая односторонняя связь полезна при реализации: — уведомлений — обновления данных в реальном времени (цен, загрузки CPU...) — индикатора прогресса загрузки большого файла — даже в играх И многих других случаях Фикус в том, что держать SSE гораздо проще и дешевле, чем держать WebSocket. Как по коду, так и по перфомансу Для реализации понадобится только простенький эндпоинт на сервере, а далее процесс выглядит так: 1. Клиент делает GET запрос на подготовленный эндпоинт через EventStream 2. Сервер создаёт event-stream, просто устанавливая нужный заголовок. Соединение не закрывается, и с этого момента сервер может пушить в стрим любые строковые данные 3. Клиент подписывается на новое сообщение в стриме На сервере это будет выглядеть примерно так: const http = require('http'); http.createServer((req, res) => { if (req.url === '/stream') { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', }); setInterval(() => { res.write('data: ПРИВЕТ!\n\n'); }, 1000); } }).listen(3000); На клиенте это будет выглядеть примерно так: const source = EventSource('/stream') sourse.addEventListener('message', (message) => { console.log(message.data) }) С таким кодом мы будем получать на клиенте сообщение "ПРИВЕТ!" каждую секунду При этом, конечно же, никто не мешает усложнить логику со стороны сервера, и пушить новые сообщения в стрим не каждую секунду, а только при изменении данных И конечно же никто не запрещает обернуть стрим в какой-нибудь React хук и сделать дженеричное решение для всего проекта/проектов Если вы ни разу не работали SSE, то очень рекомендую потыкать хотя бы в песочнице — очень крутая штука! Если кратко: SSE — технология однонаправленной связи от сервера к клиенту С помощью SSE можно обновлять данные на клиенте в рамках одного соединения в реальном времени Спасибо за прочтение, это важно для меня 🥰 @prog_way_blog — чат — #theory #javascript #code #data #web