如何通过 SSE 实现进度条实时更新？-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，经常需要实现进度条来显示任务的进度。而如果能够实时更新进度条，用户体验将会更好。本文将介绍如何通过 Server-Sent Events（SSE）实现进度条的实时更新。

SSE 简介

SSE 是一种基于 HTTP 协议的服务器推送技术，可以实现服务器向客户端实时推送数据。与 WebSocket 相比，SSE 更加轻量级，且不需要建立双向通信，只需要客户端向服务器发送一个请求，服务器就可以不断地向客户端推送数据。

实现步骤

1. 服务器端

首先，我们需要在服务器端实现 SSE 接口，用于向客户端推送数据。以下是一个 Node.js 的示例代码：

const http = require('http');

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

  setInterval(function() {
    const data = Math.random();
    res.write(`data: ${data}\n\n`);
  }, 1000);
}).listen(8080);

以上代码创建了一个 HTTP 服务器，并设置了响应头，使其符合 SSE 的规范。在 setInterval 中，服务器每隔 1 秒钟向客户端发送一个随机数。

2. 客户端

在客户端，我们需要使用 EventSource 对象来接收服务器推送的数据，并更新进度条。以下是一个简单的 HTML 页面示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>实时更新进度条</title>
  <style>
    #progress {
      width: 0%;
      height: 20px;
      background-color: #4CAF50;
    }
  </style>
</head>
<body>
  <div id="progress"></div>
  <script>
    const progress = document.getElementById('progress');
    const source = new EventSource('http://localhost:8080');

    source.onmessage = function(event) {
      const data = parseFloat(event.data);
      progress.style.width = `${data * 100}%`;
    };
  </script>
</body>
</html>

以上代码创建了一个进度条，并使用 EventSource 对象监听服务器推送的数据。每当接收到数据时，更新进度条的宽度。

总结

通过以上步骤，我们就可以轻松地实现进度条的实时更新。SSE 技术可以使我们更加方便地实现服务器向客户端的数据推送，提高用户体验。在实际开发中，我们可以根据需求，修改服务器端的代码，实现更加复杂的数据推送。

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