JavaScript中的服务器发送事件：无需WebSocket的实时通信

什么是服务器发送事件（Server-Sent Events），为什么你需要它们？

\n\n

想象一下：你打开一个汇率网站，美元汇率在你眼前实时变化——无需刷新页面，无需点击按钮。或者你在等待服务器处理一个大文件的结果，突然出现一行文字：“已完成70%”。这是如何实现的？最优雅的方式之一就是服务器发送事件（Server-Sent Events，简称SSE）。

\n\n

SSE是一种技术，允许服务器主动向客户端发送数据，一旦数据可用即可发送。与WebSocket不同，SSE仅支持单向通信——从服务器到客户端。但这正是它的超能力所在：它极其简单、高效，非常适合客户端只需接收更新的场景。

\n\n

在本文中，我们将探讨如何在JavaScript中使用服务器发送事件，编写可运行的代码，并了解何时SSE是最佳选择，何时应考虑WebSocket。准备好了吗？我们开始吧！

\n\n

服务器发送事件（SSE）是如何工作的？

\n\n

从技术上讲，SSE只是一个HTTP连接，服务器在发送响应后不会关闭它。相反，服务器使用特殊的text/event-stream格式分块发送数据。客户端（浏览器）通过EventSource对象监听此连接，并在收到每条新消息时生成事件。

\n\n

典型的服务器响应如下所示：

\n\n

data: {"message": "你好！", "timestamp": 1700000000}\n\ndata: {"message": "新通知", "timestamp": 1700000001}

\n\n

每条消息以data:开头，后跟一个空格和内容本身。消息之间用两个换行符\\n\\n分隔。服务器还可以发送标识符（id:）和事件类型（event:），但最小集合是data。

\n\n

客户端部分更简单：

\n\n

const eventSource = new EventSource('/events');\n\neventSource.onmessage = (e) => {\n    console.log('收到数据：', e.data);\n};\n\neventSource.onerror = (e) => {\n    console.error('连接错误', e);\n};

\n\n

就这样！无需复杂的握手，无需库——浏览器会在连接断开时自动重新连接，自动处理通信中断。这就是服务器发送事件的主要魔力所在。

\n\n

SSE vs WebSocket：何时选择哪个？

\n\n

初学者常常认为：“既然SSE更简单，那它总是更好的选择。”但事实并非如此。每种技术都有其适用的场景。让我们来比较一下。

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

博客

如何在30分钟内用C++编写REST API：初学者指南

Java HTTP客户端：请求处理高级技术

如何通过Swift面试：高级问题

书籍推荐

Python 3 标准库：实例参考手册

专业C++：高级技术

机器学习与Java：从基础到生产部署

Swift (iOS/macOS): 技巧与最佳实践

推荐阅读

Go语言异步编程：开发者完全指南 2024年十大C# Web开发框架 如何在2025年将TypeScript接口的键作为字符串数组获取 如何在 Angular 组件模板中选择元素：TypeScript 完整指南 C# 代码审查：检查什么以及如何向新手提供反馈

特性	SSE	WebSocket
数据方向	仅服务器 → 客户端	双向
实现简单性	非常简单（原生浏览器支持）	中等（需要库）
自动重连	内置	需要手动实现
浏览器支持	所有现代浏览器（除IE外）	所有现代浏览器