在现代 Web 应用程序中，实时数据变得越来越重要，特别是在金融领域。在这个领域中，股票市场数据的实时更新对于投资者来说是至关重要的。在这篇文章中，我们将介绍如何使用 Server-Sent Events 技术来实现一个实时股票数据应用程序。
Server-Sent Events 简介
Server-Sent Events（SSE）是一项 HTML5 技术，它允许服务器向客户端推送数据。相对于 WebSocket，SSE 更加简单，因为它使用了标准的 HTTP 协议。SSE 可以用于实现实时更新的 Web 应用程序，比如股票市场数据应用程序。
SSE 的核心是“事件流”，它是一个不断更新的数据流，客户端可以通过监听事件流来获取最新的数据。在事件流中，每个事件都是一个包含数据的文本块，每个文本块以“data:”开头。当服务器有新数据时，它会将新数据添加到事件流中，客户端会自动接收到最新的数据。
实现一个实时股票数据应用程序
在本文中，我们将使用 SSE 技术来实现一个简单的实时股票数据应用程序。该应用程序将从一个 JSON API 获取股票市场数据，并使用 SSE 将最新的数据推送到客户端。
服务端代码
首先，我们需要编写一个服务端代码，以获取股票市场数据并将其推送到客户端。我们将使用 Node.js 和 Express 库来实现服务端代码。
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
const { json } = require("body-parser");
const stocks = [
{ symbol: "AAPL", price: 145.86 },
{ symbol: "GOOGL", price: 2735.72 },
{ symbol: "MSFT", price: 281.88 },
{ symbol: "AMZN", price: 3322.00 },
{ symbol: "FB", price: 357.13 },
];
app.use(json());
app.get("/stocks", (req, res) => {
res.set({
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
"Connection": "keep-alive",
});
setInterval(() => {
const stock = stocks[Math.floor(Math.random() * stocks.length)];
const data = `data: ${JSON.stringify(stock)}\n\n`;
res.write(data);
}, 2000);
});
server.listen(3000, () => {
console.log("Server started on port 3000");
});在上面的代码中，我们定义了一个名为“/stocks”的路由，当客户端访问该路由时，服务器将发送一个事件流到客户端。事件流的 Content-Type 设置为“text/event-stream”，这是 SSE 的标准 MIME 类型。服务器还设置了一些响应头，以确保客户端保持连接并不断接收新数据。
在 setInterval 函数中，我们从 stocks 数组中随机选择一只股票，并将其作为 JSON 字符串发送到客户端。我们使用“\n\n”来分隔事件，这是 SSE 的标准分隔符。
客户端代码
现在，我们需要编写客户端代码，以从服务器获取事件流并更新 UI。以下是客户端代码：
<!DOCTYPE html>
<html>
<head>
<title>Real-time Stock Market Data</title>
</head>
<body>
<h1>Real-time Stock Market Data</h1>
<ul id="stocks"></ul>
<script>
const stocks = document.getElementById("stocks");
const eventSource = new EventSource("/stocks");
eventSource.addEventListener("message", (event) => {
const stock = JSON.parse(event.data);
const li = document.createElement("li");
li.textContent = `${stock.symbol}: $${stock.price.toFixed(2)}`;
stocks.appendChild(li);
});
</script>
</body>
</html>在上面的代码中，我们创建了一个包含一个 ul 元素的 HTML 页面。我们使用 JavaScript 创建了一个名为“eventSource”的 EventSource 对象，该对象向服务器发出一个 HTTP 请求，并将事件流连接到客户端。我们在 eventSource 对象上添加了一个“message”事件监听器，该监听器将在服务器推送新数据时被触发。我们使用 JSON.parse 函数将 JSON 字符串转换为 JavaScript 对象，并将其添加到 HTML 页面中的 ul 元素中。
运行应用程序
现在，我们已经编写了服务端和客户端代码，可以通过以下命令启动应用程序：
node server.js
在浏览器中打开以下 URL：
http://localhost:3000/
您应该能够看到一个包含最新股票价格的实时更新列表。
总结
在本文中，我们介绍了如何使用 Server-Sent Events 技术来实现一个实时股票数据应用程序。我们编写了服务端和客户端代码，并解释了 SSE 的工作原理。SSE 是一种简单而有效的技术，可以用于实现实时更新的 Web 应用程序。如果您正在开发类似的应用程序，我们希望本文能帮助到您。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658e37e0eb4cecbf2d40ad1f