在前端开发中，实现实时数据推送是一项常见的需求。其中，Server-Sent Events（SSE）是一种简单而强大的技术，可以实现服务器向客户端推送实时数据。本文将介绍如何使用 SSE 实现实时价格行情推送。
什么是 Server-Sent Events？
Server-Sent Events 是一种基于 HTTP 的技术，它允许服务器向客户端推送数据。与 WebSocket 不同的是，SSE 是单向的，只能从服务器向客户端发送数据，而不能反过来发送数据。另外，SSE 还支持自定义事件和重连机制。
实现实时价格行情推送
下面我们将使用 SSE 实现实时价格行情推送。假设我们有一个股票行情网站，需要实时推送股票价格给客户端。我们可以使用以下代码实现：
服务器端代码
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ----- - ------------- - ----
----------------- ------------ ---------------
-- ------
----------------以上代码使用 Node.js 创建了一个 HTTP 服务器，每秒钟向客户端推送一个随机的股票价格。其中，Content-Type 设置为 text/event-stream，表示该响应是 SSE 格式的数据流。Cache-Control 设置为 no-cache，表示不缓存该响应。Connection 设置为 keep-alive，表示保持持久连接。
在发送数据时，我们使用了自定义的 price 事件，并将价格数据作为 data 字段发送。注意，每个事件需要以两个换行符结尾，表示该事件结束。
客户端代码
const eventSource = new EventSource('http://localhost:3000');
eventSource.addEventListener('price', (event) => {
const price = parseFloat(event.data);
console.log(`股票价格：${price}`);
});以上代码创建了一个 EventSource 对象，并指定服务器的地址。在收到服务器发送的 price 事件时，将价格数据解析为浮点数，并输出到控制台。
总结
本文介绍了如何使用 Server-Sent Events 实现实时价格行情推送。通过 SSE，我们可以轻松地实现服务器向客户端推送实时数据，而无需使用复杂的 WebSocket 技术。同时，SSE 还支持自定义事件和重连机制，可以满足不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c9b7bcadd4f0e0ff38b56b