Html5服务器发送事件(sse)在nodejs中的应用

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 + "
";
};

检测浏览器是否支持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);
  });
});