编辑“︁HTML Server Sent Events”︁

'''HTML Server-Sent Events'''  

Server-Sent Events (SSE) 是一种基于 HTTP 的服务器推送技术，允许服务器向客户端（通常是网页浏览器）单向发送实时数据更新。与 WebSocket 不同，SSE 仅支持服务器到客户端的单向通信，但实现更简单，适用于需要实时数据流但无需双向交互的场景，如新闻推送、股票行情或日志监控。  

== 概述 ==  
SSE 使用标准的 HTTP 协议，通过长连接（long-lived connection）实现数据推送。客户端通过 `EventSource` API 订阅服务器事件流，服务器则以 `text/event-stream` 格式持续发送数据。  

=== 核心特点 ===  
* **单向通信**：仅服务器→客户端。  
* **自动重连**：客户端在连接断开时会尝试重新连接。  
* **轻量级**：基于 HTTP，无需额外协议。  
* **事件驱动**：支持自定义事件类型（如 `message`、`error`）。  

== 基本用法 ==  

=== 客户端代码 ===  
客户端通过 JavaScript 的 `EventSource` 对象监听服务器事件：  

<syntaxhighlight lang="javascript">  
// 创建 EventSource 对象，指向服务器端点  
const eventSource = new EventSource('/sse-endpoint');  

// 监听默认事件（未指定事件类型时触发）  
eventSource.onmessage = (event) => {  
    console.log('新数据:', event.data);  
};  

// 监听自定义事件（如 'update'）  
eventSource.addEventListener('update', (event) => {  
    console.log('自定义事件数据:', event.data);  
});  

// 错误处理  
eventSource.onerror = (error) => {  
    console.error('SSE 错误:', error);  
};  
</syntaxhighlight>  

=== 服务器代码（Node.js 示例） ===  
服务器需设置响应头 `Content-Type: text/event-stream` 并持续发送数据流：  

<syntaxhighlight lang="javascript">  
const http = require('http');  

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

        // 每秒发送一次数据  
        setInterval(() => {  
            res.write(`data: ${new Date().toISOString()}\n\n`); // 注意格式要求  
        }, 1000);  
    }  
}).listen(3000);  
</syntaxhighlight>  

**输出示例**：  
客户端控制台每秒接收一条时间戳数据：  
<pre>  
新数据: 2023-10-01T12:00:00.000Z  
新数据: 2023-10-01T12:00:01.000Z  
</pre>  

== 数据格式规范 ==  
SSE 数据流必须遵循以下格式：  
* 每行以字段名开头（如 `data:`、`event:`、`id:`）。  
* 数据以双换行符 `\n\n` 结束。  
* 注释行以 `:` 开头（可选）。  

**示例**：  
<pre>  
event: update  
data: {"price": 150}  
id: 12345  

data: 这是一条多行  
data: 消息\n\n  
</pre>  

== 实际应用案例 ==  
=== 实时股票价格推送 ===  
服务器持续发送股票价格更新，客户端动态更新页面：  

<syntaxhighlight lang="javascript">  
eventSource.onmessage = (event) => {  
    const stockData = JSON.parse(event.data);  
    document.getElementById('stock-price').textContent = stockData.price;  
};  
</syntaxhighlight>  

=== 服务器日志监控 ===  
开发者后台实时显示服务器日志：  

<mermaid>  
sequenceDiagram  
    participant Client  
    participant Server  
    Client->>Server: 订阅 /logs  
    loop 每秒推送  
        Server->>Client: data: [ERROR] 文件未找到\n\n  
    end  
</mermaid>  

== 高级配置 ==  
=== 自定义重连时间 ===  
服务器可通过 `retry:` 字段指定重连延迟（毫秒）：  
<pre>  
retry: 5000  
data: 重连时间设置为5秒\n\n  
</pre>  

=== 事件 ID 追踪 ===  
服务器发送 `id:` 字段，客户端在重连时通过 `Last-Event-ID` 请求头恢复：  
<pre>  
id: 42  
data: 恢复此事件后的数据\n\n  
</pre>  

== 限制与替代方案 ==  
* **局限性**：  
  * 不支持双向通信（需使用 WebSocket）。  
  * 部分浏览器限制最大并发连接数（如 Chrome 为 6）。  
* **替代技术**：  
  * **WebSocket**：全双工通信，适合聊天应用。  
  * **长轮询（Long Polling）**：兼容性更好但效率较低。  

== 数学表示（可选） ==  
事件流的吞吐量可建模为：  
<math>  
R = \frac{n}{t}  
</math>  
其中 <math>R</math> 为速率（事件/秒），<math>n</math> 为事件数，<math>t</math> 为时间。  

== 总结 ==  
SSE 是构建实时单向数据流的轻量级解决方案，适合无需客户端响应的场景。通过 `EventSource` API 和标准化数据格式，开发者可以快速实现服务器推送功能。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML高级特性]]