Web服务端通过SSE推送消息给浏览器客户端的实现方案(附详细代码和仓库地址)

本文链接：https://blog.csdn.net/qq_37883866/article/details/141760810

1、SSE（Server-Sent Events）简介

Server-Sent Events (SSE) 是一种基于 HTTP 协议的服务器推送技术，允许服务器通过单个持久连接向客户端发送实时更新。客户端使用标准的 EventSource API 来接收服务器推送的事件，这种通信方式非常适合实时应用，如消息通知、股票行情更新、社交媒体更新等。

2、SSE 的工作原理

单向连接：SSE 建立的是单向通道，即服务器向客户端推送数据，客户端只能接收，不能发送。
持久连接：SSE 使用的是长连接（Long Polling），即连接一旦建立，将会持续存在，直到客户端或服务器关闭连接。
文本数据：SSE 通过 text/event-stream MIME 类型传输数据，数据是纯文本格式。
自动重连：如果连接中断，EventSource 会自动尝试重新连接，确保客户端能够接收后续的推送。

3、SSE 与客户端轮询的区别和优势比较

客户端轮询（Client Polling）是一种传统的客户端从服务器请求数据的方式。客户端会定期向服务器发送请求，检查是否有新数据可用。

区别

连接方式：
SSE：建立后服务器主动推送数据，连接是持久的，数据在有更新时实时传递。
轮询：客户端定期发送请求获取数据，连接是间歇性的。

实时性：
SSE：数据几乎是实时推送的，延迟极低。
轮询：数据获取延迟取决于轮询的频率，频率高则延迟低，但频率低可能导致数据延迟。

网络和服务器负载：
SSE：由于是单个持久连接，减少了频繁的请求与响应开销，降低了服务器负载。
轮询：频繁的请求会增加服务器和网络的负担，尤其是在轮询频率较高时。

连接控制：
SSE：自动处理连接中断和重连，客户端实现简单。
轮询：需要客户端定期发起请求，且如果请求频率不当，可能导致资源浪费。

数据传输效率：
SSE：只在有数据更新时推送，传输效率高。
轮询：即使没有数据更新，客户端也会定期请求，效率低下。

优势

SSE 的优势：
更高效的网络和服务器资源利用率。
实时性更高，延迟更低。
实现简单，特别是在浏览器环境中，支持自动重连和事件处理。
适合需要频繁更新但客户端无需响应的场景。

客户端轮询的优势：
在不支持 SSE 的环境下仍然可以使用。
实现和理解相对简单，兼容性更好。

4、SSE简单实现(单机应用Demo)

演示效果

在这里插入图片描述

SSE-Demo仓库地址

https://github.com/deepjava-gm/SSE-Demo.git

下面直接贴代码：

