SSE(Server-send Events) 服务器实时推送

Server-send Events（SSE）：是一种基于Http协议轻量级服务器主动向客户端单向推送实时数据的技术，而WebSocket是基于WebSocket协议双向通信技术，工作原理是客户端通过发送一个特殊的 HTTP GET 请求到服务器，请求中包含 Accept: text/event-stream 头，表明客户端期望接收 SSE 数据流。

SSE响应流字段介绍：

event: <event_name>：可选字段，用于指定事件的名称，message是默认的事件名称。

data：必须字段，包含事件的数据内容，可以有多行，每行都以data:开头。

id：可选字段，提供一个唯一的标识符给事件，可用于断线重连和消息追踪。

retry：可选字段，指定客户端在连接断开后重连的间隔时间。

前端示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE Client</title>
</head>

<body>
    <ul id="messages"></ul>
    <script>
        const eventSource = new EventSource('http://localhost:80/rhxy/sse');

        eventSource.onmessage = function (event) {
            const messagesList = document.getElementById('messages');
            const newMessage = document.createElement('li');
            newMessage.textContent = `Received message: ${event.data}`;
            messagesList.appendChild(newMessage);
        };

        eventSource.onerror = function (error) {
            console.error('EventSource failed:', error);
        };
    </script>
</body>

</html>

后端示例：

@CrossOrigin
    @GetMapping(value = "/sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    private void sendEvents(HttpServletResponse response) {
        response.setContentType("text/event-stream");
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Connection", "keep-alive");
        response.setHeader("Cache-Control", "no-cache");

        for(int i = 0; i < 20; i++) {
            try {
                response.getWriter().write("id: " + i + "\n");
                response.getWriter().write("event: message\n");
                response.getWriter().write("retry: 10\n");
                response.getWriter().write("data: 我是第" + i + "个\n\n");
                response.getWriter().flush();
                Thread.sleep(1000);

                TimeUnit.SECONDS.sleep(1);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

　　效果图：

 

posted @ 2025-02-13 17:08  如幻行云  阅读(80)  评论(0)    收藏  举报