SSE是什么,不清楚的进来瞅瞅


SSE是什么,不清楚的进来瞅瞅

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

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!