详情查看
概述
传统的网页都是浏览器向服务器“查询”数据，但是很多场合，最有效的方式是服务器向浏览器“发送”数据。比如，每当收到新的电子邮件，服务器就向浏览器发送一个“通知”，这要比浏览器按时向服务器查询（polling）更有效率。
node代码 server.js
var http = require("http");
http.createServer(function (req, res) {
var fileName = "." + req.url;
if (fileName === "./stream") {
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
"Connection": "keep-alive"
});
res.write("retry: 10000\n");
res.write("event: connecttime\n");
res.write("data: " + (new Date().toISOString()) + "\n\n");
res.write("data: " + (new Date().toISOString()) + "\n\n");
interval = setInterval(function () {
res.write("data: " + (new Date().toISOString()) + "\n\n");
}, 5000);
req.connection.addListener("close", function () {
clearInterval(interval);
}, false);
}
}).listen(80, "127.0.0.1");html代码 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSE</title>
</head>
<body>
<div id="result"></div>
<script>
if (!!window.EventSource) {
var source = new EventSource('http://127.0.0.1/stream');
source.addEventListener('open', open);
source.addEventListener('connecttime', connecttime); // 监听自定义事件
source.addEventListener('message', message); // 监听默认事件
source.addEventListener('error', error);
function open() {
console.log('SSE open', '连接已建立');
}
function message(event) {
console.log('SSE message', event.data);
}
// 自定义事件
function connecttime(event) {
console.log('SSE connecttime', event.data);
}
function error(ev) {
console.log('SSE error', '错误了');
}
}
</script>
</body>
</html>结果
