网站导航
> 技术文档 > Server-Sent Events（SSE）技术详解：一种轻量级的服务器推送利器_server-sent events翻译

Server-Sent Events（SSE）技术详解：一种轻量级的服务器推送利器_server-sent events翻译

网友: 技术文档 2025-09-03 05:16:12

在现代Web开发中，前后端通信方式是一个绕不开的话题。传统的HTTP协议通信是典型的请求-响应模型：客户端（比如浏览器）发起请求，服务端处理并返回结果。这种模型满足了绝大部分Web应用的需求，但对于需要服务器主动推送数据的场景，传统HTTP就显得力不从心。

比如：新浪、B站、知乎等大型平台在用户登录后都会显示实时站内消息，如点赞通知、评论提醒等。这些信息的更新必须是**“实时”或“准实时”**的，也就是不依赖用户主动刷新，而是由服务器主动通知。这种需求该如何实现？

今天我们就来系统学习一项特别实用、极具性价比的服务器端推送技术：SSE（Server-Sent Events）。

一、HTTP 的局限性与推送需求

单向通信模型

传统HTTP通信的模式是单向的：

  • 客户端通过HTTP请求发起连接
  • 服务器处理请求后返回响应
  • 连接关闭，通信结束

这样的通信模型无法支持服务端主动向客户端推送信息。但在如今的前端应用中，越来越多的功能需要“服务器主动告诉客户端”：

  • 评论点赞提醒
  • 在线状态监测
  • 实时统计数据展示
  • 新闻自动刷新

这些都要求服务端具备“主动发言”的能力。

二、推送的解决方案概览

为了解决服务端推送问题，开发者们探索出了几种方案：

1. 轮询（Polling）

客户端定时（如每5秒）向服务端发送请求，询问是否有新数据。

  • 优点：实现简单
  • 缺点：请求频繁，资源浪费，存在延迟

2. 长轮询（Long Polling）

客户端发起请求后，服务端不会立即响应，而是等到有数据再返回。客户端收到响应后，立即再发起新请求。

  • 优点：减少无效请求，相对更实时
  • 缺点：连接频繁开关，对服务器压力大

3. WebSocket

WebSocket 是一种独立协议，建立之后可双向通信。

  • 优点：双向通信，效率高
  • 缺点：实现复杂、依赖协议升级、连接维护成本高

4. Server-Sent Events（SSE）

SSE 是基于HTTP协议的一种单向通信技术：服务端可以主动向客户端推送事件。

  • 优点：实现简单、兼容性好、轻量、支持断线重连
  • 缺点：只能单向推送，IE浏览器不支持

三、SSE 是什么？

定义

SSE（Server-Sent Events），翻译为“服务器发送事件”，是一种HTML5标准中定义的通信方式，允许服务器通过HTTP连接，以事件流的方式持续不断地向客户端发送数据。

本质

SSE 是一种 基于文本流的长连接机制，服务器向浏览器推送的消息采用特定格式进行组织：

data: 消息内容\\n\\n

多个消息可以按时间顺序持续推送，而客户端用事件监听的方式来接收。

四、SSE 的优势

  1. 轻量级
    与 WebSocket 相比，SSE 不需要复杂的握手流程，采用普通HTTP协议即可。
  2. 服务端支持广泛
    几乎所有Web服务器（Tomcat、Jetty、Nginx等）都支持 SSE，因为它就是标准HTTP响应。
  3. 浏览器内置支持
    除了 Internet Explorer，现代浏览器都支持 SSE，无需安装插件或额外工具。
  4. 内置断线重连机制
    SSE 协议天然支持客户端自动重连，当连接异常断开时，浏览器会自动尝试重新连接。

五、SSE 与 WebSocket 对比

特性 SSE WebSocket 通信方向 单向（服务端 → 客户端） 双向（服务端 ↔ 客户端） 协议基础 HTTP 新协议，需协议升级 实现复杂度 低，简单几行代码 高，需要编写握手逻辑和状态维护 浏览器兼容性 主流浏览器支持（IE除外） 主流浏览器支持 服务端要求 标准HTTP服务器即可 需要支持WebSocket协议 应用场景 实时通知、消息提醒、事件推送等 聊天、游戏、双向交互

结论：如果只需要服务器向浏览器单向推送，SSE 是首选。

六、SSE 的数据格式说明