前端实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE 用户消息推送 Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            text-align: center;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            color: white;
            background-color: #007bff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        #messages {
            margin-top: 20px;
        }
        .message {
            background-color: #f1f1f1;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
        }
        .status {
            margin-top: 10px;
            font-weight: bold;
        }
        .success {
            color: green;
        }
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <h1>SSE 用户消息推送 Demo</h1>
    <div class="container">
        <!-- 连接部分 -->
        <div class="form-group">
            <label for="userId">用户 ID:</label>
            <input type="text" id="userId" placeholder="请输入您的用户 ID">
            <br><br>
            <button onclick="connect()">连接</button>
        </div>
        <div id="connectionStatus" class="status"></div>

        <!-- 消息发送部分 -->
        <div class="form-group">
            <label for="targetUserId">目标用户 ID:</label>
            <input type="text" id="targetUserId" placeholder="请输入目标用户 ID">
        </div>
        <div class="form-group">
            <label for="message">消息内容:</label>
            <input type="text" id="message" placeholder="请输入要发送的消息">
        </div>
        <button onclick="sendMessage()">推送消息</button>

        <!-- 消息显示部分 -->
        <div id="messages"></div>
    </div>

    <script>
        let eventSource;
        let currentUserId = '';

        function connect() {
            const userId = document.getElementById('userId').value;
            const connectionStatus = document.getElementById('connectionStatus');

            if (!userId) {
                alert('请输入用户 ID');
                return;
            }

            // 显示连接状态为“连接中”
            connectionStatus.textContent = '已连接...';
            connectionStatus.className = 'status';

            eventSource = new EventSource(`http://localhost:9999/sse/connect/${userId}`);
            currentUserId = userId; // 保存当前用户 ID

            eventSource.onopen = function() {
                connectionStatus.textContent = '接收成功';
                connectionStatus.className = 'status success';
            };

            eventSource.onmessage = function(event) {
                try {
                    // 解析 JSON 消息
                    const data = JSON.parse(event.data);
                    const newElement = document.createElement('div');
                    newElement.className = 'message';
                    newElement.innerText = `用户 ${data.senderId} 接收的消息: ${data.message}`;
                    document.getElementById('messages').appendChild(newElement);
                } catch (e) {
                    console.error('消息解析错误:', e);
                }
            };

            eventSource.onerror = function(event) {
                connectionStatus.textContent = '连接失败，请检查网络或服务器';
                connectionStatus.className = 'status error';
                console.error("连接错误: ", event);
                eventSource.close();
            };
        }

        function sendMessage() {
            const targetUserId = document.getElementById('targetUserId').value;
            const message = document.getElementById('message').value;
            
            if (!targetUserId || !message) {
                alert('请填写目标用户 ID 和消息内容');
                return;
            }

            // 发送 GET 请求推送消息
            fetch(`http://localhost:9999/sse/push/${targetUserId}?message=${encodeURIComponent(message)}`, {
                method: 'GET'
            }).then(response => {
                if (response.ok) {
                    console.log('消息发送成功');
                } else {
                    console.log('消息发送失败');
                }
            }).catch(error => {
                console.error('发送错误:', error);
                alert('消息发送失败');
            });
        }
    </script>
</body>
</html>

后端实现：

启动类：

package io.github.deepjava;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.util.concurrent.ConcurrentHashMap;

@SpringBootApplication
public class SseDemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(SseDemoApplication.class);
    }


    // 注入一个全局缓存 用来保存不同用户的SSE连接信息
    @Bean("userSSEMap")
    public ConcurrentHashMap<String, SseEmitter> getUserSSEMap(){
        return new ConcurrentHashMap<>();
    }

}

Controller：

package io.github.deepjava.controller;

import io.github.deepjava.service.SseService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import javax.annotation.Resource;
import java.util.concurrent.ConcurrentHashMap;

@RestController
@RequestMapping("/sse")
@CrossOrigin(origins = "*")
@Slf4j
public class SseController {

    @Resource(name = "userSSEMap")
    private ConcurrentHashMap<String, SseEmitter> userSSEMap;

    @Resource
    private SseService sseService;

    // 连接方法：为用户 ID 注册 SSE 链接
    @GetMapping("/connect/{userId}")
    public SseEmitter connect(@PathVariable String userId) {
        SseEmitter emitter = new SseEmitter(0L); // 设置超时时间为无限大
        userSSEMap.put(userId, emitter);
        // 连接正常关闭回调 移除连接
        emitter.onCompletion(() -> {
            userSSEMap.remove(userId);
            log.info("连接正常关闭回调 移除连接");
        });
        // 连接超时回调 移除连接
        emitter.onTimeout(() -> {
            userSSEMap.remove(userId);
            log.info("连接超时回调 移除连接");

        });
        // 连接出错回调 移除连接
        emitter.onError((e) -> {
            userSSEMap.remove(userId);
            log.info("连接出错回调 移除连接");
        });
        log.info("连接成功！");
        return emitter;
    }

    // 推送方法：根据用户 ID 发送消息
    @GetMapping("/push/{userId}")
    public void push(@PathVariable String userId, @RequestParam String message) {
        sseService.extracted(userId, message);
    }

}

Service：

package io.github.deepjava.service;


import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import javax.annotation.Resource;
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;

@Service
@Slf4j
public class SseService {

    @Resource(name = "userSSEMap")
    private ConcurrentHashMap<String, SseEmitter> clients;

    public void extracted(String userId, String message) {
        SseEmitter emitter = clients.get(userId);
        if (emitter != null) {
            try {
                // 创建包含用户 ID 和消息内容的 JSON 对象
                String jsonMessage = String.format("{\"senderId\":\"%s\", \"message\":\"%s\"}", userId, message);
                emitter.send(jsonMessage);
                log.info("消息推送成功！");
            } catch (IOException e) {
                clients.remove(userId);
                log.info("消息推送失败！");
            }
        }
    }

}

