使用 SSE 实现单页应用（SPA）中的实时更新-JavaScript中文网-JavaScript教程资源分享门户

前言

单页应用（SPA）在现代 Web 应用中越来越常见，它的主要优势在于页面无需重新加载，用户体验更加流畅。然而，在实时更新方面， SPA 也遇到了挑战。本文将介绍使用 Server-Sent Events（SSE）来实现 SPA 中的实时更新。

SSE 简介

Server-Sent Events（SSE）是一种基于 HTTP 协议的服务器推送技术，通过浏览器与服务器建立长连接，实现服务器向浏览器实时推送数据。SSE 使用简单，不需要额外的插件，支持断线重连，以及 eventsource API 等特性。

SSE 的实现

服务端

首先，我们需要在服务器上实现 SSE 服务。代码示例如下：

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

const server = http.createServer((req, res) => {
  if (req.url === '/sse') { // SSE 接口地址
    res.writeHead(200, {
      'Content-Type': 'text/event-stream', // 设置 Content-Type 为 text/event-stream
      'Cache-Control': 'no-cache', // 禁用缓存
      'Connection': 'keep-alive' // 长连接
    });

    // 推送数据
    setInterval(() => {
      res.write(`data: ${new Date().toISOString()}\n\n`);
    }, 1000);
  } else {
    // 返回首页
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>SSE Demo</title>
        </head>
        <body>
          <p id="time"></p>
          <script>
            // SSE 客户端代码
            const time = document.getElementById('time');
            const eventSource = new EventSource('/sse'); // 连接 SSE 接口
            eventSource.onmessage = function(event) {
              time.innerText = event.data; // 更新页面
            }
          </script>
        </body>
      </html>
    `);
  }
});

server.listen(3000, () => {
  console.log('listening on port 3000');
});

在上述代码中，我们创建了一个 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