Вступ до SSE
SSE означає Server-Sent Events, що буквально означає, що сервер передає інформацію клієнту. SSE — це односторонній канал,Сервер може надсилати інформацію лише клієнтуКлієнт може отримати запит SSE лише після першого тригеру і не може відповісти.
Основні особливості SSE включають:
- Простота використання: SSE використовує текстові формати даних, такі як звичайний текст, JSON тощо, що робить надсилання та аналіз даних відносно простим.
- Односторонній зв'язок: SSE підтримує односторонній зв'язок між сервером і клієнтом, де сервер може активно передавати дані клієнту, а клієнт може приймати лише ці дані.
- Режим реального часу: SSE встановлює довгострокові з'єднання, дозволяючи серверам передавати дані клієнтам у режимі реального часу без частих запитів.
SSE проти WebSocket
WebSocket — це ще одна веб-технологія, яка використовується для забезпечення двостороннього зв'язку в реальному часі, яка в деяких аспектах відрізняється від SSE. Ось порівняння між SSE та WebSocket:
- Напрямок передачі даних: SSE — це односторонній зв'язок між сервером і клієнтом, і сервер може активно передавати дані клієнту. WebSocket, навпаки, є двонаправленим зв'язком, що дозволяє в реальному часі обмін двосторонніми даними між сервером і клієнтом.
- Встановлення з'єднання: SSE використовує довгі HTTP-з'єднання для встановлення зв'язків через звичайні HTTP-запити та відповіді, таким чином у реальному часі передавати дані. WebSockets використовують власні протоколи для забезпечення двостороннього зв'язку шляхом встановлення WebSocket-з'єднань.
- Сумісність: Оскільки SSE базується на протоколі HTTP, його можна використовувати в більшості сучасних браузерів і він не потребує додаткових оновлень протоколу. WebSockets також підтримуються у більшості сучасних браузерів, але вони можуть створювати проблеми в деяких спеціальних мережевих середовищах.
- Застосовні сценарії: SSE підходить для ситуацій, коли сервер надсилає дані клієнту в режимі реального часу, наприклад, оновлення цін акцій, новини в реальному часі тощо. WebSocket підходить для ситуацій, що потребують двостороннього спілкування в реальному часі, таких як чат-додатки та багатоосібне спільне редагування.
- Залежно від конкретних бізнес-потреб і сценаріїв, вибір SSE або WebSocket залежить від ваших реальних потреб. Якщо вам потрібен сервер лише для відправлення даних клієнтам в одному напрямку і ви хочете зробити все простим і сумісним, SSE — хороший вибір. Якщо вам потрібно досягти двостороннього зв'язку або більш просунутих функцій і керування, WebSocket може краще підійти для ваших потреб.
Формат трансляції подій SSE
Потік подій — це простий потік текстових даних, який слід кодувати у форматі UTF-8. Потік подійПовідомлення розділене парою розривів рядків。 Репліки коментарів про поведінку, що починаються на двокрапку, ігноруються. Кожне поле позначається назвою поля, потім двокрапкою, а потім текстовими даними значення цього поля.
Поля такі:
подія: Рядок, що використовується для ідентифікації типу події. Якщо цей рядок вказано, браузер відправляє подію з зазначеною назвою події відповідному слухачу; Клієнт повинен використовувати addEventListener() для прослуховування заданої події. Якщо повідомлення не вказує назву події, тоді можна викликати обробник onmessage.
дані: Поле даних повідомлення. Коли EventSource отримує кілька послідовних рядків, починаючи з data:, він їх об'єднує, вставляючи між ними розрив рядка. Розрив лінії в кінці видалено.
id: Event ID, який стає значенням властивості внутрішньої властивості поточного об'єкта EventSource — «Last Event ID».
Повторити: час відновити зв'язок. Якщо з'єднання з сервером втрачено, браузер чекає визначений час і намагається знову підключитися. Це має бути ціле число, яке вказує час повторного підключення в мілісекундах. Якщо вказано неціле значення, це поле ігнорується.
Екземпляр EventSource
Інтерфейс EventSource — це інтерфейс між веб-контентом і сервером для надсилання подій.
Властивість EventHandler
EventSource.onopen викликається, коли з'єднання відкрите.
EventSource.onmessage викликається, коли повідомлення отримано без атрибута події.
EventSource.onerror викликається при виключеннях з'єднання.
SSE сервер (ASP.NET Core)
Створіть новий проєкт ASP.NET Core з .NET 8, і код контролера виглядає так:
Для клієнта, який встановлює зв'язок, надсилайте повідомлення клієнту кожні секунди.
Клієнт SSE
Напишіть клієнтський код на сторінці перегляду, використовуючи html та js наступним чином:
Почніть проєкт із наступних ефектів:
Посилання:
Вхід за гіперпосиланням видно.
Вхід за гіперпосиланням видно.
Вхід за гіперпосиланням видно. |
Опубліковано 2024-4-5 11:54:12
|
|
|
|
Орендодавець|
Опубліковано 2024-4-5 12:03:28
|
Опубліковано 2024-11-14 14:34:25
|
