JavaScript中SSE怎么用EventSource建立一个单向的服务器事件推送通道-js教程-PHP中文网

eventsource建立sse连接本质是创建浏览器到服务器的单向http长连接，用于服务器向客户端推送文本事件流，具备轻量、原生支持、自动重连特性，适用于实时通知、日志流等场景。

javascript中sse怎么用eventsource建立一个单向的服务器事件推送通道

用 EventSource 建立 SSE（Server-Sent Events）连接，本质是创建一个浏览器到服务器的单向、长连接通道，只用于服务器向客户端推送文本事件流。它基于 HTTP，轻量、原生支持、自动重连，适合实时通知、日志流、状态更新等场景。

前端：用 EventSource 创建连接并监听事件

EventSource 是浏览器原生 API，使用简单：

传入服务端提供的 SSE 接口 URL（必须是同源或配置了 CORS）
监听 message（默认事件）、open（连接建立）、error（连接异常）等事件
每个收到的事件是一个 MessageEvent，数据在 e.data 中（字符串）

示例：

const es = new EventSource('/api/events');

es.onopen = () => console.log('SSE 连接已建立');

es.onmessage = (e) => {
  console.log('收到普通消息:', e.data); // e.data 是字符串，需自行 JSON.parse
};

es.addEventListener('user-update', (e) => {
  console.log('收到自定义事件 user-update:', JSON.parse(e.data));
});

es.onerror = (err) => {
  console.error('SSE 连接出错:', err);
};

注意：EventSource 默认每 3 秒自动重连（可由服务端通过 retry: 字段控制），且不支持自定义请求头（如 Authorization），如需鉴权建议用 cookie 或 URL 参数传 token。

后端：按 SSE 协议格式返回流式响应

SSE 要求响应满足三点：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

HTTP 状态码为 200（或其他成功码）
响应头包含 Content-Type: text/event-stream 和 Cache-Control: no-cache
响应体按行发送事件，每条事件以 data:、event:、id:、retry: 开头，空行分隔不同事件

例如 Node.js（Express）示例：

app.get('/api/events', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });

  // 每 2 秒推送一条消息
  const interval = setInterval(() => {
    const data = JSON.stringify({ time: new Date().toISOString(), msg: 'hello' });
    res.write(`event: message\n`);
    res.write(`data: ${data}\n\n`);
  }, 2000);

  req.on('close', () => {
    clearInterval(interval);
    res.end();
  });
});

关键细节：data: 行可出现多次，最终拼成完整消息；每条消息末尾必须有两个换行符（\n\n）；id: 用于断线重连时服务端定位最后位置；retry: 单位毫秒，告诉浏览器重连间隔。

常见问题与规避技巧

实际使用中容易踩坑：

跨域限制：若接口跨域，服务端必须设置 Access-Control-Allow-Origin（不能用 *，若需凭据则必须指定域名）和 Access-Control-Allow-Credentials: true
连接数限制：浏览器对同一域名的 EventSource 连接数有限制（通常 6 个），避免频繁新建实例，用完记得 es.close()
数据解析：所有 e.data 都是字符串，即使发的是 JSON，也得手动 JSON.parse；服务端确保 data: 后内容不包含换行，否则会被截断
超时与心跳：部分代理（如 Nginx）默认 60 秒断连，可在服务端定期发送注释行（: keep-alive\n\n）或空 data:\n\n 维持连接