Отправленное на сервер 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>

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.