SSE(Server Sent Events) HTTP服务端推送详解

所谓的SSE(Sever-Sent Event),就是浏览器向服务器发送了一个HTTP请求，保持长连接，服务器不断单向地向浏览器推送“信息”，这么做是为了节省网络资源，不用一直发请求，建立新连接。

优点：SSE和WebSocket相比，最大的优势是便利，服务端不需要第三方组件，开发难度低，SSE和轮询相比它不用处理很多请求，不用每次建立新连接，延迟低。
缺点：如果客户端有很多需要保持很多长连接，这回占用大量内存和连接数。

数据格式

客户端实现

if(typeof(EventSource)!=="undefined") {   //判断是否支持EventSource
      var source = new EventSource('push'); //为http://localhost:8080/sse/push
      source.addEventListener('message', function (e) {
      }
      source.addEventListener('open', function (e) {
      }
      source.addEventListener('error', function (e) {
      }
}

支持默认3种事件，连接一旦建立就会触发open事件，客户端收到服务器发来的数据，就会触发message事件，如果发生通讯错误（如断开连接）就会触发error事件。

默认情况，服务器发来的数据，总是触发message事件，开发者也可以自定义SSE事件，这种情况下，发送回来的数据不会触发message事件。

source.addEventListener('foo', function (event) {
  var data = event.data;
  // handle message
}, false);

上面的例子中使用foo事件监听。

服务器实现

服务器向浏览器发送的 SSE 数据，必须是 UTF-8 编码的文本，具有如下的 HTTP 头信息。

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

每一次发送的信息，由若干个message组成，每个message之间用\n\n分隔。每个message内部由若干行组成，每一行都是如下格式。

[field]: value\n

上面的field可以取四个值。

data   //数据项
event //事件项 默认message
id //数据标识符用id字段表示，相当于每一条数据的编号
retry //重连时间

此外，还可以有冒号开头的行，表示注释。通常，服务器每隔一段时间就会向浏览器发送一个注释，保持连接不中断。

: This is a comment

一般发送格式：

event: userconnect
data: {"username": "bobby", "time": "02:33:48"}
retry:1000

问题

我们来看一下《颠覆者》中的例子：

@ResponseBody
public String push() {
  Random r = new Random();
  try {
      Thread.sleep(5000L);
  } cache(Exception e) {
      e.printStackTrace();  
    }
    return "data:Testing 1,2,3" + r.nextInt()+"\n\n";
}

问题1：长连接？

这里return之后连接就中断了，怎么反复推送消息？

图1：连接不断地被打开关闭

图2：请求一直再重复发送

问题描述：
我们可以看到每个请求只返回了一次数据，服务器每次发完数据就断开了连接，但SSE默认会自动重连，所以客户端不断地重连（重新发送请求），但这样就类似ajax长轮询，并不减少网络资源占用。

SSE 浏览器默认如果3秒内没有发送任何信息，则开始重连。服务器端可以用retry参数信息，指定通信的最大间隔时间

改进方案：
我们发送消息时，不用return，因为一旦return 连接就断开了，我们应该把数据写入到response中，并用flush方法输出。

 @RequestMapping(value = "/pushImprove")
    @ResponseBody
    public String getStreamDataImprove(HttpServletResponse httpServletResponse) {
        httpServletResponse.setContentType("text/event-stream");
        httpServletResponse.setCharacterEncoding("utf-8");
        String s= "retry:10000\n";
        s += "data:Testing 1,2,3------- "+new Date() +"\n\n";
        while (true) {
            try {
                PrintWriter pw=httpServletResponse.getWriter();
                Thread.sleep(100L);
                pw.write(s);
                pw.flush();
            } catch (IOException | InterruptedException e) {
                e.printStackTrace();
            }
        }
    }

实验结果

图3：连接只打开了一次

图4：请求也只出现了一次

这样就实现了客户端只发送一次请求，服务器不断地单向推送消息，保持长连接。

问题二:如何跳出循环

我们写了while(true)让它保持连接，不停地推送数据，但是浏览器关闭了却没有抛出异常，这里很奇怪为什么连接关闭了还能执行flush方法？这样的话浏览器关闭了，服务器却仍在执行while循环，这种情况显然是不允许的。

问题解决：
查阅了PrintWriter源码后发现，在flush方法中已经对异常做了处理，所以调用时不会抛出异常，我们要检测异常可以调用它的checkError()函数。

 public void flush() {
        try {
            synchronized (lock) {
                ensureOpen();
                out.flush();
            }
        }
        catch (IOException x) {
            trouble = true;
        }
    }

我们关闭浏览器后，服务器下一次要推送时就会抛出异常，这个异常已经在PrintWriter的flush()中被捕捉了，我们只需它的调用checkError()，有错误的话return即可停止执行。

 if(pw.checkError()){
       log.println("客户端断开连接");
       return;
  }

实验结果：

图5：关闭浏览器连接断开

可以看到浏览器关闭了以后，服务器也跳出了这个循环

如果客户端想在不关闭页面的情况下主动关闭连接，只需要设置一个按钮，点击以后调用EventSource.colse()即可关闭连接，服务端推送数据时因为连接已经关闭，就会抛出异常，跳出循环。

问题三：兼容性

SSE并没有在微软的IE和Edge浏览器上实现，可以使用第三方javaScript库实现，在页面引入evensource.js就可以实现。
evensource.js下载地址:
https://github.com/EventSource/eventsource

SSE完整源码