服务端发送事件(SSE)

客户端实现

var urls = 'http://127.0.0.1:8844/stream'
var sse = new EventSource(urls)
sse.onopen = function (e) {
console.log(e.type)
}
sse.onerror = function (e) {
console.log(e)
}
sse.onmessage = function (e) {
console.log(e.data)
}
sse.addEventListener ('hello', function (e) {
// console.log(e.type)
console.log(e.data)
})

服务端Nodejs实现

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",
"Access-Control-Allow-Origin": '*',
});
res.write("retry: 10000\n");

interval = setInterval(function () {
res.write("event: hello\n");
res.write("data: " + Date.now() + "\n\n");
res.write("event: hello\n");
res.write("data: " + 111 + "\n\n");
}, 1000);

req.connection.addListener("close", function () {
clearInterval(interval);
}, false);
}
}).listen(8844, "127.0.0.1");

SSE与WebSocket有相似功能,都是用来建立浏览器与服务器之间的通信渠道。两者的区别在于:

  • WebSocket是全双工通道,可以双向通信,功能更强;SSE是单向通道,只能服务器向浏览器端发送。
  • WebSocket是一个新的协议,需要服务器端支持;SSE则是部署在HTTP协议之上的,现有的服务器软件都支持。
  • SSE是一个轻量级协议,相对简单;WebSocket是一种较重的协议,相对复杂。
  • SSE默认支持断线重连,WebSocket则需要额外部署。
  • SSE支持自定义发送的数据类型。