HTML5 服务器发送事件 Server-Send

xiaoxiao2021-02-28  106

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--当发生错误时触发事件。
转载请注明原文地址: https://www.6miu.com/read-38664.html

最新回复(0)