基于SSE实现服务端消息推送

一.SSE简介
SSE是一种服务端推送协议，HTML5标准之一，全称Server-Sent Events，目前主流的浏览器都支持这一特性，我们不需要依赖什么库，就可以方便地使用SSE来投入开发。主要实现是利用是EventSource对象，例子如下：

1.客户端代码

// 判断当前的浏览器环境是否支持SSE
 if ('EventSource' in window) {
      
        var es = new EventSource('http://127.0.0.1:8080/sse');

        //open事件 
        es.onopen = function (e) {
            console.log('SSE通道建立成功');
        };

        // message事件
        es.onmessage = function (e) {
            console.log(e.data);
        }

        // error事件
        es.onerror = function (e) {
            console.log('连接错误');
            /* 关闭 */
            es.close()
        }

        // 自定义事件处理
        es.addEventListener('myfunc', function (e) {
            var data = e.data;
            // 处理数据
        }, false);

    }

2.服务端（以node.js为例）

var http = require("http");

http.createServer(function (req, res) {
  var fileurl = "." + req.url;

  if (fileurl === "./sse") {
    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()) + "\n\n");

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

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

通过实例化后的EventSource对象的readyState属性来判断通道是否建立，当它的取值为0时，表示未建立连接，或者正在断线重连；当它的取值为1时，表示连接已经建立，可以接受数据；当它的取值为2时，表示连接已断，且不会重连。
当SSE被成功建立以后，首先会触发open事件，建立SSE通道后在onmessage这个回调函数内处理业务逻辑，SSE自带断线重连机制，
onerror事件可以不用关注，如果想主动关闭连接可以使用close()方法
由此可见，我们只需像注册事件函数一样在SSE协议下完成对自定义事件的监听

二.和WebSocket对比
WebSocket也可以实现服务端向客户端推送信息，那么这两种技术有什么区别呢？
两者最为不同的地方在于，WebSocket建立的是一个全双工通道，而SSE建立的是一个单工通道。所谓单工和双工，是指数据流动的方向上的不同，对WebSocket而言，客户端和服务端都可以发送信息，所以它是双向通信；而对于SSE而言，只有服务端可以发送消息，所以它是单向通信，另外SSE天然支持断线重连，WebSocket需要自己实现心跳机制

参考链接
Mozilla - 使用服务器发送事件