English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Серверно-отправляемые события HTML5 (server-sent event) позволяют веб-странице получать последние данные от сервера, не обновляя страницу, и динамически получать новые данные.
Серверно-отправляемые события представляют собой автоматическое получение обновлений данных с сервера веб-страницей.
Традиционным способом получения последних данных с сервера является обновление или использование таймера для получения новых данных. В настоящее время можно автоматически получать последние данные, используя серверно-отправляемые события.
Пример: обновления Facebook/Twitter, курсы акций, микроблоги, результаты спортивных событий, динамические сообщения, комментарии и т.д.
Все основные браузеры поддерживают серверно-отправляемые события, за исключением Internet Explorer.
Объект EventSource используется для получения уведомлений о событиях, отправляемых сервером:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник сайта (oldtoolbag.com)</title>
</head>
<body>
<h1>Получите последние данные сервера</h1>
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo-sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
}
else
{
document.getElementById("result").innerHTML="Извините, ваш браузер не поддерживает server-sent события...";
}
</script>
</body>
</html>Проверьте, работает ли это ‹/›Интерпретация примера:
Создайте новый объект EventSource и specify URL страницы, которая отправляет обновления (в данном примере это "demo_sse.php")
Когда происходит событие onmessage, которое возникает при каждом получении обновления
Когда occurs событие onmessage, добавьте полученные данные в элемент с id "result"
В следующем примере мы написали дополнительный код для проверки поддержки браузером серверных событий-потоков:
if(typeof(EventSource)!=="undefined")
{
// Браузер поддерживает Server-Sent
// Некоторые коды.....
}
else
{
// Браузер не поддерживает Server-Sent..
}Чтобы пример работал, вам также потребуется сервер, который может отправлять обновления данных (например, PHP и ASP).
Синтаксис серверных событий-потоков очень прост. Установите заголовок "Content-Type" в "text/event-stream". Теперь вы можете начать отправлять поток данных.
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server current time: {$time}\n\n";
flush();
?>Код ASP (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: The server current time" & now())
Response.Flush()
%>Объяснение кода:
Установить заголовок "Content-Type" в "text/event-stream"
Указать, что страницу не следует кэшировать
Вывод даты отправки (всегда начинается с "data: ")
Вывод данных на обновление веб-страницы
В上面的 примере мы используем событие onmessage для получения сообщений. Однако можно использовать и другие события:
| Событие | Описание |
| onopen | При открытии подключения к серверу |
| onmessage | При получении сообщения |
| onerror | При возникновении ошибки |