所谓的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之后连接就中断了,怎么反复推送消息?
问题描述:
我们可以看到每个请求只返回了一次数据,服务器每次发完数据就断开了连接,但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();
}
}
}
实验结果
这样就实现了客户端只发送一次请求,服务器不断地单向推送消息,保持长连接。
问题二:如何跳出循环
我们写了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;
}
实验结果:
可以看到浏览器关闭了以后,服务器也跳出了这个循环
如果客户端想在不关闭页面的情况下主动关闭连接,只需要设置一个按钮,点击以后调用EventSource.colse()即可关闭连接,服务端推送数据时因为连接已经关闭,就会抛出异常,跳出循环。
问题三:兼容性
SSE并没有在微软的IE和Edge浏览器上实现,可以使用第三方javaScript库实现,在页面引入evensource.js就可以实现。
evensource.js下载地址:
https://github.com/EventSource/eventsource