使用 SSE 实现 Web 页面中的动态推送-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，实时推送数据对于用户体验和业务逻辑的实现都非常重要。而传统的轮询方式会增加服务器的负担，同时也无法实现真正的实时推送。因此，SSE（Server-Sent Events）成为了一种更优秀的实时推送方式，它可以在服务器端向客户端推送数据，而不需要客户端不断地向服务器发送请求。

本文将详细介绍 SSE 的实现原理和使用方法，并提供示例代码，帮助读者更好地理解 SSE 的使用和实现。

SSE 的实现原理

SSE 是基于 HTTP 协议的一种实时推送技术。它利用了 HTTP 协议中的长连接（HTTP keep-alive）特性，建立一条持久化的连接，然后通过这条连接向客户端推送数据。

SSE 的实现原理如下：

客户端向服务器发送一个 GET 请求，请求一个 SSE 流的 URL。
服务器返回一个 HTTP 响应，状态码为 200，同时设置 Content-Type 为 text/event-stream。
服务器通过这个连接向客户端发送数据，每个数据都以“data: ”开头，以“\n\n”结尾。
客户端通过监听这个连接的 message 事件来接收服务器发送的数据。

需要注意的是，SSE 是单向的，即服务器只能向客户端发送数据，不能接收客户端的数据。如果需要客户端向服务器发送数据，可以使用 WebSocket。

SSE 的使用方法

服务器端实现 SSE

服务器端实现 SSE 需要使用 Node.js 的 http 模块。下面是一个示例代码：

// javascriptcn.com 代码示例
const http = require('http');

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

    // 每隔 1 秒向客户端发送一条数据
    setInterval(() => {
      res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
    }, 1000);
  }
}).listen(3000);

在这个示例中，我们通过判断请求的 URL 是否为 /sse 来返回 SSE 流。然后设置响应头，包括 Content-Type、Cache-Control 和 Connection。最后，我们使用 setInterval 定时向客户端发送数据。

客户端接收 SSE

客户端接收 SSE 需要使用 EventSource 对象。下面是一个示例代码：

const eventSource = new EventSource('/sse');

eventSource.onmessage = (event) => {
  console.log(event.data);
};

在这个示例中，我们创建了一个 EventSource 对象，并指定了 SSE 流的 URL。然后通过监听 message 事件来接收服务器发送的数据。

总结

SSE 是一种非常优秀的实时推送技术，它可以在服务器端向客户端推送数据，而不需要客户端不断地向服务器发送请求。本文介绍了 SSE 的实现原理和使用方法，并提供了示例代码，帮助读者更好地理解 SSE 的使用和实现。在实际开发中，我们可以使用 SSE 来实现实时推送数据，提高用户体验和业务逻辑的实现效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655023d17d4982a6eb909536