使用 Server-Sent Events 实现轮询方式-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，经常需要实现实时更新页面的功能，例如聊天室、实时数据监控等。传统的方式是使用轮询技术，即每隔一段时间向服务器发送请求，获取最新的数据，但这种方式效率低下，且会占用大量的带宽和服务器资源。近年来，Server-Sent Events（SSE）技术成为了一种更加高效、可靠的实时通讯方式，本文将介绍如何使用 SSE 技术实现实时更新页面的功能。

什么是 Server-Sent Events？

Server-Sent Events 是一种基于 HTTP 协议的服务器推送技术，它使用一个持久的 HTTP 连接，服务器可以主动向客户端发送数据，而客户端不需要不断地向服务器发送请求。SSE 技术常用于实现实时通讯、实时更新页面等功能。

如何使用 Server-Sent Events？

使用 SSE 技术需要客户端和服务器端的支持，下面分别介绍如何在客户端和服务器端实现 SSE 技术。

客户端实现 SSE 技术

在客户端使用 SSE 技术需要使用 JavaScript，下面是一个简单的示例：

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

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

代码中，EventSource 是 SSE 技术的核心对象，它用于与服务器建立连接，并接收服务器发送的数据。在调用 EventSource 构造函数时，需要传入一个 URL，表示 SSE 服务的地址。在这个示例中，我们将 SSE 服务地址设置为 /sse。接着，我们通过 eventSource.onmessage 方法设置一个回调函数，当服务器发送数据时，这个回调函数会被调用，我们可以在这个回调函数中处理服务器发送的数据。在这个示例中，我们将服务器发送的数据打印到控制台。

服务器端实现 SSE 技术

在服务器端使用 SSE 技术需要使用特定的 HTTP 头部，下面是一个使用 Node.js 实现 SSE 技术的示例：

const http = require('http');

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

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

代码中，我们使用 Node.js 创建了一个 HTTP 服务器，并在服务器响应时设置了特定的 HTTP 头部，这些头部用于告诉浏览器这是一个 SSE 服务。其中，Content-Type 头部表示响应的内容类型为 text/event-stream，Cache-Control 头部表示禁用缓存，Connection 头部表示使用持久连接。接着，我们使用 setInterval 方法每秒钟向客户端发送一个数据，这个数据使用 data 字段表示，数据格式为 data: ${data}\n\n，其中 \n\n 表示数据的结束符。

使用 SSE 技术的优势

SSE 技术相比传统的轮询方式具有以下优势：

减少带宽和服务器资源的占用：使用 SSE 技术可以减少不必要的请求和响应，减少了带宽和服务器资源的占用。
实时性更好：使用 SSE 技术可以实现更加实时的通讯，相比轮询方式，延迟更低，响应更快。
更加可靠：使用 SSE 技术可以实现更加可靠的通讯，相比轮询方式，不容易出现数据丢失等问题。

总结

本文介绍了如何使用 Server-Sent Events 技术实现实时更新页面的功能，包括客户端和服务器端的实现方式，并介绍了使用 SSE 技术的优势。使用 SSE 技术可以提高实时通讯的效率和可靠性，是一种更加高效、可靠的实时通讯方式。

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