配置文件：application.properties

spring.application.name=sse-demo
server.port=9999

Maven的pom文件：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.1</version>
    </parent>

    <groupId>org.example</groupId>
    <artifactId>SSE-Demo</artifactId>
    <version>1.0-SNAPSHOT</version>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--lombok  -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>


    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>

</project>

5、SSE简单实现(分布式应用Demo)

注意：
SSE 连接（如 SseEmitter）是持久化的、与具体服务器实例相关联的动态对象，无法直接存储在 Redis 等外部存储中。Redis 主要用于消息传递和共享数据，但无法直接管理活跃的连接。所以下面方案仅使用 Redis 进行消息广播。

解决方案概述
为了在分布式环境中实现 SSE，通常采用以下架构：

每个服务器实例维护本地的 SSE 连接：每个实例只管理与自身连接的客户端。
使用 Redis 进行消息广播：当需要向特定用户推送消息时，将消息发布到 Redis 频道。所有实例订阅该频道，并检查自己是否有需要向某个用户推送的连接。
用户与实例的映射：使用 Redis 存储用户与服务器实例的映射信息，确保消息能够被正确路由到处理该用户连接的实例。
虽然无法完全将连接信息存储在 Redis 中，但通过这种方式，可以有效地在分布式环境中管理 SSE 连接和消息推送。

这里只贴主要的后端代码：完整代码去下载仓库代码看。

SSE-Demo仓库地址

https://github.com/deepjava-gm/SSE-Demo.git

关键代码

redis配置：

 // 配置redis的序列化
    @Bean
    public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {
        RedisTemplate<String, Object> template = new RedisTemplate<>();
        template.setConnectionFactory(factory);
        template.setKeySerializer(new StringRedisSerializer());
        template.setValueSerializer(new StringRedisSerializer());
        return template;
    }


    @Bean
    public RedisMessageListenerContainer redisMessageListenerContainer(RedisConnectionFactory connectionFactory) {
        RedisMessageListenerContainer container = new RedisMessageListenerContainer();
        container.setConnectionFactory(connectionFactory);
        return container;
    }

redis监听主题：

package io.github.deepjava.controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.data.redis.connection.MessageListener;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.listener.ChannelTopic;
import org.springframework.data.redis.listener.RedisMessageListenerContainer;
import org.springframework.data.redis.listener.adapter.MessageListenerAdapter;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import javax.annotation.PostConstruct;
import javax.annotation.Resource;
import java.io.IOException;
import java.nio.charset.StandardCharsets;
import java.util.concurrent.ConcurrentHashMap;

@RestController
@RequestMapping("/dis/sse")
@CrossOrigin(origins = "*")
@Slf4j
public class DistributedSseController {

    @Resource(name = "userSSEMap")
    private ConcurrentHashMap<String, SseEmitter> userSSEMap;

    @Resource
    private RedisTemplate<String, String> redisTemplate;

    @Resource
    private RedisMessageListenerContainer redisMessageListenerContainer;

    private final ChannelTopic topic = new ChannelTopic("sse-messages");

    @PostConstruct
    public void init() {
        // 订阅 Redis 频道
        redisMessageListenerContainer.addMessageListener(
                new MessageListenerAdapter((MessageListener) (message, pattern) -> {
                    String payload = new String(message.getBody(), StandardCharsets.UTF_8);

                    // 假设消息的格式为 "userId:message"
                    String[] parts = payload.split(":", 2);
                    if (parts.length == 2) {
                        String userId = parts[0];
                        String userMessage = parts[1];
                        // 发送消息给本地的 SSE 连接
                        SseEmitter emitter = userSSEMap.get(userId);
                        if (emitter != null) {
                            try {
                                String jsonMessage = String.format("{\"senderId\":\"%s\", \"message\":\"%s\"}", userId, userMessage);
                                emitter.send(jsonMessage);
                            } catch (IOException e) {
                                emitter.completeWithError(e);
                                userSSEMap.remove(userId);
                            }
                        }
                    }
                }), topic);
    }

