使用 Server-Sent Events 实现的实时股票行情数据展示-JavaScript中文网-JavaScript教程资源分享门户

在很多 Web 应用程序中，需要展示实时数据，而实时数据的展示通常需要使用 WebSocket 或 Long Polling 技术来实现。然而，如果仅仅是需要展示一些简单的实时数据，使用 Server-Sent Events 技术是一个更加轻量和简单的方案。

Server-Sent Events (SSE) 是一种浏览器端向服务器请求数据的实时通信技术，它建立在 HTTP 基础之上，使用简单的文本协议来传输数据。与 WebSocket 相比，它有以下几个优点：

不需要另外的协议，使用 HTTP 协议即可。
服务器可以主动向客户端推送数据，而不需要客户端发起请求。
SSE 支持自定义事件和数据，可以根据实际情况进行定制。

在本文中，我们将介绍如何使用 SSE 技术，实现一个股票行情数据的实时展示页面。我们假设有一家证券公司开放了一组 API 接口提供股票信息，我们将通过 SSE 技术不断向这些接口发送请求，获取最新的股票行情数据，并在 Web 页面中实时展示。

服务器端实现

在服务器端，我们可以使用 Node.js 来实现一个 SSE 的服务端。下面是一个简单的示例代码：

const http = require('http');

const server = http.createServer((req, res) => {
  // 设置响应头，以指定使用 SSE 方式传输数据
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // 发送数据
  setInterval(() => {
    const data = {
      stockId: '000001',
      stockName: '平安银行',
      price: Math.random() * 20 + 10
    };
    res.write(`event: stock\n`);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 1000);
});

server.listen(3000, () => {
  console.log('SSE server is running on http://localhost:3000');
});

在上面的代码中，我们创建了一个 HTTP 服务器，并在其中使用 setInterval 定时向客户端推送数据。在每次推送数据时，我们都会设置 SSE 的事件类型 (event) 为 stock，并将数据直接以 JSON 格式发送给客户端。

需要注意的是，在 SSE 技术中，每条数据都需要以两个换行符结尾，作为数据的结束标志。

客户端实现

在客户端，我们可以使用 JavaScript 来订阅 SSE 数据，并将其实时展示在页面上。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>实时股票行情数据展示</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>实时股票行情数据展示</h1>
    <table>
      <thead>
        <tr>
          <th>股票代码</th>
          <th>股票名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody id="stock-list"></tbody>
    </table>

    <script>
      const stockList = document.getElementById('stock-list');
      const source = new EventSource('/api/stocks');

      source.onmessage = (event) => {
        const data = JSON.parse(event.data);
        const row = `
          <tr>
            <td>${data.stockId}</td>
            <td>${data.stockName}</td>
            <td>${data.price.toFixed(2)}</td>
          </tr>
        `;
        stockList.insertAdjacentHTML('beforeend', row);
      };
    </script>
  </body>
</html>

在上面的代码中，我们创建了一个简单的 HTML 页面用于展示股票行情数据，并使用 JavaScript 代码向 /api/stocks 接口订阅 SSE 数据。在接收到每次推送数据时，我们都会将其展示在表格中。

需要注意的是，在订阅 SSE 数据时，我们需要使用 EventSource 对象，并将 SSE 服务端的地址 /api/stocks 传给它。

总结

本文介绍了如何使用 SSE 技术，在 Web 应用程序中实现实时股票行情数据的展示。相比于传统的 WebSocket 或 Long Polling 技术，SSE 技术更加轻量和简单，可以满足某些特定场景下的实时数据展示需求。

需要注意的是，SSE 技术同时也有一些局限性，例如它不能支持双向通信，也不能使用二进制数据。在实际应用中，我们需要根据具体情况来选择合适的实时通信技术。

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