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

html5服务器端推送事件

admin
行业动态
2025-05-10
9

HTML5服务器端推送事件（SSE）允许服务器通过持久连接主动向客户端推送数据，无需客户端轮询，适用于实时更新场景，如新闻或股票，使用EventSource接口

HTML5服务器端推送事件（Server-Sent Events, SSE）详解

基本原理

Server-Sent Events (SSE) 是一种基于 HTTP 协议的服务器向客户端单向推送数据的技术，客户端通过 EventSource 接口建立与服务器的持久连接，服务器通过该连接持续发送事件流，客户端接收并处理事件。

核心特点：
- 单向通信（服务器 → 客户端）
- 自动重连（连接断开时客户端自动尝试重新连接）
- 文本流格式（通常为 JSON 或自定义文本）
- 低延迟（适合实时数据更新）

技术对比：SSE vs WebSocket

特性	SSE	WebSocket
通信方向	单向（服务器 → 客户端）	双向
协议基础	HTTP/SSE	WebSocket 协议
复杂度	简单（仅需服务器支持）	较复杂（需处理握手、心跳、二进制数据）
浏览器支持	IE11+、现代浏览器	IE10+、现代浏览器
适用场景	实时更新（如股票、日志）	双向交互（如聊天、游戏）
自动重连	内置支持	需手动实现

实现步骤

(1) 服务器端实现

Node.js 示例（Express + SSE）：

html5服务器端推送事件第1张

const express = require('express');
const app = express();
// SSE 路由
app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.flushHeaders();
  // 定时推送事件
  setInterval(() => {
    const data = JSON.stringify({ time: new Date(), message: 'Hello SSE' });
    res.write(`data: ${data}

); // 每个事件以

` 分隔
}, 1000);

// 连接关闭时清理资源
req.on('close', () => {
  console.log('Client disconnected');
});

app.listen(3000, () => console.log(‘Server running on port 3000’));

## (2) 客户端实现
HTML + JavaScript 示例：
  ```html
  <div id="messages"></div>
  <script>
    const eventSource = new EventSource('/events');
    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      const msgDiv = document.createElement('div');
      msgDiv.textContent = `${data.time}: ${data.message}`;
      document.getElementById('messages').appendChild(msgDiv);
    };
    eventSource.onerror = (err) => {
      console.error('SSE error:', err);
    };
  </script>

使用场景

场景	说明
实时日志监控	服务器推送日志到客户端（如 DevOps 工具）
股票行情更新	实时推送股票价格变动
消息通知系统	推送实时通知（如聊天室的系统消息）
IoT 数据流	设备传感器数据实时展示