    // 连接方法：为用户 ID 注册 SSE 链接
    @GetMapping("/connect/{userId}")
    public SseEmitter connect(@PathVariable String userId) {
        SseEmitter emitter = new SseEmitter(0L); // 设置超时时间为无限大
        userSSEMap.put(userId, emitter);
        // 连接正常关闭回调 移除连接
        emitter.onCompletion(() -> {
            userSSEMap.remove(userId);
            log.info("连接正常关闭回调 移除连接");
        });
        // 连接超时回调 移除连接
        emitter.onTimeout(() -> {
            userSSEMap.remove(userId);
            log.info("连接超时回调 移除连接");

        });
        // 连接出错回调 移除连接
        emitter.onError((e) -> {
            userSSEMap.remove(userId);
            log.info("连接出错回调 移除连接");
        });
        log.info("连接成功！");
        return emitter;
    }


    @GetMapping("/push/{userId}")
    public void push(@PathVariable String userId, String message) {
        // 将消息发布到 Redis 频道
        redisTemplate.convertAndSend(topic.getTopic(), userId + ":" + message);
    }
}

方案说明

SSE 连接管理：
使用 ConcurrentHashMap<String, SseEmitter> 存储用户的连接信息，每个服务器实例只维护与自身连接的客户端。
connect 方法用于创建 SSE 连接并保存到本地缓存。

Redis 消息广播：
通过 Redis 的发布订阅(Pub/Sub) 机制，所有实例订阅同一个频道（sse-messages）。
push 方法将消息发布到 Redis 频道，所有订阅了该频道的实例都会收到消息，并检查是否有对应的连接需要推送。

6、生产实践

上面都是Demo级别的东西。如果想真正应用到生产环境，还有几点事情需要特别注意。否则坑多多~

①、nginx代理SSE接口的情况下，需要添加额外的Nginx配置以支持SSE流式传输。

场景示例：
分布式系统一般的架构：
浏览器 -> Nginx代理 -> 网关(集群) -> 应用(集群)

假如我们的应用名称叫sse-server。部署在ip为 192.168.200.200机器上，端口号为8888。
我们的网关应用部署在ip为 192.168.200.201机器上，端口号9999。
我们的Nginx应用部署在ip为 192.168.200.202机器上，端口号80。

我们在sse-server应用上开发一个SSE连接的接口提供给前端调用，接口地址: http://192.168.200.200:8888/init?userId=xxx
（这里为了简化所以用户id通过url传给后台，实际上应该前端带token访问网关，网关鉴权后处理用户id转发到sse-server的http://192.168.200.200:8888/init接口，这样才算比较正常的获取调用SSE连接用户id的方式，这里做了简化）

网关转发接口： http://192.168.200.200:9999/sse-server/init?userId=xxx === >>> http://192.168.200.200:8888/init?userId=xxx

nginx再配置代理网关的接口： http://192.168.200.202/initSSE?userId=xxx ===>>> http://192.168.200.200:9999/sse-server/init?userId=xxx

那么前端最终连接SSE的url是：http://192.168.200.202/initSSE?userId=xxx

重点来了：
nginx的缓冲机制会将相应数据积累到缓冲大小再转发。如果在sse请求中服务端通过长连接持续推送数据，而每一块数据通过/n/n分割。如果nginx启用了缓冲，则会导致将sse的多块数据剪裁、拼接到缓冲长度进行发送，从而出现消息内容被截断的现象。
更关键的是：nginx的代理缓存功能与sse的实时推送需求相违背，需要在对应的代理接口位置关闭缓存。

还有一点：
增加时间限制：确保proxy_read_timeout和proxy_send_timeout设置的时间足够长，以保持连接稳定

下面贴出nginx的代理配置:

# 代理网关的sse接口
location /initSSE {
		proxy_pass http://192.168.200.202:9999/sse-server/init;
		proxy_buffering off;  # 禁用缓冲
		chunked_transfer_encoding off;  # 禁用分块传输编码
		proxy_cache off;  # 禁用缓存
		proxy_set_header Connection '';  # 保持连接
		proxy_http_version 1.1;  # 使用HTTP 1.1
		proxy_read_timeout 3600s;  # 读超时时间
		proxy_send_timeout 3600s;  # 写超时时间
	}

当然如果没有集群负载均衡的需求也可以不走网关直接代理到具体的某个sse-server服务端口也是可以的。

下面解释下SSE相关的Nginx配置：

