您的位置：首页 > Web前端 > HTML5

HTML5 服务器发送事件 Server-Send

2017-08-05 23:39 453 查看

Server-Send事件

Server-Send事件指的是网页自动获取来自服务器端的更新。以前也能做到这点，前提是网页必须询问是否有可用的更新。通过服务器发送事件，更新能够自动送达。

支持情况：除了IE浏览器外，其它主流浏览器匀支持服务器发送事件。

检测Server-Send的支持情况

在书写代码时，首先是检测浏览器是否支持Server-Send，代码如下：

if (typeof(EventSource) !== "undefined") {
//浏览器支持
//...
} else {
//浏览器不支持
}

其中，EventSource对象表示服务器发送事件实例。用于接收服务器发送事件的通知。

接收Server-Send事件通知

EventSource对象用于接收服务器发送事件通知。每接收一次更新，就会触发message事件，添加onmessage事件处理程序，其event对象的data属性就是所接收的更新数据。

var source = new EventSource("demo_sse.php"); //创建EventSource对象，用于接收服务器发送事件通知。规定发送更新的页面的URL。

source.onmessage = function (event) {
console.log(event.data); //接收的数据
};

创建EventSource对象，并规定发送更新数据的URL，本例子中是“demo_sse.php”，也就是从这个URL中接收更新数据的。每接收一次服务器发送事件通知，就会触发message事件，为其对象添加onmessage事件处理程序，event.data就是从服务器器端接收到的数据信息。

一个接收服务器发送事件的例子

首先创建一个EventSource对象，并规定发送更新数据的URL。其次，触发message事件后，为其对象添加onmessage事件处理程序，用于接收更新数据信息event.data。
最后将这个从服务器端接收到的更新数据输出到页面上。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>服务器发送事件</title>
</head>
<body>
<h1>获取服务器更新</h1>
<div id="result"></div>
</body>
<script>
if (typeof(EventSource) !== "undefined") {
//创建新的EventSource对象,然后发送更新页面的URL.
//每接收一次更新,就触发message事件,添加onmessage事件处理程序.
//最后将接收到的数据输入到页面.event对象的data属性中保存着更新的数据.
var source = new EventSource("demo_sse.php");
source.onmessage = function (event) {
var result = document.getElementById("result");
result.innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "浏览器不支持";
}
</script>
</html>

其中，demo_sse.php文件的代码为：

<?php
header("Content-type: text/event-stream");
header("Cache-Content: no-cache");
$time = date("r");
echo "data: The server time is: {$time}\n\n";
flush();
?>

这个例子是用于显示本地服务器的时间更新内容的。

效果如下：

注：本次例子是在2017年8月13日建立的。

EventSource对象的其它事件

onopen-- 当通往服务器的连接被打开时触发事件。
onmessage-- 当接收到服务器更新的通知、消息时触发事件。
onerror--当发生错
4000
误时触发事件。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航