SSE server send event 与 EventSource使用，实现服务器端消息推送

最新推荐文章于 2024-03-07 16:45:57 发布

xgjj68163

最新推荐文章于 2024-03-07 16:45:57 发布

阅读量1.2k

点赞数 1

分类专栏：框架文章标签：消息推送 Powered by 金山文档

本文链接：https://blog.csdn.net/u014161595/article/details/129054453

版权

框架专栏收录该内容

27 篇文章 0 订阅

订阅专栏

Server Send Event 是服务器主动向客户端推送消息的一种技术。消息类型为“text/event-stream”。

chrome edge浏览器支持。

服务器端实现

注意produces是“text/event-stream”，方法是"/push”,客户端EventSoure在new时需要和方法名称一致，即监听的此方法，每个客户端最多可以有6个event-stream链接，服务器端返回的数据前必须加“data:”。

package com.hj.ServerSendEvent;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Random;

/**
 * describe
 *
 * @author huangjuan
 * @date 2023/2/15 9:59
 */
@Controller
public class ServerSentEventController {
    @RequestMapping(value = "/push",produces = "text/event-stream")
    @ResponseBody
    public String pushToBrowser() {
        Random random = new Random();
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            throw new RuntimeException(e);
        }
        return "data: server send event push message test:" + random.nextInt() + "\n\n";
    }
}

页面实现

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<div>服务器端推送测试</div>
<div id="serverSendEventDiv"></div>
</body>
<script type="text/javascript">
    if(window.EventSource) {
        const source = new EventSource("push");
        let s = '';
        // 监听打开连接
        source.addEventListener('open', function (e) {
            console.log("连接打开")
        }, false);
        source.addEventListener('message', function (e) {
            s += e.data + '<br/>';
            document.getElementById("serverSendEventDiv").innerHTML = s;
        })
        // 监听关闭连接
        source.addEventListener('close', function (e) {
            if (e.readyState === EventSource.CLOSED) {
                console.log("连接关闭")
            } else {
                console.log(e.readyState)
            }
        }, false);
        source.addEventListener("error", function(err) {
            console.log(JSON.stringify(err))
            console.log(err)
            // 类似的返回信息验证，这里是实例
            err && err.status === 401 && console.log('not authorized')
        })
    } else {
        alert("你的浏览器不支持sse")
    }
</script>

项目结构

执行效果

xgjj68163

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SSE server send event 与 EventSource使用，实现服务器端消息推送

Server Send Event 是服务器主动向客户端推送消息的一种技术。消息类型为“text/event-stream”。chrome edge浏览器支持。
复制链接

扫一扫