Отправленное на сервер HTML5-событие — это новый способ взаимодействия веб-страниц с веб-сервером. Это также возможно с объектом XMLHttpRequest, который позволяет вашему JavaScript-коду сделать запрос к веб-серверу, но, в этом случае, как только веб-сервер предоставит свой ответ, связь завершится. Объект XMLHttpRequest является ядром всех Ajax-операций.
Однако в некоторых ситуациях веб-страницы требуют более длительного подключения к веб-серверу. Типичным примером являются биржевые котировки на финансовых сайтах, где цены обновляются автоматически. Другим примером является новостная лента, работающая на различных медиа-сайтах.
Вы можете создавать такие вещи с помощью событий SSE (Server-Sent Events). Они позволяют веб-странице сохранять открытое соединение с веб-сервером, чтобы веб-сервер мог автоматически отправлять новый ответ в любое время. Для этого не нужно повторно подключаться и запускать один и тот же серверный скрипт с нуля раз за разом.
События Server-Sent Events (SSE) являются однонаправленными — это означает, что данные доставляются в одном направлении от сервера к клиенту. Клиентом обычно является веб-браузер.
Функция SSE событий HTML5 поддерживается во всех современных веб-браузерах, таких как Firefox, Chrome, Safari и Opera, кроме Internet Explorer.
Отправка сообщений с помощью серверного скрипта
Давайте создадим PHP-файл с именем server_time.php и введем в него следующий скрипт. Он будет просто сообщать текущее время встроенных часов веб-сервера через равные промежутки времени. Мы получим это время и, соответственно, обновим веб-страницу позже в этом руководстве.
<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
// Get the current time on server
$currentTime = date("h:i:s", time());
// Send it in a message
echo "data: " . $currentTime . "\n\n";
flush();
?>Первые две строки PHP-скрипта устанавливают два важных заголовка. Во-первых, он устанавливает MIME-тип в text/event-stream, что требуется стандартом событий на стороне сервера. Вторая строка говорит веб-серверу отключить кэширование, иначе выходные данные вашего скрипта могут быть кэшированы.
Каждое сообщение, отправляемое через SSE события HTML5 должно начинаться с текстовых данных data:, за ним следует текст самого сообщения и последовательность символов новой строки (\n\n).
И наконец, мы использовали PHP-функцию flush(), чтобы убедиться, что данные отправляются сразу, а не буферизируются до тех пор, пока PHP-код не будет завершен.
Обработка сообщений на веб-странице
Объект EventSource используется для получения отправленных сервером сообщений от SSE.
Теперь давайте создадим HTML-документ с именем demo_sse.html и поместим его в тот же каталог проекта, где находится файл server_time.php. Этот HTML-документ просто получает текущее время, сообщаемое веб-сервером, и отображает его пользователю.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using Server-Sent Events</title>
<script>
window.onload = function() {
var source = new EventSource("server_time.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += "New time received from web server: " + event.data + "<br>";
};
};
</script>
</head>
<body>
<div id="result">
<!--Server response will be inserted here-->
</div>
</body>
</html>
