在 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 技术的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - --- ---------------------
---------------- --------------
-- ------
----------------代码中，我们使用 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