当前位置：首页 > 行业动态 > 正文

html服务器发送事件

HTML服务器发送事件（SSE）是服务器单向推送数据的技术，客户端通过EventSource接收，保持持久连接

什么是HTML服务器发送事件（Server-Sent Events，SSE）

HTML服务器发送事件（SSE）是一种允许服务器通过HTTP协议向客户端单向推送事件的技术，客户端通过EventSource接口建立与服务器的持久连接，服务器可以持续向客户端发送数据流，适用于实时更新场景（如股票行情、消息通知等）。

html服务器发送事件 第1张

SSE的核心特点

特性 描述
单向通信 服务器→客户端，仅服务器可主动推送数据
持久连接 连接保持直到客户端关闭或服务器终止
自动重连 断开后会自动尝试重新连接（可配置重试间隔）
低延迟 数据通过TCP连接直接传输，延迟极低
文本/JSON格式 支持普通文本或JSON格式数据
心跳机制 服务器定期发送心跳包（或data字段为空的事件）维持连接

SSE与WebSocket的区别

特性 SSE WebSocket
通信方向 单向（服务器→客户端） 双向
协议 HTTP（GET请求） WebSocket协议
复杂度 简单（仅需服务器推送） 较复杂（需处理握手、双向通信）
浏览器支持 IE11+、现代浏览器 IE10+、现代浏览器
适用场景 实时更新（如日志、通知） 双向交互（如聊天、游戏）

如何创建SSE服务

服务器端（以Node.js为例）

const express = require('express');
const app = express();
app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  // 发送初始事件
  res.write(`data: ${JSON.stringify({ message: 'Welcome!' })}
`);
  // 模拟定时推送数据
  setInterval(() => {
    res.write(`data: ${JSON.stringify({ time: new Date().toLocaleTimeString() })}
`);
  }, 2000);
});
app.listen(3000, () => console.log('SSE server running on port 3000'));

客户端（HTML+JS）

<!DOCTYPE html>
<html>
<body>
  <div id="messages"></div>
  <script>
    const eventSource = new EventSource('/events');
    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      document.getElementById('messages').innerHTML += `<p>${data.time || data.message}</p>`;
    };
    eventSource.onerror = (err) => {
      console.error('SSE connection error:', err);
    };
  </script>
</body>
</html>

SSE事件格式

单行事件格式

data: <消息内容> 
data: {"temperature":25}

多行事件格式

id: <事件ID>
event: <事件名称>
data: <消息内容> 
id: 123
event: alert
data: {"type":"fire","location":"Warehouse 3"}

心跳机制与重连策略

  • 心跳机制：服务器定期发送空data字段事件（如`data:

`）保持连接活跃。

  • 重连策略：
    • 默认重连间隔：3秒（可通过retry参数调整）。
    • 客户端自动重连次数无限制,直到成功或手动关闭。

浏览器兼容性

浏览器 支持情况
Chrome 支持
Firefox 支持
Safari 支持
Edge 支持
IE IE11+支持，需polyfill
Mobile Safari 部分版本支持（iOS 12.4+）

常见问题与解答

问题1：SSE与WebSocket如何选择？

解答：

  • 优先选SSE：若只需服务器单向推送（如实时通知、日志流），且无需客户端响应。
  • 选WebSocket：若需要双向交互（如聊天、实时协作）。
  • SSE优势：实现简单、低资源消耗、自动重连；WebSocket优势：全双工通信。

问题2：如何处理SSE连接中断？

解答：

  • 客户端监听onerror事件，触发时可记录错误并尝试手动重连。
  • 示例代码： 
    let reconnectAttempts = 0;
eventSource.onerror = () => {
reconnectAttempts++;
if (reconnectAttempts < 5) {
  setTimeout(() => {
    eventSource = new EventSource('/events'); // 重新初始化连接
  }, 2000);
} else {
  console.error('Max reconnect attempts reached');
}
};
ServerSent Events
0

相关文章