-
什么是SSE？
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。(复制菜鸟教程)
-
SSE与WebSocket差异
SSE与WebSocket有相似功能，都是用来建立浏览器与服务器之间的通信渠道。两者的区别在于：
WebSocket是全双工通道，可以双向通信，功能更强；SSE是单向通道，只能服务器向浏览器端发送。
WebSocket是一个新的协议，需要服务器端支持；SSE则是部署在HTTP协议之上的，现有的服务器软件都支持。
SSE是一个轻量级协议，相对简单；WebSocket是一种较重的协议，相对复杂。
SSE默认支持断线重连，WebSocket则需要额外部署。
SSE支持自定义发送的数据类型。
-
用处
我们在写后台管理页面的时候经常要做消息推送，发送通知，只用到单向通道。抛开第三方不说,我们可能会想到用ajax做轮询操作,这样的做法low不说，又不能做到实时推送，如果用WebSocket感觉又有点累赘，终上所属SSE是最佳的选择。在测试中发现不仅会自动重连，配置简单的特点。
书写SSE Api之前 先粘贴处客户端代码
首先是客户端代码 请新建一个index.html直接复制粘贴
<!DOCTYPE html>
<html lang="en">
<head>
<title>Server-Sent Events Demo</title>
<meta charset="UTF-8" />
<script>
window.addEventListener("load", function() {
var button = document.getElementById("connect");
var status = document.getElementById("status");
var output = document.getElementById("output");
var connectTime = document.getElementById("connecttime");
var source;
function connect() {
source = new EventSource("http://127.0.0.1:3000/callme"); //连接的Api
source.addEventListener("message", function(event) {
output.textContent = event.data;
//这是回调的信息
}, false);
source.addEventListener("connecttime", function(event) {
connectTime.textContent = "Connection was last established at: " + event.data;
}, false);
source.addEventListener("open", function(event) {
button.value = "Disconnect";
button.onclick = function(event) {
source.close();
button.value = "Connect";
button.onclick = connect;
status.textContent = "Connection closed!";
};
status.textContent = "Connection open!";
}, false);
source.addEventListener("error", function(event) {
if (event.target.readyState === EventSource.CLOSED) {
source.close();
status.textContent = "Connection closed!";
} else if (event.target.readyState === EventSource.CONNECTING) {
status.textContent = "Connection closed. Attempting to reconnect!";
} else {
status.textContent = "Connection closed. Unknown error!";
}
}, false);
}
if (!!window.EventSource) {
connect();
} else {
button.style.display = "none";
status.textContent = "浏览器不支持-请用现代浏览器"; //通常是IE浏览器不支持
}
}, false);
</script>
</head>
<body>
<input type="button" id="connect" value="Connect" /><br />
<span id="status">Connection closed!</span><br />
<span id="connecttime"></span><br />
<span id="output"></span>
</body>
</html>
上面客户端代码有4个监听事件 分别是
- message:用于接受SSE回调的信息。
- connecttime:上次连接事件。
- open:SSE连接成功回调事件。
- error:连接错误回调事件。
更多详关于上面详细请点击http://www.cnblogs.com/goody9807/p/4257192.html
PS。简单说，所谓SSE，就是浏览器向服务器发送一个HTTP请求，然后服务器不断单向地向浏览器推送“信息”（message）。这种信息在格式上很简单，就是“信息”加上前缀“data: ”，然后以“\n\n”结尾。
下面是JavaApi 写法。
private static final long serialVersionUID = 1L;
private final static int DEFAULT_TIME_OUT = 10 * 60 * 1000;
public static List<AsyncContext> actxList =new ArrayList<AsyncContext>();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/event-stream");
response.setCharacterEncoding("UTF-8");
request.setAttribute("org.apache.catalina.ASYNC_SUPPORTED", true);//注意这里
AsyncContext actx = request.startAsync(request,response);
actx.setTimeout(DEFAULT_TIME_OUT);
actx.addListener(new AsyncListener() {
@Override
public void onComplete(AsyncEvent asyncEvent) throws IOException {
// TODO Auto-generated method stub
System.out.println("zxczxc");
}
@Override
public void onError(AsyncEvent arg0) throws IOException {
// TODO Auto-generated method stub
System.out.println("[echo]event has error");
}
@Override
public void onStartAsync(AsyncEvent arg0) throws IOException {
// TODO Auto-generated method stub
System.out.println("[echo]event start:" + arg0.getSuppliedRequest().getRemoteAddr());
}
@Override
public void onTimeout(AsyncEvent arg0) throws IOException {
// TODO Auto-generated method stub
System.out.println(arg0);
}
});
actxList.add(actx);
PrintWriter out = actx.getResponse().getWriter();
out.println("data:" + new Date() + "\r\n"); //js页面EventSource接收数据格式：data：数据 + "\r\n"
out.flush();
}
image.png
可以看到上图 显示已经连接了(长连接)，如果你加个定时器的话它就能一直刷新时间了
但是在我们实际业务中我们不能用定时器已广播的形式发送，这样也没意义，正常的业务需求是应该是个别推送，像App的推送消息一样所以我们会用到AsyncContext
所以上面的代码我们用一个数组装了AsyncContext对象，以便后面respone用到
所以我们添加以下方法，以便能调用指定的AsyncContext方法
我们可以通过新建一个接口访问到这个方法以便触发推送效果
public void actionTest(){
//打印当前AsyncContext
System.out.println(actxList.size());
if(actxList.size()>0){
for(int i = 0;i<actxList.size();i++){
AsyncContext obj = actxList.get(i);
PrintWriter out;
try {
if (obj.getTimeout()>0){
out = obj.getResponse().getWriter();
out.println("data:" + new Date()+ "通过调用改变的" + "\r\n"); //js页面EventSource接收数据格式：data：数据 + "\r\n"
out.flush();
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
image.png
通过调用接口的方式去触发上面的方法，证实可以通过AsyncContext来实现点到点推送
后记
上面代码只是简单测试一下，以上代码还有很多优化的地方比如需要销毁过期的AsyncContext。
网友评论