在股票交易市场中，股票价格是时刻变化的。如果您是一名股票交易员或投资者，了解实时股票行情信息的重要性不言自明。因此，在网页应用程序中展示实时股票行情数据可以为用户提供更好的用户体验。
在这篇文章中，我们将介绍如何使用Server-sent Events（SSE）来实时推送股票行情数据。SSE可以从服务器发送事件流到客户端，这使得客户端可以实时地获取新数据，而无需定期进行轮询。
SSE的优点
与其他推送技术相比，SSE有以下优点：
零延迟：SSE服务器直接发送数据，而不需要客户端定期轮询服务器。因此，客户端可以实时接收新数据。
简单易用：SSE使用HTTP协议进行通讯，因此可以直接使用普通的Http服务器来实现SSE功能。相比WebSocket，SSE更加简单易用。
兼容性：SSE可以与任何现代浏览器兼容，因此可以应用于大多数web应用程序中。
实现SSE推送股票行情数据
要使用SSE推送股票行情数据，我们需要有以下内容：
- 一个HTTP服务器：我们可以使用任何HTTP服务器来实现SSE。例如，我们可以使用Node.js或Python等服务器端编程语言。
- SSE客户端：我们需要使用Javascript来实现SSE客户端。
在服务端，我们需要维护股票行情数据，并将其发送给SSE客户端。在这个例子中，我们将使用Node.js作为我们的服务器端。
1. 创建一个HTTP服务器
我们使用Node.js的express框架来创建一个HTTP服务器。以下是服务器的代码：
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000, () => {
console.log('Server started at http://localhost:3000');
});我们将静态文件存储在“public”目录中。
2. 实现SSE服务
我们将用Node.js EventEmitter来实现SSE服务。以下是我们的代码：
-- -------------------- ---- -------
----- ------------ - ------------------
----- ----- ------- ------------ -
------------- -
--------
-------------- -- -
--- ----- - -
----- -------
------ ------------------------- - ---- - --
--
------------------ -------
-- ------
-
-
----- ----- - --- --------在这里，我们创建了一个名为“Stock”的类，并将其扩展为EventEmitter。在Stock类的构造函数中，我们定义了一个setInterval函数，每秒钟生成一个新的随机股票价值，并使用emit方法触发'stock'事件。
3. SSE路由
现在，我们将创建SSE路由。SSE路由将启用SSE，并向客户端发送股票行情数据。以下是我们的代码：
-- -------------------- ---- -------
----------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------- ------ -- -
----- ---- - ---------------------
---------------- --------------
---
--------------- -- -- -
----------------------------- ------
----------
---
---在这里，我们定义了一个名为“/ stock”的路由。当客户端连接到该路由时，我们设置一些header属性，“Content-Type”设置为“text / event-stream”，“Cache-Control”设置为“no-cache”，并将“Connection”设置为“keep-alive”，以实现SSE连接。
接下来，我们向SSE发送股票行情数据。每当股票行情数据发生变化时，我们使用“res.write”将数据发送到客户端。
最后，我们使用'req.on'函数，以便在客户端断开连接时，停止股票行情数据的推送。
4. SSE客户端
现在，我们已经创建了SSE服务并将股票数据发送到客户端。现在，我们将在客户端上实现SSE。以下是我们的代码：
const eventSource = new EventSource('/stock');
eventSource.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log(data);
};在这里，我们使用EventSource构造函数来创建一个新的SSE连接。我们向它传递'/ stock'路由来建立与服务器的连接。当服务器向客户端发送新的数据时，客户端使用'onmessage'回调函数来处理来自SSE服务器的事件。
在这里，我们将接收到的数据解析为JSON格式，并将其记录到控制台上。
常见问题
是否支持响应式？
是的，当有新的股票数据时，SSE服务器会自动发送事件流，并实时更新客户端。因此，支持实时响应。
如何与其他后端框架配合使用？
SSE协议很容易与其他后端框架集成，例如：Flask/Django等。
有没有必要做客户端重试机制？
SSE客户端本身就有一个内置的重试机制。如果与SSE服务器的连接中断，并且客户端还没有收到最新的事件，则客户端会自动重新连接SSE服务器。
结论
在这篇文章中，我们介绍了如何使用SSE推送实时股票行情数据。SSE是一个非常流行的技术，因为它可以轻松地推送数据，同时减少了网络带宽和服务器请求。使用SSE可以为网页应用程序提供更好的用户体验，同时提高数据传输的效率和速度。
下面是完整的代码示例：
server.js
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-------------------------------- - ------------
---------------- -- -- -
------------------- ------- -- ------------------------
---
----- ------------ - ------------------
----- ----- ------- ------------ -
------------- -
--------
-------------- -- -
--- ----- - -
----- -------
------ ------------------------- - ---- - --
--
------------------ -------
-- ------
-
-
----- ----- - --- --------
----------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------- ------ -- -
----- ---- - ---------------------
---------------- --------------
---
--------------- -- -- -
----------------------------- ------
----------
---
---index.html
-- -------------------- ---- -------
--------- -----
------
------
---------------- -------------
-------
------
--------
----- ----------- - --- ----------------------
--------------------- - ------- -- -
----- ---- - -----------------------
------------------
--
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6748235893696b0268e73127