- 您好！欢迎来到鲲鹏知舟
HTML5 SS Event 服务器发送事件
HTML5 Server-Sent Event 服务器发送事件使浏览器能够通过 HTTP 连接从服务器接收自动更新和数据。
什么是服务器发送的事件？
每当我们执行某个事件并将其发送到服务器时，例如通过将表单提交到服务器。因此，这种从 Web 浏览器流向 Web 服务器的事件称为客户端事件。但是如果服务器向浏览器发送了一些更新或信息，则此类事件称为服务器发送事件。因此，当浏览器从服务器自动更新时，会发生服务器发送事件。
服务器发送的事件是单向的（总是从服务器到客户端）。或者它可以称为单向消息传递。
从服务器接收事件
Server sent 事件使用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 "output" 在 div 上显示发生的消息。
检查浏览器对服务器发送事件的支持
首先，我们需要检查浏览器对服务器发送事件的支持。因此，要检查浏览器对服务器发送事件的支持，我们将检查 EventSource 对象是否为真。如果它是真的，那么它会发出支持的警报，否则它将发出不支持的警报。
例子：
<!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>从服务器发送事件：
要使用 server-sent，我们需要一个可以向 Web 浏览器发送数据更新的服务器。为此，我们需要用 ASP、PHP 或任何动态语言创建一个文件。
以下是显示服务器更新的示例：
服务器更新.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>注意：要在浏览器上执行上面的代码，你需要在你的系统上安装一个服务器，然后在本地主机上运行它。您可以安装任何服务器，例如 MYSQL、XAMPP 等。
支持浏览器
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| SSE | 6.0 | No | 6.0 | 11.5 | 5.0 |
-
使用社交账号登录,本站支持