服务器向客户端发送的事件流，格式必须严格遵循以下规范：

data: 推送内容（可为字符串、JSON等）event: 自定义事件名称（可选）id: 唯一消息ID（可选）retry: 重连间隔（毫秒，可选）（每条消息之间用两个换行符隔开）

示例：

retry: 2000data: {\"type\":\"notification\", \"message\":\"你收到一条新评论\"}\\n\\n

七、SSE 的两种通信模式

模式一：服务端事件流（流式推送）

服务端采用死循环，持续不断地推送消息给客户端。适用于状态持续变化的场景。

示例（Java Spring Boot）：

@GetMapping(value = \"/sse/stream\", produces = \"text/event-stream;charset=UTF-8\")public void stream(HttpServletResponse response) throws IOException { response.setContentType(\"text/event-stream;charset=UTF-8\"); PrintWriter writer = response.getWriter(); while (true) { writer.write(\"data: 当前时间是 \" + LocalDateTime.now() + \"\\n\\n\"); writer.flush(); Thread.sleep(1000); }}

模式二：自动重连（定时推送）

服务端返回一条数据后就断开连接，客户端会在 retry 时间间隔后自动重连。适用于数据间歇性变化的场景。

@GetMapping(value = \"/sse/retry\", produces = \"text/event-stream;charset=UTF-8\")public void retryPush(HttpServletResponse response) throws IOException { PrintWriter writer = response.getWriter(); writer.write(\"retry: 2000\\n\"); writer.write(\"data: 当前时间是 \" + LocalDateTime.now() + \"\\n\\n\"); writer.flush();}

客户端每2秒就会自动重连，并重新获取一次数据。

八、客户端代码示例（JavaScript）

<div id=\"sse-div\"></div><script> // 创建事件源对象，连接到服务器 SSE 接口 const sse = new EventSource(\'/sse/stream\'); // 接收服务器发送的消息 sse.onmessage = function(evt) { document.getElementById(\"sse-div\").innerText = evt.data; }; // 可选：错误监听 sse.onerror = function(e) { console.error(\"SSE连接错误\", e); };</script>

EventSource 是现代浏览器原生支持的JavaScript对象，无需额外依赖。

九、SSE 开发要点总结

  1. 响应头设置

    Content-Type: text/event-stream;charset=UTF-8

  2. 返回格式必须以 data: 开头

  3. 每条消息之间必须有两个换行符 \\n\\n

  4. 支持断线重连，retry: 可控制重连间隔

  5. JSON 数据需先序列化为字符串，再以 data: 包装返回

十、SSE 应用场景推荐

应用类型 是否适合使用 SSE 实时通知 适用 站内消息提醒 适用 数据可视化刷新 适用 实时在线人数统计 适用 在线聊天 不适用（应使用 WebSocket） 协同编辑 不适用（应使用 WebSocket）

十一、常见问题与注意事项

Q1: SSE 是否可以发送 JSON 数据？

可以，只需将 JSON 字符串通过 data: 包装发送即可：

String json = \"{\\\"type\\\":\\\"comment\\\",\\\"content\\\":\\\"你收到一个点赞\\\"}\";writer.write(\"data: \" + json + \"\\n\\n\");

Q2: SSE 是否可发送多行数据？

可以，每行都使用 data: 开头：

data: 第一行内容data: 第二行内容\\n\\n

Q3: 客户端如何设置接收间隔？

客户端不需要手动控制，由服务端发送 retry: 控制，单位为毫秒。例如：

retry: 5000

表示如果5秒内未收到新数据，则客户端自动重连。

十二、总结

Server-Sent Events（SSE）是一种轻量、高效、简单的服务器推送技术，非常适合用于实现浏览器端的实时通知、消息提醒、监控刷新等功能。它不需要协议升级，不依赖额外的库或插件，只要是现代浏览器和标准Web服务器，就可以直接部署使用。

相比WebSocket，SSE更适用于单向通信场景，开发成本低、部署门槛低。它是现代Web开发者值得掌握的一项基础能力。

推荐实践：

  • 若你的业务只是单向推送，比如：消息提醒、任务进度、系统监控，优先考虑使用 SSE。
  • 若你需要实现复杂的双向交互，如：聊天室、在线白板，请使用 WebSocket。

希望本文能帮你深入理解和掌握 SSE 技术，让你的Web应用实时性更强、用户体验更好。

网络标签：

相关问题