HTML 服务器发送事件

简介

HTML5 服务器发送事件(Server-Sent Event)指的网页自动获取来自服务器的更新;
解决了以往靠客户端发送消息才能要求服务端返回更新信息的问题(如股票票价更新,微博消息更新等很多应用场景)。

兼容性

除了 IE 所有主流浏览器均支持。
Javascript 代码

<script>
function ifEventSourceAvailable() {
	var available = typeof(EventSource) !== undefined;
	var message = available === true ? "supports" : "doesn't supports"
	alert("This brower " + message + " Server-Sent Event")
}
</script>

效果:

创建服务端脚本

服务端支持所有语言开发,例如我们以PHP为例,有两个关键地方:

  • 要把 Content-Type 报头设置为 “text/event-stream”,就可以开始发送事件流;
  • 返回数据必须以 “data: ” 开头,否则接受不到数据;

PHP 代码
sse.php文件代码

<?php
header('Content-Type: text/event-stream');
$time = date('r');
echo "data: 服务器时间是: {$time}\n\n";

完整实例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SSE</title>
</head>
<body>
<h4>服务端更新数据</h4>
<div id="result"></div>
<script>
    function supportSSE() {
           return typeof(EventSource) !== "undefined";
    }
    var resultTag = document.getElementById("result");
    if (supportSSE()) {
        var source = new EventSource("/txtech/php/sse.php");
        source.onmessage = function (event) {
            resultTag.innerHTML += event.data + "<br>";
        };
    }
    else {
        resultTag.innerHTML = "你的浏览器不支持 Server Sent 事件.";
    }
</script>
</body>
</html>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注