使用 SSE 实现实时反馈-JavaScript中文网-JavaScript教程资源分享门户

随着 Web 应用程序的发展，前端技术变得越来越先进和复杂。在这些应用中，实时反馈对于提升用户体验和增强互动性非常重要。Server-Sent Events（SSE）是一种 Web 技术，可以使用它在应用程序中实现实时更新，并在连续连接上推送数据。SSE 是建立在 HTTP 协议之上，具有如下优点：

SSE 是基于 HTTP 的，因此它能够与现有的 Web 技术轻松集成。
SSE的长轮询机制使得客户端可以保持打开的连接，无需不断地发送HTTP请求以获取数据，降低网络负载。
SSE 支持跨域通信。

SSE 的基本原理

SSE 通过 HTTP 连接向客户端推送数据。服务器端使用 "text/event-stream" MIME 类型返回格式化的数据，客户端通过创建一个 EventSource 对象来监听这些事件：

var source = new EventSource('/server');

当数据被服务器更新时，事件源会自动触发 message 事件。客户端浏览器可以捕捉这个事件，并执行 JavaScript 回调函数来处理它：

source.onmessage = function(event) {
  console.log(event.data);
};

在服务器方面，按照 SSE 规范，需要在 HTTP 响应头中设置 "text/event-stream" MIME 类型，以及发送一个 HTTP 消息流，每条消息使用如下格式：

event: myevent\n
data: {"message": "hello world"}\n\n

其中 "event" 是可选的，用于标识消息类型。"data" 包含消息内容，多条消息之间使用一个空行分割。

SSE 实现示例

假设我们有一个简单的用于跟踪在线用户的 Web 应用程序，为了实时更新在线用户数量，可以使用 SSE 来实现实时反馈。以下是一些示例代码：

服务器端

// javascriptcn.com 代码示例
// 引入必要的库
var express = require('express');
var http = require('http');
var app = express();

// 跟踪在线用户数量
var onlineUsers = 0;

// 设置服务器的路由
app.get('/onlineUsers', function (req, res) {
  // 设置 SSE
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // 定义更新函数
  function updateOnlineUsers() {
    res.write('event: onlineUsersUpdate\n');
    res.write('data: ' + JSON.stringify({ onlineUsers: onlineUsers }) + '\n\n');
  }

  // 定时更新在线用户数量
  var updatedInterval = setInterval(updateOnlineUsers, 1000);

  // 当连接断开时，清除定时器
  req.on('close', function() {
    clearInterval(updatedInterval);
  });
});

// 计算在线用户数量
function calculateOnlineUsers() {
  var count = 0;
  // TODO 查询在线用户数量的逻辑
  return count;
}

var server = http.createServer(app);
server.listen(3000, function () {
  console.log('Server is listening on port 3000');
});

客户端

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SSE Demo</title>
</head>
<body>
  <div id="onlineUsers"></div>

  <script>
    var onlineUsersElem = document.getElementById('onlineUsers');

    // 创建 SSE 对象
    var source = new EventSource('/onlineUsers');
    source.onmessage = function(event) {
      var data = JSON.parse(event.data);
      onlineUsersElem.innerHTML = '在线用户数：' + data.onlineUsers;
    };
  </script>
</body>
</html>

在这个示例中，服务器端使用 Express 框架并通过 HTTP 提供服务，使用 SSE 将在线用户数量实时返回给客户端。客户端使用 JavaScript 监听这些事件，以便在接收到服务器端的更新时，更新应用程序界面上显示的在线用户数量。

总结

SSE 是一个非常强大的技术，可以轻松实现实时反馈，并且与现有 Web 技术轻松集成。在开发 Web 应用程序时，使用 SSE 可以让你的应用程序获得更好的用户体验和互动性。希望这篇文章能够让你更好地理解 SSE，并在实际项目中得到应用。

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