HTML5 server-sent事件

服务器发送消息事件(Server-Sent Events)允许网页收到服务器的更新信息.

Server-sent事件 - 单向消息传递

server-sent事件就是网页自动从服务器获取更新.

例子:Facebook/Twitter消息更新,股票价格更新,新闻反馈,体育分数等等.

接收服务端发送的事件通知

EventSource对象用来接收服务器端发送的事件通知:

例子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
</head>
<body>
<div id="result"></div><script>
    var source = new EventSource("/full_stack/Html/demo_sse.php");
    source.onmessage = function(event) {
        document.getElementById("result").innerHTML= event.data;
    };
</script>
</body>
</html>

例子解释:

创建一个新的EventSource对象,并且指定URL(在这个例子里是"demo_sse.php").
每次收到了更新会触发onmessage事件.
当onmessage事件触发了,把收到了的数据显示在id="result"元素里.

检测是否支持Server-Sent事件

在上面的例子里加一些代码来检测是否支持server-sent事件:

if(typeof(EventSource) !== "undefined") {
    // Yes! 支持Server-sent事件!
    // 代码.....
} else {
    // Sorry! 不支持server-sent事件
}

服务器端代码例子

为了让上面的代码正常工作,你需要服务器来发送更新数据(例如:PHP,ASP).

服务器端的事件流语法很简单.

设置"Content-Type"头为"text/event-stream".

现在你就可以开始发送事件流了.

PHP代码(demo_sse.php):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: 服务器时间: {$time}";
flush();
?>

ASP代码(VB)(demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: 服务器现在时间: " & now())
Response.Flush()
%>

代码解释:

设置"Content-Type"头为"text/event-stream"
指定页面不应该缓存
服务器把数据发送出来(数据开头通常用"data:"这种格式)
刷新输出数据到网页

EventSource对象

在上面的例子里,我们用onmessage事件去得到信息.但是其它事件也可用:

事件	描述
onopen	当连接到服务器时触发
onmessage	当收到消息时触发
onerror	当发生错误时触发

评论区

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索