Недавно я наткнулся на относительно старую функцию HTML5 под названием SSE (События, отправленные сервером), которая, как следует из названия, используется для прослушивания событий, отправляемых сервером. Это означает, что соединение является однонаправленным, в отличие от WebSockets.

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

⚡️ P.S: прочтите это, если хотите добавить push-уведомления в приложения NodeJS или Electron.

Что такое события, отправленные сервером?

По сути, функция SSE довольно проста. Ваш сервер должен отправлять определенный заголовок, подразумевая, что он поддерживает эту функцию, и поддерживать соединение открытым, т.е. keep-alive. Вот пример того, как этого добиться с помощью Express.

В приведенном выше коде следует отметить несколько моментов:

  • Заголовок типа текст / содержимое потока событий. Это то, что ищут браузеры.
  • Заголовок keep-alive.
  • Двойные символы новой строки в конце данных. Это указывает на конец сообщения.

Использование SEE в стандартной веб-среде (DOM) совсем несложно. Вам просто нужно использовать интерфейс EventSource, доступный глобально в контексте окна.

Использование SSE в NodeJS

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

Что ж, это, как оказалось, тоже просто. Все, что нам нужно сделать, это сделать запрос GET и продолжать прислушиваться к отправке новых данных.

Но… если мы слушаем эти события обычным HTTP-способом, не следуя никаким спецификациям, то почему мы придерживаемся протокола при их отправке?

Что ж, это, мой друг, также не требуется, если вы слушаете события в среде, отличной от DOM. Вы можете использовать любые заголовки, которые хотите, до тех пор, пока сохраняется соединение. Для этого:

  • Отправить заголовок «keep-alive»
  • Отправить статус 200, а не 204
  • Не прекращайте работу после отправки данных. В http / express просто используйте. write () вместо. send ().

Пользовательский протокол

Вот пример отправки данных JSON каждые 5 секунд.

Если вы заметили, мы не использовали заголовок text / event-stream, потому что мы можем отправлять контент любого типа, который нам нужен, поскольку мы не используем собственный API браузера для отслеживания событий. Кроме того, в конце данных не должно быть двойных символов новой строки!

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

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

👉🏼 Следите за мной в Твиттере, чтобы узнать больше о программировании: @moinism

Эта статья написана и оптимизирована в INK