Server-Sent 事件 - 单向消息传递
html5有一个新的功能--服务器发送事件(Server Sent Event),这个功能的主要用途是服务端向浏览器客户端发送事件。
所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。
SSE&WebSocket
SSE与WebSocket有相似功能,都是用来建立浏览器与服务器之间的通信渠道。两者的区别在于:
- WebSocket是全双工通道,可以双向通信,功能更强;SSE是单向通道,只能服务器向浏览器端发送。
- WebSocket是一个新的协议,需要服务器端支持;SSE则是部署在 HTTP协议之上的,现有的服务器软件都支持。
- SSE是一个轻量级协议,相对简单;WebSocket是一种较重的协议,相对复杂。
- SSE默认支持断线重连,WebSocket则需要额外部署。
- SSE支持自定义发送的数据类型。
- SSE不支持CORS,参数url就是服务器网址,必须与当前网页的网址在同一个网域(domain),而且协议和端口都必须相同;WebSocket支持跨域
接收 Server-Sent 事件通知
html5中的EventSource 对象用于接收服务器发送事件通知:
var source = new EventSource("sse");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
检测浏览器是否支持Server-Sent:
if (typeof(EventSource) !== "undefined") {
} else {
}
Node服务端代码实例
const http = require('http');
const SSE = require('sse');
var sseClients = [];
var server = http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('okay');
});
server.listen(8080, '127.0.0.1', function() {
var sse = new SSE(server, { path: '/sse', verifyRequest: (req) => {
return true;
}});
sse.on('connection', function(client) {
client.on('close', function() {
let index = sseClients.indexOf(client);
if (index > -1) {
sseClients.splice(index, 1);
}
});
sseClients.push(client);
client.send('Hello world');
client.count = 1;
setInterval(() => {
sseClients.forEach(function (item, index) {
item.send(`[${sseClients.length}]服务端推送给客户端${index} : ${item.count}`);
item.count++;
});
}, 1000);
});
});
网友评论