您的位置：首页 > 其它

SSE：服务器发送事件

2016-12-15 17:29 281 查看

详情查看

概述

传统的网页都是浏览器向服务器“查询”数据，但是很多场合，最有效的方式是服务器向浏览器“发送”数据。比如，每当收到新的电子邮件，服务器就向浏览器发送一个“通知”，这要比浏览器按时向服务器查询（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>

结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 事件监听

相关文章推荐

新的分享

章节导航