服务器发送事件节点

在现代的 web 应用中，很多场景下需要实现实时通信。传统的 HTTP 请求-响应模式显然无法满足此类需求，因为在此模式下，客户端需要不停向服务器发起请求，服务器返回响应，网络带宽和性能开销较大。而 “服务器发送事件” (Server-Sent Events) 则提供了一种简单、高效、易用的实时通信机制。

什么是服务器发送事件？

服务器发送事件是一种基于 HTTP 的单向通信机制。使用服务器发送事件，客户端可以向服务器建立一条长连接，并接收服务器发来的实时数据。与其他实时通信技术，例如 WebSocket 的差别在于，服务器发送事件建立在标准的 HTTP/1.1 协议之上，无需额外的协议升级。这也使得服务器发送事件成为了浏览器原生支持的实时通信方案之一。

如何使用服务器发送事件？

服务器发送事件的使用非常简单。客户端只需要创建一个 EventSource 对象，向其传入服务器的 URL，就可以开始接收服务器发来的数据。以下是 EventSource 对象的基本用法：

const evtSource = new EventSource('/my-server-url');

evtSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log(data);
};

evtSource.onerror = (error) => {
  console.log(error);
};

在此示例中，EventSource 对象监听两个事件：onmessage 和 onerror。服务器会不断向客户端发送数据，每当有新数据到达时，onmessage 事件就会触发。而如果服务器出现错误，onerror 事件则会触发。

服务器端实现

服务器发送事件的实现非常简单，只需要在服务器端不断向客户端发送数据即可。以下是基于 Express 框架实现的服务器发送事件的示例代码：

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

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

  setInterval(() => {
    const data = { time: new Date().toLocaleTimeString() };

    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 1000);
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

在此示例中，客户端通过访问 /stream 路径建立长连接，服务器会不断向客户端发送当前时间。响应头中的 'Content-Type': 'text/event-stream' 表示服务器发送的数据是符合服务器发送事件规范的。而 'Cache-Control': 'no-cache' 和 'Connection': 'keep-alive' 两个响应头则分别表示不将响应结果缓存，和设置长连接。

GitHub 示例

如果你想要更深入地了解服务器发送事件，可以参考我在 GitHub 上的示例代码：

• 服务器端实现：https://github.com/lxchuan12/node-sse-demo
• 客户端实现：https://github.com/lxchuan12/web-sse-demo