不用长轮询，这个 JS 插件可以让你用 SSE 实现推送-JavaScript中文网-JavaScript教程资源分享门户

不用长轮询，这个 JS 插件可以让你用 SSE 实现推送

在前端开发中，实时推送是一个非常常见的需求。在 Web 应用中，需要实时更新数据、交互和状态等。以前实现这种实时推送的方式是使用长轮询，但这种方式有很多问题，比如资源浪费、性能下降、服务端容易崩溃等等。现在，有一种更优秀的实现实时推送的方法：使用 SSE（Server-Sent Events）。下面我们就来介绍一款 JS 插件，它可以使得使用 SSE 来实现推送变得更加简单。

什么是 SSE

SSE 是一种服务端推送技术，也是 HTML5 中的一部分。它允许服务器实时向客户端推送数据，不需要客户端向服务器发送请求。这种方式比传统的轮询技术更高效，因为它只需要一个连接，而不是每次都新建一个连接。此外，SSE 还具有一些其他的优点，比如支持跨域、不受防火墙限制等等。

SSE 的工作方式很简单。服务器将要推送的数据打包成一个 event，发送给客户端。客户端通过一个 EventSource 对象接收这个 event。EventSource 对象会自动连接到服务器，并保持连接打开，直到客户端关闭连接或服务器关闭连接。当有新的 event 时，EventSource 对象会触发 message 事件，从而让客户端得到最新的数据。

SSE 的使用限制

虽然 SSE 是一个强大的工具，但是它还是存在一些限制的。比如它不能处理过大的数据流，因为浏览器会自动把数据存储在内存中。此外，有些浏览器不支持 SSE，需要使用降级策略，比如长轮询、WebSocket 等等。

插件介绍

现在，我们来介绍一款支持 SSE 的 JS 插件：EventSource.js。这个插件可以使得使用 SSE 实现实时推送变得更加容易。下面我们来介绍一下这个插件的基本使用方法。

a. 引入插件

在 HTML 文件中引入 EventSource.js。

<script src="js/EventSource.js"></script>

b. 创建 EventSource 对象

在 JavaScript 中创建 EventSource 对象。

var source = new EventSource('url');

其中 url 是服务器端推送数据的 URL。

c. 处理数据

通过添加事件监听器，处理从服务器出来的数据。

source.addEventListener('message', function(e) {
  console.log(e.data);
}, false);

在这个例子中，我们使用 console.log 来在控制台中输出数据。

d. 关闭连接

在不需要连接时，应该关闭连接。

source.close();

示例代码

下面是一个完整的使用 EventSource 插件实现实时推送的示例代码。

HTML 代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>EventSource</title>
  <script src="js/EventSource.js"></script>
</head>
<body>
  <h1>EventSource</h1>
  <div id="messages"></div>
  <script>
    var source = new EventSource('http://localhost:3000/messages');

    source.addEventListener('message', function(e) {
      var messages = document.getElementById('messages');
      messages.innerHTML = messages.innerHTML + '<br>' + e.data;
    }, false);
  </script>
</body>
</html>

JavaScript 代码：

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

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

  fs.watchFile('/var/log/messages', function(curr, prev) {
    fs.readFile('/var/log/messages', 'utf8', function(err, data) {
      res.write('data: ' + data.trim() + '\n\n');
    });
  });

  res.socket.on('close', function() {
    console.log('closed');
    fs.unwatchFile('/var/log/messages');
  });
}).listen(3000);

在这个示例代码中，我们实现了一个实时监控服务器日志文件的功能。当日志文件发生变化时，服务器会把最新的 10 行日志发送给客户端。客户端通过 EventSource 对象接收到这些数据，并在页面上显示这些数据。

总结

使用 SSE 实现推送比长轮询等传统方式更高效、更稳定。通过 EventSource.js，使用 SSE 实现实时推送变得更加容易。希望这篇文章能够帮助到您。

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