前言
Server-Sent Events（简称 SSE）是一种利用 HTTP 协议自动推送数据到客户端的技术。相较于 WebSocket，SSE 更加轻量级，适用于一些简单的实时通信场景，比如股票行情展示。
本文主要介绍如何使用 SSE 技术实现实时股票行情展示，并提供示例代码。
实时股票行情展示的原理
股票市场的行情变化非常迅速，且多数情况下都是实时更新的。因此实时股票行情的展示是一个常见的需求。一种常见的做法是使用长轮询，即客户端每隔一段时间向服务器发送一次请求，服务器处理完请求后立刻返回响应。这样可以保证数据实时更新，但是会给服务器造成不小的压力。
实时股票行情展示也可以通过 SSE 实现。SSE 可以保持服务器与客户端的连接一直打开，然后服务器可在有数据变化时向客户端推送数据。
使用 SSE 技术实现实时股票行情展示
下面将提供一个简单的 SSE 示例应用，该应用会每隔一段时间向服务器请求股票行情数据，并在数据发生变化时使用 SSE 技术推送更新到客户端上。
1. 服务器端代码
-- -------------------- ---- -------
----- ---- - ----------------
-- ------
----- --------- - -
- ----- ------- ------ --- --
- ----- ------- ------ --- --
- ----- ------- ------ --- -
--
-- -- --- ------
-------- --------------- -
-- -- --- ---
------------------ -
--------------- --------------------
---------------- -----------
----------- ------------
---
-- ----------
----- ----- - ---------------------- -
----- ----- - ------------------------ - ------------------
----- ----- - -----------------
----------------- -----------------
---------------- -------------------------------
-- ------
-- --------------
--------------- ---------- -
---------------------
---
-
-- -- ---- ---
----- ------ - ------------------------------- ---- -
-- ------------------- -- ------------------ --- -------------------- -
----------------
- ---- -
------------------ - --------------- ----------- ---
-----------
--------- -----
------
------
----- ----------------
---------------- ----- --------------
-------
------
------------- ----- -----------
---- ------------------
--------
----- ------------- - ----------------------------------
----- ------ - --- -----------------------
--------------------------------------- --------------- -
----- ----- - -----------------------
----- -- - ------------------------------
------------ - ---------- - -- - - ------------
------------------------------
---
---------
-------
-------
---
----------
-
---
-- -----
--------------------
------------------- --------- -- ---- -------在以上代码中，我们定义了一个 /stream 路由来处理 SSE 请求，当客户端以 text/event-stream 的形式请求该路由时，服务器端会向客户端发送实时股票行情数据，并设置 SSE 响应头，保持连接一直打开。
2. 客户端代码
我们在客户端中使用 EventSource 对象来订阅 SSE 事件，当服务端推送股票行情数据时会触发 stock-update 事件，我们在事件处理函数中更新界面展示。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ----- --------------
-------
------
------------- ----- -----------
---- ------------------
--------
----- ------------- - ----------------------------------
----- ------ - --- -----------------------
--------------------------------------- --------------- -
----- ----- - -----------------------
----- -- - ------------------------------
------------ - ---------- - -- - - ------------
------------------------------
---
---------
-------
-------以上的客户端代码中，我们使用了 EventSource 对象来与服务器建立 SSE 连接，并在 stock-update 事件处理函数中更新股票行情数据的展示。
总结
本文简要介绍了如何使用 SSE 技术实现实时股票行情展示，并提供了示例代码。使用 SSE 技术可以轻松实现轻量级的实时通信，且相较于长轮询减少了服务器的负载。在实际应用中，我们可以基于该示例应用进行更加复杂的实时互动场景开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ddd044f6b2d6eab3912764