前言
随着 Web 技术的发展，越来越多的应用需要实时更新数据，如实时股票走势图、实时聊天等。而传统的轮询方式会给服务器造成很大的负担，不仅浪费带宽，还会导致延迟。因此，我们需要一种新的技术来实现实时更新数据，这就是 Server-Sent Events。
本文将介绍 Server-Sent Events 的基本原理和使用方法，并结合实际案例，演示如何使用 Server-Sent Events 实现实时股票走势图。
Server-Sent Events 基本原理
Server-Sent Events 是一种 HTML5 技术，它允许服务器向客户端推送数据，而不需要客户端轮询。它的基本原理是，客户端通过 EventSource 接口与服务器建立一个持久连接，服务器可以随时向客户端发送数据，客户端通过 onmessage 事件监听服务器发送的数据，并进行相应的处理。
Server-Sent Events 的数据格式是纯文本，格式如下：
event: 事件名称 data: 数据 event: 事件名称 data: 数据 ...
其中，event 表示事件的名称，可以省略；data 表示数据，可以是任意格式的文本数据，如 JSON、XML 等。
Server-Sent Events 使用方法
服务端实现
在服务端，我们需要设置响应头 Content-Type 为 text/event-stream，表示这是一个 Server-Sent Events 的响应。然后，我们可以向客户端发送数据，代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - --- ----------------------------
---------------- --------------
-- ------
----------------上面的代码会向客户端每隔一秒钟发送一条数据，数据格式为：
data: 16:30:45 data: 16:30:46 ...
客户端实现
在客户端，我们需要使用 EventSource 接口与服务端建立连接，并通过 onmessage 事件监听服务端发送的数据，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ------ ------------
-------
------
---- ----------------
--------
----- ----------- - --- ---------------------
--------------------- - ------- -- -
----------------------------------------- - -----------
--
---------
-------
-------上面的代码会每秒钟更新一个显示当前时间的 div，效果如下：
实时股票走势图案例
下面，我们结合实际案例，演示如何使用 Server-Sent Events 实现实时股票走势图。
服务端实现
在服务端，我们需要从股票数据源获取实时股票数据，并将数据格式化为 Server-Sent Events 的格式，然后发送给客户端。代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - -----------------
-------- -------------------- -
------ --- ----------------- ------- -- -
--------------------------------------------------------------------------------------------------------- ----- -- -
--- ---- - ---
-------------- ------- -- -
---- -- ------
---
------------- -- -- -
----- ------ - ------------------------- --------
----- ----- - ---------------------- --------------------
----- ------ - ---------------------- ---------------------
----- ------- - ---------------------- ------ ----------------------
----- --------- - ------ ---------- ------------ -------- ----------- --------- ------------ ---------- --------------------
-------------------
---
-------------- ----- -- -
------------
---
---
-
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
-------------
---------------------
----------------------
---------------------
---------------------
------------------
----------------------- -- -
--------------------------------- -- -
---------------------
---
-------------- -- -
-------------------
---
-- ------
----------------上面的代码会每隔五秒钟从股票数据源获取一次实时股票数据，数据格式为：
-- -------------------- ---- ------- ----- ---------- ------- -------- --------- --------- -------- ---------- --------- ----- ---------- -------- -------- ---------- --------- -------- ---------- --------- ----- ---------- ------- -------- --------- --------- -------- ---------- --------- ----- ---------- ------- -------- ---------- --------- --------- ---------- --------- ----- ---------- ----- -------- --------- --------- -------- ---------- ---------
客户端实现
在客户端，我们需要使用 Canvas 绘制股票走势图，并通过 EventSource 接口与服务端建立连接，获取实时股票数据，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ----- ----- ------------
-------
------ -
------- --- ----- -----
-
--------
-------
------
------- ---------- ----------- ----------------------
--------
----- ------ - ---------------------------------
----- ------- - ------------------------
----- ------ - ---
----- ------ - ------------- - ------ - --
----- ----- - ------------ - ------ - --
----- ----------- - --- ----------------------
--- ---- - ---
------------ - ----- ------------
----------------- - ---------
-------------------- - ---------
-------- ---------- -
--------------------
---------------------- --------
---------------------- ------ - --------
--------------------- - ------ ------ - --------
-----------------
-
-------- ------------ -
------------------------ ------ - ----- - -- ------ - ------ - ----
------------------------- ------ - --- ------ - ------ - ---
-
-------- ---------- -
----- -------- - --------------------------- -- -------------
----- -------- - --------------------------- -- -------------
----- ---------- - -------- - ---------
----- ---------- - --------------------------- -- ---------------
----- ---------- - --------------------------- -- ---------------
----- ------------ - ---------- - -----------
----- --------- - ----- - ------------ - ---
----- --------- - ------ - -----------
--------------------
---------------------- ------ - ------ - -------------- - --------- - -----------
------------------- ------ -- -
----- - - ------ - ----- - ----------
----- - - ------ - ------ - ----------- - --------- - ----------
----------------- ---
----------------------------- -- ------ - ------ - ----
---
-----------------
--------------------
---------------------- ------ - ------ - ---
--------------------- - ------ ------ - ------ - ---
-----------------
--------------------
--------------------- - -- --------
--------------------- - -- ------ - --------
-----------------
------------------- ------ -- -
----- - - ------ - ----- - ----------
----- - - ------ - ------ - ----------- - --------- - ----------
--------------------
-------------- -- -- -- ------- - ---
---------------
----- ----- - -------------- -------------------
----- ------ - - - --
----- ------ - - - --
----------------------- ------- --------
---
-
--------------------- - ------- -- -
----- ---- - -----------------------
----- --------- - --- ----------------------------
-----------
------- ------------
------ -----------------------
-------- -------------
---------- ---------
---
-- ------------ - --- -
-------------
-
-------------------- -- ------------- ---------------
-----------
-------------
-----------
--
---------
-------
-------上面的代码会每隔五秒钟获取一次实时股票数据，并绘制股票走势图，效果如下：
总结
本文介绍了 Server-Sent Events 的基本原理和使用方法，并结合实际案例，演示了如何使用 Server-Sent Events 实现实时股票走势图。Server-Sent Events 不仅可以用于实时股票走势图，还可以用于实时聊天、实时游戏等应用场景。它比传统的轮询方式更加高效、稳定，是实现实时更新数据的一种优秀选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cb528fadd4f0e0ff508212