proxy_buffering off;
禁用缓冲意味着Nginx不会等待接收完整的响应体再发送给客户端，而是接收到数据就立即转发。这对于SSE是必要的，因为SSE要求事件一旦产生就需要立刻发送给客户端。

chunked_transfer_encoding off;
禁用分块传输编码是因为SSE协议通过文本形式发送事件，并且每个事件之间由特殊的换行符分隔。如果启用分块传输编码，则会导致事件之间的分隔符被修改或丢失，从而破坏SSE格式。

proxy_cache off;
禁用缓存是因为SSE通常用于发送实时更新的数据，这些数据不应该被缓存。

proxy_set_header Connection '';
设置Connection头为空字符串（或者也可以设为upgrade），这有助于通知后端服务器保持连接开放，以便支持持续的事件流。

proxy_http_version 1.1;
指定使用HTTP/1.1协议版本，这是SSE所基于的协议。HTTP/1.1支持持久连接（keep-alive），这对于维持SSE连接是必要的。

proxy_read_timeout 3600s;
设置较长的读取超时时间，这是因为SSE可能会有很长一段时间没有新的事件发生。如果超时设置得太短，连接可能会被意外关闭。

proxy_send_timeout 3600s;
设置较长的写入超时时间，确保在发送大量数据时不会因为超时而中断连接,建议设置成和后台token过期时间一致，并且前端页面刷新的时候最好重新连接一下SSE接口。

还需要注意
除了Nginx之外，任何位于客户端和后端服务器之间的代理或网关都可能对SSE数据进行缓存或处理，从而导致前端无法接收到实时更新。如果你是外网应用使用了ip映射之类的技术，对于ip映射的配置可能也要关闭缓存之类的设置，否则SSE也会收不到推送消息。

②、HTTP/1.1规范下浏览器创建长连接数的限制问题

浏览器并行连接数限制：
根据 HTTP/1.1 规范，同一域下的并行连接数限制为 6 个。因此，在使用 SSE 时，如果同时建立了多个连接(同一域名，同一端口下，超过6个连接)，可能会导致连接失败或延迟。

为什么会有并行连接数限制？

资源限制：每个TCP连接都需要消耗一定的系统资源（如文件描述符、内存等）。如果每个浏览器窗口都无限制地建立连接，可能会导致资源耗尽。
网络性能：过多的连接可能会导致网络拥塞，从而降低整体的网络性能。限制连接数可以帮助平衡资源使用和网络带宽。
历史原因：在HTTP/1.1时代，为了提高性能，引入了持久连接（keep-alive）。但为了防止滥用，浏览器厂商对每个域名下的并发连接数进行了限制。

如何处理浏览器并行连接数限制？
建议通过业务代码处理，把多种消息推送通过同一个SSE连接推送，给消息加Type让前端区分不同的业务类型。
也可升级为HTTP2.0(但是这种方式需要配置安全证书，比较麻烦而且域名也需要money)。

写在最后

最终这个SSE消息推送的业务方案并没有真正落地生产系统，至于原因嘛~，因为是公网应用，客户出于安全考虑，nginx部署的机器和所有内网ip都不互通，只为网关所在的内网机器映射了一个代理的ip给nginx所在机器调用。由于客户的映射规则导致SSE连接虽然能连上，但是无法接收到消息，而且安全规定映射规则无法变更。

考虑到该业务是推送待办数量这种实时性要求不高的消息，最终还是采用了前端每1分钟轮询一次获取待办数量的接口这种主动拉取数据的方式。

网上很多Demo级别的技术文章或者视频，演示起来，自己跟着做起来都非常轻松愉快，但是真正上生产，可能就会遇到各种各样的问题。所以生产最佳实践之类的博客真的可遇不可求~ 大多数都是像本篇一样的Demo级别。Demo级别的方案距离落地生产，并逐步优化为最佳实践还有很长的路要走~

像本篇这种Demo级别的文章，如果后续不了解中间件的映射问题处理，包括安全方面的ip映射导致的问题，Demo很难落地生产~ 实践是检验真理的唯一标准，这句话真的用在哪都没问题~

听说ChatGPT使用的就是SSE技术推送AI的生成结果，网上也有不少Demo级别模仿ChatGPT的SSE推送的Demo，大多数都是localhost:8080/xxx之类的但凡多个Nginx代理没配置好，可能就推不了了