SSE 技术实现实时推送在线数据-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，实时推送在线数据是一个常见的需求。例如，在在线聊天应用程序中，用户需要看到实时发送和接收的消息；在股票交易应用程序中，用户需要看到实时更新的股票价格。为了实现这些实时推送功能，我们可以使用 Server-Sent Events（SSE）技术。

什么是 SSE？

SSE 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送实时数据。与 WebSocket 不同，SSE 是单向的，只能由服务器向客户端发送数据。SSE 使用纯文本格式（text/event-stream）发送数据，可以发送任何类型的数据，包括 JSON、XML、HTML 等。

如何使用 SSE？

使用 SSE 实现实时推送在线数据需要以下步骤：

1. 创建一个 SSE 连接

在客户端，我们需要创建一个 SSE 连接，以便从服务器接收数据。我们可以使用 JavaScript 中的 EventSource 对象创建 SSE 连接。例如：

const source = new EventSource('/sse');

上面的代码创建了一个 SSE 连接，它将从服务器的 /sse 路径接收数据。

2. 服务器端发送数据

在服务器端，我们需要向 SSE 连接发送数据。我们可以使用以下代码发送数据：

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

response.write('data: ' + JSON.stringify({ message: 'Hello, world!' }) + '\n\n');

上面的代码将发送一个 JSON 对象，其中包含一条消息。注意，我们需要设置正确的 Content-Type、Cache-Control 和 Connection 头信息，以确保 SSE 连接能够正常工作。

3. 处理接收到的数据

在客户端，我们需要处理接收到的数据。我们可以使用以下代码处理数据：

source.addEventListener('message', function(event) {
  const data = JSON.parse(event.data);
  console.log(data.message);
});

上面的代码将在收到消息时打印消息内容。

示例代码

以下是一个完整的 SSE 示例代码，它将从服务器接收实时数据并在页面上显示：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SSE Example</title>
</head>
<body>
  <ul id="messages"></ul>

  <script>
    const source = new EventSource('/sse');
    const messages = document.getElementById('messages');

    source.addEventListener('message', function(event) {
      const data = JSON.parse(event.data);
      const li = document.createElement('li');
      li.textContent = data.message;
      messages.appendChild(li);
    });
  </script>
</body>
</html>

服务器端代码：

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

http.createServer(function(request, response) {
  if (request.url === '/sse') {
    response.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    setInterval(function() {
      const data = { message: 'Hello, world!' };
      response.write('data: ' + JSON.stringify(data) + '\n\n');
    }, 1000);
  }
}).listen(3000);

上面的代码将每秒发送一条消息到 SSE 连接中。

总结

SSE 技术可以帮助我们实现实时推送在线数据的功能。使用 SSE 需要在客户端创建 SSE 连接并在服务器端发送数据。SSE 技术比 WebSocket 更加简单，适用于一些简单的实时推送场景。

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