SSE是什么,不清楚的进来瞅瞅
SSE(Server-Sent Events):通俗解释起来就是一种基于HTTP的,以流的形式由服务端持续向客户端发送数据的技术。
概念
HTML5 服务器发送事件(Server-Sent Events)
Server-Sent 事件 – 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
例子:Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。
实现
后端
实现比较简单,比较适合后台向前台通知的场景,比如消息推送
public class SSE extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置内容类型
resp.setContentType(MediaType.TEXT_EVENT_STREAM_VALUE);
//设置编码 必须utf-8
resp.setCharacterEncoding("utf-8");
for (int i = 0; i < 5; i++) {
//指定事件标识
//注意格式
resp.getWriter().write("event:men");
//响应数据 格式必须为 data:数据nn
resp.getWriter().write("data:"+i+"nn");
resp.getWriter().flush();//每次需要flush到前台
try {TimeUnit.SECONDS.sleep(1);} catch (InterruptedException e) {e.printStackTrace();}
}
}
}
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
//依赖H5
//设置事件服务上下文
var event = new EventSource("sse");
event.onmessage=function(e,f) {
console.log("获取到",e.data,e);
if(e.data==3){
event.close();
}
}
//默认会重复获取信息,可以通过判断停止事件
event.addEventListener("me",function(e){
console.log("获取到",e.data,e);
if(e.data==3){
event.close();
}
});
</script>
</body>
</html>
原文始发于微信公众号(云户):SSE是什么,不清楚的进来瞅瞅
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/25895.html