HTML5 服务器发送事件(Server-Sent Events)使用详解

当前位置：电视猫 > Html5>

电视猫时间： 2024-07-31 19:20:06

什么是 Server-Sent Events (SSE)？

SSE 是一种 HTML5 API，它允许服务器向客户端推送数据，而不需要客户端不断地发起请求。换句话说，它实现了服务器到客户端的实时通信。

为什么使用 SSE？

实时性： 服务器可以实时向客户端推送数据更新，无需客户端主动轮询。
简单： SSE 的 API 相对简单，易于实现。
高效： SSE 使用 HTTP 持久连接，减少了建立连接的开销。

如何使用 SSE？

客户端：

创建 EventSource 对象： JavaScript
```
const source = new EventSource('sse_endpoint');
```
- sse_endpoint: 服务器端提供 SSE 服务的 URL。

监听事件： JavaScript

source.onmessage = (event) => {
    console.log(event.data); // 处理接收到的数据
};

source.onerror = (event) => {
    console.error('EventSource error:', event);
};

onmessage: 接收服务器发送的数据。
onerror: 处理错误事件。

服务器端：

设置响应头：
```
Content-Type: text/event-stream
```
发送数据：
```
data: hello world\n\n
```
- data: 数据字段，表示要发送的数据。
- \n\n: 两个换行符表示数据结束。

完整示例（Node.js）：

JavaScript

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream'
  });

  setInterval(() => {
    const data = `data: ${new Date().toISOString()}\n\n`;
    res.write(data);
  }, 2000);
});

server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

客户端 HTML：

HTML

<!DOCTYPE html>
<html>
<head>
    <title>SSE Example</title>
</head>
<body>
    <div id="result"></div>
    <script>
        const source = new EventSource('http://localhost:3000');
        source.onmessage = (event) => {
            document.getElementById('result').textContent = event.data;
        };
    </script>
</body>
</html>

SSE 的高级用法

自定义事件：

event: my-custom-event\n
data: some data\n\n

重连机制： EventSource 对象在连接断开后会自动尝试重新连接。
错误处理： 可以通过 onerror 事件处理各种错误，例如网络错误、服务器错误等。

SSE 的局限性

单向通信： SSE 只能实现服务器向客户端推送数据，客户端无法主动向服务器发送数据。
浏览器兼容性： 虽然大多数现代浏览器都支持 SSE，但老旧浏览器可能不支持。

SSE 与 WebSocket 的对比

SSE：单向通信，适合服务器向客户端推送数据，如实时通知、实时数据更新。
WebSocket：双向通信，适合需要实时交互的应用，如在线聊天、实时游戏。

总结

SSE 是一种简单高效的实现服务器到客户端实时通信的技术。它在实时数据推送场景下有广泛的应用，例如股票行情、聊天室、实时监控等。

注意：

服务器端需要保持连接，以持续向客户端推送数据。
客户端需要处理潜在的网络问题和错误。
在生产环境中，建议使用成熟的 SSE 实现框架或库，以提高稳定性和可维护性。

更多深入学习，可以参考 MDN Web Docs： https://developer.mozilla.org/zh-CN/docs/Web/API/Server-sent_events

如果您还有其他问题，欢迎随时提出。