Здравствуйте дорогие друзья и поехали! С помощью объекта EventSource мы можем осуществлять одностороннюю передачу сообщений с сервера. То есть это когда веб страница через определенный промежуток времени автоматически получает обновления с сервера.

В прочем это было реализовано и раньше, но только веб страница должна была спросить у сервера доступны ли новые обновления. С использованием событий от сервера eventSource, все обновления поступают от сервера автоматически без дополнительных запросов с веб страницы.

Давайте рассмотрим как это работает.

<script>
var source = new EventSource("test.php");
</script>

На веб странице создаем объект класса EventSource и в качестве его аргумента передаем путь к файлу на сервере от которого будут приниматься обновления. Следовательно нам нужно создать такой файл на сервере, в моем случае это test.php. В нем у нас следующий php код.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
echo "data: Время на сервере :".date("H:i:s d-m-Y")." \n\n";

Отмечу что здесь мы обязательно должны передать первый заголовок('Content-Type: text/event-stream'), иначе ничего работать не будет. В качестве второго заголовка я передал отмену кеширования. И затем с помощью echo вывел сообщение которое показывает время на сервере. Причем заметьте в каком формате я реализовал вывод:

echo "data: ваше сообщение от сервера\n\n";

У вас должно выводится сообщение именно в таком же формате иначе ничего работать не будет. Ведь именно данное сообщение будет переодически отсылаться на нашу веб страницу с сервера.

Теперь на веб странице нам осталось дописать метод объекта EventSource с помощью которого мы будем принимать все сообщения от сервера.

<div id="time"></div>
<script>
    var source = new EventSource("test.php");
    source.onmessage = function(event) {
       document.querySelector('#time').innerHTML = event.data;
    };
</script>

Тут с помощью метода onmessage мы будем получать сообщения от сервера и через свойство объекта события event.data задавать их в качестве содержимого элемента с идентификатором time.

Обновляем веб страницу и смотрим. Если вы все сделали правильно, то у вас через определенные промежутки времени(у меня раз в три секунды) должно приходить новое сообщение от сервера с обновленной информацией в моем случае это время. То есть я вижу как раз в три секунды у меня обновляется время, полученное с сервера.

Вы можете проверить и через консоль.

source.onmessage = function(event) {
       console.log(event.data);
  };

Теперь у вас в консоли будет идти стек с сообщения от сервера.

Еще хочу сказать что у объекта EventSource есть еще методы onopen и onerror. Первое как вы наверное уже догадались возникает в результате установления соединения с сервером, а второе в случаях ошибок и обрывах в соединениях.

Давайте добавим их в наш код:

var source = new EventSource("test.php");
source.onmessage = function(event) {
   console.log(event.data);
};
source.onopen = function() {
    console.log('Соединение с сервером установлено');
};
source.onerror = function() {
    console.log('Соединение с сервером прервано');
};

В результате работы данного скрипта мы можем наблюдать следующее, при получении сообщения от сервера у нас устанавливается с ним соединение, а как только сообщение получено оно тут же закрывается. И все наши методы по сути отрабатывают при успешном получении сообщений.

Вот в принципе и все что я хотел вам рассказать дорогие друзья. Данную технологию можно использовать при динамических обновлениях результатов, времени, курсы валюты и т.п.

Надеюсь данная статья была для вас полезна и содержательна. А я же с вами прощаюсь и желаю удачи! Пока!