HTML5 Події, відправлені сервером
Для чого потрібні події, відправлені сервером? (Server-Sent Events - SSE)
Події, відправлені сервером (Server-Sent Events - SSE) дозволяють веб-сторінці отримувати оновлення з сервера.
Події, відправлені сервером - це односторонні повідомлення
Події, відправлені сервером - це коли веб-сторінка автоматично отримує оновлення з сервера.
Це також було можливим і раніше, але на веб-сторінці необхідно було зробити запит, чи доступні оновлення. З подіями, відправленими сервером, оновлення відправляються автоматично.
Приклади: Facebook/Twitter оновлення, оновлення цін на акції, новостійні стрічки, спортивні результати і таке інше.
Підтримка браузерами
Цифри в таблиці визначають першу версію браузера, яка повністю підтримує події, відправлені сервером.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | Не підтримується | 6.0 | 5.0 | 11.5 |
Отримувати сповіщення про відправлені сервером події
Об’єкт EventSource використовується для отримання повідомлень про події, які відправляються сервером:
Приклад
var source = new EventSource("demo_sse.html");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Спробуйте самі »
Пояснення прикладу:
- Створіть новий об’єкт EventSource та вкажіть URL-адресу сторінки, яка відправляє оновлення (в цьому прикладі "demo_sse.html")
- Кожен раз при отриманні оновлення відбувається подія onmessage
- Коли відбувається подія onmessage, розмістіть отримані дані в елемент з id="result"
Перевірте підтримку подій, відправлених сервером
В наведеному вище прикладі "Спробуйте самі" було декілька додаткових рядків коду для перевірки підтримки браузером відправлених сервером подій:
if(typeof(EventSource) !== "undefined") {
// Так! Відправлення подій на сервер підтримується!
// Якийсь код.....
} else {
// На жаль, відправлення подій на сервер не підтримується.
}
Приклад коду на стороні сервера
Для наведеного вище прикладу потрібен сервер, який може відправляти оновлення даних (наприклад, PHP або ASP).
Синтаксис потоку подій на стороні сервера простий. Встановіть заголовок "Content-Type" на "text/event-stream". Тепер ви можете почати відправляти потоки подій.
Код на PHP (demo_sse.html):
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
Код на ASP (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>
Пояснення коду:
- Встановіть заголовок "Content-Type" в "text/event-stream"
- Вкажіть, що сторінка не повинна кешируватись (not cache)
- Виведіть дані, які необхідно відправити. (Завжди потрібно починати з "data: ")
- Скиньте вихідні дані назад на веб-сторінку
Об’єкт EventSource
В наведених вище прикладах ми використовували подію onmessage для отримання повідомлень. Але доступні й інші події:
| Події | Опис |
|---|---|
| onopen | Коли відкрито з’єднання із сервером |
| onmessage | Коли отримано повідомлення |
| onerror | Коли виникла помилка |
