—»     —»   Получаем обновления на веб-странице посредством событий HTML5 Server-Sent
  Раздел: Скрипты и коды   Нет комментариев  

Получаем обновления на веб-странице посредством событий HTML5 Server-Sent



Модель событий HTML5 Server-Sent позволяет вам получать актуальное обновление от сервера в браузере. В нашем сегодняшнем руководстве мы расскажем вам о процессе управления полученными данными посредством объекта EventSource, и их последующей записи в страницу. На клиентской стороне мы будем использовать HTML5 и javascript, а со стороны сервера воспользуемся технологией PHP.

Получаем обновления на веб-странице посредством событий HTML5 Server-Sent

С существующими моделями типа AJAX, код веб-страницы может непрерывно посылать запросы к серверу для получения обновленных объемов данных, но ответственность за осуществления запроса информации до сих пор лежала на клиенте. С помощью запросов Server-Sent вы можете «транслировать» данные с сервера, и постоянно обновлять их, без необходимости предоставления возможности пользователю самостоятельно запрашивать обновленный материал. Как только ваша страница запускает событие Server-Sent, скрипт сервера продолжает отправлять обновления. Ваш javascript-код может вписывать новую информацию в страницу сразу же по получении.

Создание HTML5-страницы

Создайте следующую HTML5-страницу:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Добавление элемента для отображения данных Server-Sent

Мы будем отображать данные, полученные с сервера в отдельном элементе на странице, так что в тело документа вам следует добавить следующий код:

<div id="serverData">Here is where the server sent data will appear</div>

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

Добавление скрипта в страницу

Так как нам нужно непрерывное принятие обновления и последующее управление им, мы добавляем отдельную секцию со скриптом в тело страницы. Конечно же, ваши собственные страницы могут выполнять функции взаимодействия с пользователями, но здесь, для наглядности, мы поместили соответствующий скрипт в самом конце страницы, перед закрывающим тэгом body:

<script type="text/javascript">
//functions here
</script>

Скрипт будет запускаться тогда, когда браузер будет генерировать страницу, так что события Server-Sent будут сразу же запущены. Далее мы добавляем javascript-код внутрь секции со скриптом:

//check for browser support
if(typeof(EventSource)!=="undefined") {
//create an object, passing it the name and location of the server side script
var eSource = new EventSource("send_sse.php");
//detect message receipt
eSource.onmessage = function(event) {
//write the received data to the page
document.getElementById("serverData").innerHTML = event.data;
};
}
else {
document.getElementById("serverData").innerHTML="Whoops! Your browser doesn't receive server-sent events.";
}

Скрипт сначала проверяет, поддерживает ли браузер модель EventSource. Если же нет, сообщение об ошибке отображается в элементе полученных данных от сервера, расположенном на странице. Если браузер поддерживает данную функцию, то запускается процесс Server-Sent. Сначала, скрипт создает объект с классом EventSource, подкрепляя его URL-адресом до скрипта на стороне сервера (который будет предоставлять потоковое обновление данных). Затем скрипт создает настройку, которая гарантирует запуск функции отслеживания событий только в том случае, когда объект EventSource получает обновление от сервера. Когда это происходит, скрипт просто получает ссылку на обновленный элемент страницы, и вписывает в него новые данные.

Создание скрипта на серверной стороне

Сейчас нам нужно создать PHP-скрипт на стороне сервера для того, чтобы он посылал обновления на страницу. Создайте новый файл и сохраните его под названием «send_sse.php», либо дайте ему имя по собственному предпочтению, если сможете внести соответствующие изменения в вышеприведенный код EventSource. Далее внесите следующий код в ваш PHP-файл:

<?php
//streaming code
?>

Начните свой PHP-скрипт, устанавливая заголовки следующим образом:

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

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

//generate random number for demonstration
$new_data = rand(0, 1000);
//echo the new number
echo "data: New random number: $new_data";
flush();

В целях наглядно продемонстрировать события Server-Sent, мы просто генерируем новое случайное число каждый раз, как скрипт присылает обновление. Код сначала сохраняет новое случайное число от 0 и 1000 в качестве переменной. Затем он отображает новые данные с некоторым текстом, после текста «data:», который вы для корректной работы должны разместить в скрипте. Наконец, скрипт очищает выходные данные, отправляя их в браузер.

Загрузка и тестирование

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

Заключение

В нашем сегодняшнем руководстве мы выяснили основы использования событий Server-Sent с HTML5, javascript и PHP. В нашем примере скрипт на серверной стороне просто генерирует случайное число, но в ваших личных проектах вы можете выстроить цепочку процессов на серверной стороне для извлечения данных с различных источников, отображая свежую информацию пользователям без необходимости перезагружать страницу.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, javascript, PHP
Опубликовал Design FactoRy   Прочитано (раз): 10297   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30