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

小半 • 2022年8月5日下午5:33 • Java • 阅读 293

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>