Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Учебники


HTML Формы


HTML Графика


HTML Медиа


HTML API Интерфейсы


HTML Примеры


HTML Ссылки



HTML5 SSE API



События Отправлено Сервером (SSE) Разрешить веб странице получать обновления с сервера.

Server-Sent Events - Односторонний обмен сообщениями

Событие, отправленное сервером - это когда веб страница автоматически получает обновления с сервера.

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

Примеры: обновления Facebook/Twitter, обновления цен на акции, новостные ленты, спортивные результаты и т.д.


Поддержка браузеров

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает отправленные сервером события.

API
SSE 6.0 79.0 6.0 5.0 11.5

Получение уведомлений о событиях, отправленных сервером

Объект EventSource используется для получения уведомлений о событиях, отправленных сервером:

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};
Попробуйте сами »

Объяснение примера:

  • Создайте новый объект EventSource и укажите URL- дрес страницы, отправляющей обновления (в файл "demo_sse.php")
  • Каждый раз при получении обновления происходит событие onmessage
  • Когда происходит событие onmessage, поместите полученные данные в элемент с помощью id="result"

Проверьте поддержку событий, отправленных сервером

В приведенном выше примере, было несколько дополнительных строк кода для проверки поддержки браузером событий, отправленных сервером:

if(typeof(EventSource) !== "undefined") {
  // Да! Поддержка событий, отправляемых сервером!
  // Некоторый код.....
} else {
  // Прости! Поддержка событий, отправляемых сервером, отсутствует.
}


Пример кода на сервере

Для работы приведенного выше примера вам нужен сервер, способный отправлять обновления данных (например, PHP или ASP).

Синтаксис потока событий на стороне сервера прост. Установите header "Content-Type" к "text/event-stream". Теперь вы можете начать отправлять потоки событий.

Код на PHP (demo_sse.php):

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

$time = date('r');
echo "data: Серверное время: {$time}\n\n";
flush();
?>

Код на ASP (VB) (demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: Серверное время: " & now())
Response.Flush()
%>

Объяснение кода:

  • Установите header "Content-Type" к "text/event-stream"
  • Укажите, что страница не должна кэшироваться
  • Выведите данные для отправки (Всегда старт с "data:")
  • Сбросьте выходные данные обратно на веб страницу

Объект EventSource

В приведенных выше примерах мы использовали событие onmessage для получения сообщений. Но доступны и другие события:

События Описание
onopen При открытии соединения с сервером
onmessage Когда сообщение получено
onerror При возникновении ошибки


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.