HTML SSE是什么？实时更新的3种Server-Sent事件用法-html教程-PHP中文网

HTML SSE是什么？实时更新的3种Server-Sent事件用法

星降

发布： 2025-07-16 17:08:02

原创

1093人浏览过

sse（server-sent events）是一种服务器向客户端推送实时数据的单向通信方式，适用于股票行情、新闻推送、聊天消息等场景。1. 使用javascript连接sse流的方法是创建eventsource对象并监听事件，如onmessage处理默认消息，onerror处理错误，addeventlistener监听自定义事件；2. 服务器端发送sse事件需设置content-type为text/event-stream，并按格式发送以data:开头、\n\n结尾的数据，示例使用node.js每秒推送递增消息；3. 发送带事件id和自定义类型的sse消息可通过添加id:和event:字段实现，客户端可据此跟踪事件id并监听特定类型事件，如示例中根据奇偶id发送不同类型事件。

HTML SSE是什么？实时更新的3种Server-Sent事件用法

HTML SSE，简单来说，就是服务器向客户端推送数据的单向通道。它让网页无需频繁请求，就能实时更新信息，像股票行情、新闻推送、聊天室消息，都能用它实现。

解决方案：

Server-Sent Events (SSE) 提供了一种从服务器向客户端推送实时数据的高效方式。以下是三种常用的 SSE 用法，并附带代码示例。

立即学习“前端免费学习笔记（深入）”；

如何使用JavaScript连接到SSE流？

使用 JavaScript 连接到 SSE 流非常简单。你需要创建一个 EventSource 对象，指向你的 SSE 端点。然后，你可以监听不同的事件类型来处理服务器推送的数据。

const eventSource = new EventSource('/sse-endpoint');

eventSource.onmessage = (event) => {
  console.log('Received data:', event.data);
  // 在这里更新你的页面内容
};

eventSource.onerror = (error) => {
  console.error('SSE error:', error);
  eventSource.close(); // 发生错误时关闭连接
};

eventSource.addEventListener('custom_event', (event) => {
  console.log('Received custom event:', event.data);
  // 处理自定义事件
});

登录后复制

这段代码创建了一个连接到 /sse-endpoint 的 EventSource。onmessage 处理默认的数据推送，onerror 处理错误，而 addEventListener 可以监听服务器发送的自定义事件。注意，错误发生时最好关闭连接，防止无限重试。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

如何在服务器端发送SSE事件？

服务器端发送 SSE 事件需要设置正确的 HTTP 头部，并按照特定格式发送数据。重要的是 Content-Type 必须是 text/event-stream。

以下是一个 Node.js 示例：

const http = require('http');

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

  let i = 0;
  setInterval(() => {
    const data = `data: Hello, SSE! ${i}\n\n`;
    res.write(data);
    i++;
  }, 1000);

  req.on('close', () => {
    console.log('Client disconnected');
  });
}).listen(3000, () => {
  console.log('SSE server started on port 3000');
});

登录后复制

这个服务器每秒发送一条包含递增数字的消息。关键在于 Content-Type 设置为 text/event-stream，并且每个事件以 data: 开头，以 \n\n 结尾。 Cache-Control: no-cache 也很重要，防止浏览器缓存 SSE 流。

如何发送带有事件ID和自定义事件类型的SSE？

除了基本的数据推送，你还可以发送带有事件 ID 和自定义事件类型的 SSE。这允许客户端更好地管理和处理不同的事件。

const http = require('http');

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

  let eventId = 0;
  setInterval(() => {
    eventId++;
    const eventType = (eventId % 2 === 0) ? 'even' : 'odd';
    const data = `id: ${eventId}\nevent: ${eventType}\ndata: Event ${eventId} of type ${eventType}\n\n`;
    res.write(data);
  }, 1000);

  req.on('close', () => {
    console.log('Client disconnected');
  });
}).listen(3000, () => {
  console.log('SSE server started on port 3000');
});

登录后复制

在这个例子中，我们添加了 id 和 event 字段。id 用于标识事件，客户端可以使用 lastEventId 属性来跟踪最后一个事件。event 字段定义了事件类型，客户端可以使用 addEventListener 监听特定类型的事件。例如，客户端可以监听 "even" 和 "odd" 事件，并分别处理它们。

服务器端需要按照规范，使用 id:, event: 和 data: 字段，并以 \n\n 分隔每个事件。客户端则使用 addEventListener 监听自定义事件。

以上就是HTML SSE是什么？实时更新的3种Server-Sent事件用法的详细内容，更多请关注php中文网其它相关文章！