在 Web 应用程序中，通常需要实时推送数据给客户端，以便在不刷新页面的情况下更新页面内容。这种实时推送技术被称为 Server-sent Events（SSE），它使用 HTTP 协议来实现服务器到客户端的单向通信。
本文将介绍 TCP/IP 和 HTTP 协议下 SSE 的工作流，并提供示例代码以帮助读者更好地理解。
TCP/IP 协议下的 SSE 工作流
在 TCP/IP 协议下，SSE 使用长连接来实现服务器到客户端的通信。长连接是一种持久连接，客户端和服务器之间的连接不会在每次请求和响应之间断开。
下面是 TCP/IP 协议下 SSE 的工作流：
客户端向服务器发送 SSE 请求，请求头中包含
Accept: text/event-stream。服务器接收到请求后，将响应头中的 Content-Type 设置为
text/event-stream。服务器将数据以一定的格式发送给客户端，格式为：
event: <event-name> data: <event-data>
其中
<event-name>是事件的名称，<event-data>是事件的数据。客户端接收到数据后，解析数据并更新页面内容。
下面是一个使用 Node.js 实现的 TCP/IP 协议下 SSE 的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
----- ---- - -
-------- ------- --------
---------- --- -----------------
--
----------------- ------------
---------------- ------------------------------
-- ------
- ---- -
-------------------
----------
-
---
------------------- -- -- -
------------------- -- --------- -- ---- -------
---客户端代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---------------
-------
------
---- -------------------
--------
----- --------- - -----------------------------------
----- --------- - --- --------------------
------------------------------------- ----- -- -
----- ---- - ---------------------
------------------- - -------------
---
---------
-------
-------在上面的示例代码中，服务器每隔 1 秒钟向客户端发送一个名为 message 的事件，事件数据包含一个消息和时间戳。客户端通过监听 message 事件来更新页面内容。
HTTP 协议下的 SSE 工作流
在 HTTP 协议下，SSE 使用短连接来实现服务器到客户端的通信。短连接是一种即时连接，客户端和服务器之间的连接在每次请求和响应之间断开。
下面是 HTTP 协议下 SSE 的工作流：
客户端向服务器发送 SSE 请求，请求头中包含
Accept: text/event-stream。服务器接收到请求后，将响应头中的 Content-Type 设置为
text/event-stream，并将响应体分成多个数据块，每个数据块以\n\n结尾。服务器将数据以一定的格式发送给客户端，格式为：
event: <event-name>\n data: <event-data>\n\n
其中
<event-name>是事件的名称，<event-data>是事件的数据。客户端接收到数据后，解析数据并更新页面内容。
下面是一个使用 Node.js 实现的 HTTP 协议下 SSE 的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
----- ---- - -
-------- ------- --------
---------- --- -----------------
--
----------------- ------------
---------------- ------------------------------
-- ------
- ---- -
-------------------
----------
-
---
------------------- -- -- -
------------------- -- --------- -- ---- -------
---客户端代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---------------
-------
------
---- -------------------
--------
----- --------- - -----------------------------------
----- --- - --- -----------------
--------------- --------
------------------------------ ---------------------
-------------- - ----- -- -
----- ---- - --------------------------------------
----- ----- - -------------------
--- ------ ---- -- ------ -
-- ------------ --- -- -
---------
-
----- ----- - -----------------
----- --------- - ----------------------
----- --------- - ----------------------------------
-- ---------- --- ---------- -
------------------- - ------------------
-
-
--
-----------
---------
-------
-------在上面的示例代码中，服务器每隔 1 秒钟向客户端发送一个名为 message 的事件，事件数据包含一个消息和时间戳。客户端通过监听 onprogress 事件来更新页面内容。
结论
本文介绍了 TCP/IP 和 HTTP 协议下 SSE 的工作流，并提供了示例代码以帮助读者更好地理解。SSE 是一种实时推送技术，可用于实现服务器到客户端的单向通信，适用于需要实时更新页面内容的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67615730856ee0c1d4f783a0