HTML Server-Sent Events

介绍

在现代 Web 开发中，实时数据更新是一个常见的需求。HTML Server-Sent Events（SSE）是一种允许服务器向客户端推送实时数据的技术。与 WebSocket 不同，SSE 是单向的，即服务器可以向客户端发送数据，但客户端不能向服务器发送数据。SSE 非常适合用于需要实时更新数据的场景，例如股票价格、新闻推送或社交媒体通知。

SSE 基于 HTTP 协议，使用简单且易于实现。它通过一个持久的 HTTP 连接，允许服务器在需要时向客户端发送数据。客户端通过 JavaScript 监听这些事件，并更新页面内容。

如何使用 Server-Sent Events

服务器端

在服务器端，你需要设置一个 HTTP 响应，并将其内容类型设置为 text/event-stream。然后，你可以通过这个连接向客户端发送数据。每条消息以 data: 开头，并以两个换行符 \n\n 结束。

以下是一个简单的 Node.js 示例：

javascript
const http = require('http');

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

    setInterval(() => {
      const data = `data: ${new Date().toLocaleTimeString()}\n\n`;
      res.write(data);
    }, 1000);
  } else {
    res.writeHead(404);
    res.end();
  }
}).listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

在这个示例中，服务器每秒钟向客户端发送当前时间。

客户端

在客户端，你可以使用 JavaScript 的 EventSource 对象来监听服务器发送的事件。以下是一个简单的 HTML 和 JavaScript 示例：

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SSE Example</title>
</head>
<body>
  <h1>Server-Sent Events Example</h1>
  <div id="time"></div>

  <script>
    const eventSource = new EventSource('/events');

    eventSource.onmessage = function(event) {
      document.getElementById('time').textContent = `Current time: ${event.data}`;
    };
  </script>
</body>
</html>

在这个示例中，客户端每秒钟从服务器接收时间数据，并将其显示在页面上。

实际应用场景

实时股票价格更新

假设你正在开发一个股票交易平台，你需要实时显示股票价格的变化。使用 SSE，服务器可以在股票价格发生变化时立即向客户端推送更新，而无需客户端不断轮询服务器。

新闻推送

在新闻网站上，SSE 可以用于实时推送最新的新闻头条。当有新的新闻发布时，服务器可以立即将新闻推送到客户端，用户无需刷新页面即可看到最新内容。

社交媒体通知

在社交媒体应用中，SSE 可以用于实时推送通知。例如，当用户收到新的消息或点赞时，服务器可以立即将这些通知推送到客户端。

总结

HTML Server-Sent Events 是一种简单且强大的技术，适用于需要服务器向客户端推送实时数据的场景。与 WebSocket 相比，SSE 更加轻量级且易于实现。通过使用 SSE，你可以轻松地为你的 Web 应用添加实时功能。

附加资源

练习

修改上面的 Node.js 示例，使其每 5 秒钟发送一次随机数，并在客户端显示该随机数。
尝试在客户端添加一个按钮，当点击按钮时，停止接收服务器发送的事件。
研究如何在服务器端处理客户端断开连接的情况，并在客户端重新连接时继续发送数据。

提示

在开发过程中，确保你的服务器支持 SSE，并且客户端浏览器也支持 EventSource。大多数现代浏览器都支持 SSE，但在某些旧版浏览器中可能需要使用 polyfill。

介绍​

如何使用 Server-Sent Events​

服务器端​

客户端​

实际应用场景​

实时股票价格更新​

新闻推送​

社交媒体通知​

总结​

附加资源​

练习​

介绍