HTML5 服务器发送事件(Server-Sent Events)使用详解
来源：互联网 2026-04-14 19:01:03服务器发送事件详解：EventSource的核心特性与应用 在构建现代Web应用时，实现服务器向客户端的实时信息推送，HTML5的服务器发送事件（Server-Sent Events，简称SSE）提供了一个优雅的解决方案。它使网页能够持续接收来自服务器的数据更新，为特定场景带来高效且简洁的实时通信能
服务器发送事件详解：EventSource的核心特性与应用
在构建现代Web应用时，实现服务器向客户端的实时信息推送，HTML5的服务器发送事件（Server-Sent Events，简称SSE）提供了一个优雅的解决方案。它使网页能够持续接收来自服务器的数据更新，为特定场景带来高效且简洁的实时通信能力。
EventSource的核心特性
SSE的核心接口EventSource具备以下关键特性，我们可以从几个方面来理解：
长期稳定更新的攒劲资源： >>>点此立即查看<<<
第一，单向通信。数据流方向固定为从服务器到客户端，客户端作为持续的订阅者，专心接收服务器推送的事件流。
第二，基于HTTP协议。EventSource建立在标准HTTP/HTTPS连接之上，利用长连接保持通信，但其本质依然是服务器向客户端的单向推送。
第三，擅长文本数据传输。该技术通常用于推送消息通知、实时日志或新闻更新等文本格式的内容。
第四，具备自动重连能力。这是一个实用的特性——当网络连接意外中断时，EventSource会自动在后台尝试重新连接，开发者无需手动编写复杂的重连逻辑。
EventSource的使用场景
基于这些特性，EventSource非常适合需要服务器主动下发实时信息，而客户端无需频繁上报数据的应用场景。例如，股票价格的实时行情、新闻资讯的即时推送，以及后台任务的进度通知，都是其典型应用领域。
EventSource的实现方式
在实际开发中，根据不同的业务需求，主要有以下几种实现方式：
1. 使用浏览器原生EventSource
这是最直接的实现方法，但限制也较为明显：仅支持GET请求方式，且无法自定义请求头（例如携带身份验证的Token）。具体用法如下：
if (window.hasOwnProperty("EventSource")) {
// url 接口
let source = new EventSource(
"https://api.baichuan-ai.com/v1/chat/completions"
);
// 当发生错误
source.onerror = function () {
console.log("error");
};
// 当通往服务器的连接被打开
source.onopen = function () {
console.log("连接成功");
};
// 当接收到消息
source.onmessage = function (event) {
console.log("服务器推送数据", event.data);
};
}
2. 使用EventSourcePolyfill
为解决原生接口无法设置请求头的问题，社区提供了EventSourcePolyfill方案。它允许在建立连接时传递自定义headers，但仍只能发起GET请求，无法通过请求体向服务端传递参数。
import { EventSourcePolyfill } from "event-source-polyfill";
// url 接口
let source = new EventSourcePolyfill(
"https://api.baichuan-ai.com/v1/chat/completions",
{
headers: {
Authorization: "token",
},
}
);
// 当发生错误
source.onerror = function () {
console.log("error");
};
// 当通往服务器的连接被打开
source.onopen = function () {
console.log("连接成功");
};
// 当接收到消息
source.onmessage = function (event) {
console.log("服务器推送数据", event.data);
};
3. 使用fetchEventSource
当业务场景需要更灵活的通信方式，例如必须使用POST方法提交数据时，fetchEventSource成为更好的选择。它在底层整合了Fetch API，能够支持设置请求方法、请求头和请求体，功能最为全面。
import { fetchEventSource } from "@microsoft/fetch-event-source";
let es = new fetchEventSource(
"https://api.baichuan-ai.com/v1/chat/completions",
{
headers: {
Authorization: "token值",
withCredentials: true,
"Content-Type": "application/json",
},
method: "post",
// 参数
body: JSON.stringify({
username: "LIIIIII",
password: "123456",
}),
onmessage(event) {
console.log(event.data);
},
onerror() {
console.log("erroe");
},
}
);
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
