SSE 技术实现前端推送数据的方法-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE

SSE (Server-Sent Events) 是一种浏览器与服务器之间实现实时通信的技术，它允许服务器向客户端发送事件流（Event Stream），并且客户端可以通过 EventSource API 接收到这些事件流。

与 WebSocket 不同的是，SSE 是基于 HTTP 协议的，因此可以直接使用浏览器的 HTTP 请求和响应机制，而不需要像 WebSocket 那样需要建立一个独立的 TCP 连接。

SSE 的优势

SSE 技术具有以下优势：

实时性：SSE 可以实现实时的数据推送，不需要客户端轮询服务器。
可靠性：SSE 建立在 HTTP 协议之上，因此不会受到防火墙等网络限制的影响。
简单易用：SSE 的使用非常简单，只需要在客户端使用 EventSource API 接收事件流即可。

SSE 实现前端推送数据的方法

下面我们来看一下如何使用 SSE 实现前端推送数据的方法。

服务端实现

服务端需要向客户端发送事件流，这可以通过使用 PHP、Node.js 等服务器端语言来实现。以下是一个使用 Node.js 实现 SSE 的示例代码：

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

http.createServer((req, res) => {
  // 设置响应头
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // 发送事件流
  setInterval(() => {
    res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
  }, 1000);
}).listen(8080);

在上面的代码中，我们使用 Node.js 的 http 模块创建一个 HTTP 服务器，并在请求处理函数中设置响应头，然后通过 setInterval 定时向客户端发送事件流。

客户端实现

客户端需要使用 EventSource API 来接收服务端发送的事件流。以下是一个简单的 HTML 页面，它使用 EventSource API 来接收服务端发送的事件流：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>SSE Demo</title>
</head>
<body>
  <div id="container"></div>
  <script>
    const eventSource = new EventSource('http://localhost:8080');
    const container = document.getElementById('container');

    eventSource.onmessage = (event) => {
      container.innerHTML += event.data + '<br>';
    };
  </script>
</body>
</html>

在上面的代码中，我们创建了一个 EventSource 对象，并传入服务端的 URL，然后通过 onmessage 事件处理函数来处理服务端发送的事件流。

总结

SSE 技术是一种实现前端推送数据的方法，它具有实时性、可靠性和简单易用等优势。我们可以使用 Node.js 等服务器端语言来实现 SSE，然后通过 EventSource API 在客户端接收服务端发送的事件流。SSE 技术在实际开发中具有很高的应用价值，可以用于实现聊天室、在线游戏、股票行情等实时应用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6505520595b1f8cacd1d2a45