HTML5服务器发送的事件 html5服务器发送的事件|HTML5

本文概述

什么是服务器发送的事件？
从服务器接收事件
检查浏览器对服务器发送事件的支持
从服务器发送事件
完整的例子
浏览器支持

HTML5服务器发送事件使浏览器可以通过HTTP连接从服务器接收自动更新和数据。
什么是服务器发送的事件？每当我们执行某些事件并将其发送到服务器时, 例如通过将表单提交到服务器。因此, 从Web浏览器流到Web服务器的此类事件称为客户端事件。但是, 如果服务器向浏览器发送了一些更新或信息, 则此类事件称为服务器发送的事件。因此, 当浏览器从服务器自动更新时, 将发生服务器发送事件。
【HTML5服务器发送的事件】服务器发送的事件是单向的（始终从服务器到客户端）。或者可以称为单向消息传递。
从服务器接收事件服务器发送的事件使用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：
例：

< ?phpheader('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等。浏览器支持