srcmini本文概述
HTML5服务器发送事件使浏览器可以通过HTTP连接从服务器接收自动更新和数据。
什么是服务器发送的事件？
每当我们执行某些事件并将其发送到服务器时, 例如通过将表单提交到服务器。因此, 从Web浏览器流到Web服务器的此类事件称为客户端事件。但是, 如果服务器向浏览器发送了一些更新或信息, 则此类事件称为服务器发送的事件。因此, 当浏览器从服务器自动更新时, 将发生服务器发送事件。
服务器发送的事件是单向的（始终从服务器到客户端）。或者可以称为单向消息传递。
从服务器接收事件
服务器发送的事件使用EventSource对象从服务器接收事件。它指定生成事件的脚本的URI。
例：
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("ServerUpdate.php");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
}代码说明：
- 首先, 创建新的EventSource对象, 并定义发送服务器更新的页面的URI。在这里, 我们已将ServerUpdate.php用于将更新发送到Web浏览器。
- 每次从服务器进行更新时, 都会发生onmessage事件, 并将消息打印在网页上。
- 发生的消息可以使用id“输出”显示在div上。
检查浏览器对服务器发送事件的支持
首先, 我们需要检查浏览器对服务器发送事件的支持。因此, 要检查浏览器对服务器发送事件的支持, 我们将检查EventSource对象是否为true。如果为真, 则将发出警报以提示支持, 否则将发出警报以提示不支持。
例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SSE API</title>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
if(typeof(EventSource)!=="undefined"){
alert("Hey! Your browser is supporting.");
}
else{
alert("Sorry! Your browser is not supporting.");
}
</script>
</body>
</html>立即测试
从服务器发送事件
要使用服务器发送功能, 我们需要一个可以将数据更新发送到Web浏览器的服务器。为此, 我们需要使用ASP, PHP或任何动态语言创建文件。
以下是显示服务器更新的示例：
ServerUpdate.php：
例：
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
//Get the current time of server
$time = date('r');
echo "data: The Current Server time is: {$time}\n\n";
flush();
?>代码说明：
- 在代码的第一行中, 我们将“ Content-type”标头设置为“ text / event-stream”。服务器端事件标准需要它。
- 第二行通知服务器关闭缓存, 否则服务器更新可能会被缓存。
- echo“ data：当前服务器时间为：{$ time} \ n \ n”;它创建要发送的数据输出, 并且必须始终以data：开头。
- 然后, 我们使用了flush()方法, 该方法确保将数据立即发送到网页。
完整的例子
例：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{
text-align: center;
background-color: #98f5ff;
}
</style>
</head>
<body>
<h1 align="center">Dynamic Server Updates</h1>
<div id="output"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("ServerUpdate.php");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
}
} else {
alert("Sorry, your browser does not support the server sent updates");}
</script>
</body>
</html>立即测试
注意：要在浏览器上执行上述代码, 你需要在系统上安装服务器, 然后在localhost上运行该服务器。你可以安装任何服务器, 例如MYSQL, XAMPP等。
浏览器支持
| API | Chrome | IE | Firefox | Opera | Safari |
| SSE | 6.0 | Not Supported | 6.0 | 11.5 | 5.0 |
评论前必须登录！
注册