前言
单页应用（SPA）在现代 Web 应用中越来越常见，它的主要优势在于页面无需重新加载，用户体验更加流畅。然而，在实时更新方面， SPA 也遇到了挑战。本文将介绍使用 Server-Sent Events（SSE）来实现 SPA 中的实时更新。
SSE 简介
Server-Sent Events（SSE）是一种基于 HTTP 协议的服务器推送技术，通过浏览器与服务器建立长连接，实现服务器向浏览器实时推送数据。SSE 使用简单，不需要额外的插件，支持断线重连，以及 eventsource API 等特性。
SSE 的实现
服务端
首先，我们需要在服务器上实现 SSE 服务。代码示例如下：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - -- -------- --- ------- - -- --- ---- ------------------ - --------------- -------------------- -- -- ------------ - ----------------- ---------------- ----------- -- ---- ------------- ------------ -- --- --- -- ---- -------------- -- - ---------------- ----- ---------------------------- -- ------ - ---- - -- ---- ------------------ ---------------- -------------- --------- --------- ----- ------ ------ ---------- ------------ ------- ------ -- -------------- -------- -- --- ----- ----- ---- - -------------------------------- ----- ----------- - --- -------------------- -- -- --- -- --------------------- - --------------- - -------------- - ----------- -- ---- - --------- ------- ------- --- - --- ------------------- -- -- - ---------------------- -- ---- ------- ---展开代码
在上述代码中，我们创建了一个 HTTP 服务器，并通过 /sse 接口推送数据。接下来，我们需要在客户端连接 SSE 接口，以接收推送的数据。
客户端
在客户端中，我们通过 JavaScript 中的 EventSource API 来连接 SSE 接口，代码示例如下：
const time = document.getElementById('time'); const eventSource = new EventSource('/sse'); // 连接 SSE 接口 eventSource.onmessage = function(event) { time.innerText = event.data; // 更新页面 }
当 SSE 接口推送数据时，eventSource.onmessage 回调函数会被触发，我们可以在回调函数中更新页面。
使用 SSE 实现实时更新
现在，我们已经知道如何开发一个基本的 SSE 服务，在实现实时更新时，我们可以借助 SSE 的特性，推送数据到客户端，从而实现实时更新。
下面是使用 SSE 实现实时更新的示例代码：
const time = document.getElementById('time'); const eventSource = new EventSource('/sse'); // 连接 SSE 接口 eventSource.onmessage = function(event) { const data = JSON.parse(event.data); // 解析推送的数据 // 更新页面 time.innerText = data.time; document.title = `当前时间：${data.time}`; }
我们可以在服务端获取当前时间，推送到客户端，从而实现实时更新。
总结
本文介绍了如何使用 SSE 实现单页应用中的实时更新。SSE 基于 HTTP 协议，使用简单且兼容性良好，能够满足大多数实时更新需求。通过本文的介绍，你可以更好地理解 SSE 的原理和用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6583a4e8d2f5e1655de7cbe7
