在现代 Web 应用程序中，实时数据是至关重要的。通过 SSE（Server-Sent Events）技术，我们可以实现实时网页交互和计数器功能。本文将深入介绍 SSE 技术的实现方法和应用场景，并提供示例代码以供学习和指导。
SSE 技术简介
SSE 技术是一种服务端向客户端发送事件流的技术。与 WebSocket 不同，SSE 是基于 HTTP 协议实现的，并且只支持服务端向客户端发送事件流，而不支持双向通信。SSE 技术可以用于实现实时网页交互、计数器、通知等功能。
SSE 技术实现
服务端实现
服务端需要使用特定的 HTTP 响应头来发送事件流。以下是一个最基本的 SSE 事件流响应：
HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache
其中，Content-Type 指定了响应内容的类型为 text/event-stream，这是 SSE 技术的标准类型。Cache-Control 指定了响应内容不应被缓存。
在事件流中，每个事件都有一个标识符和一个数据字段。以下是一个事件的基本格式：
id: 123\n data: This is some data\n\n
其中，id 是可选的标识符，可以用于客户端断线重连时从服务端获取缺失的事件。data 是事件的数据字段，可以是任何类型的数据。每个事件以两个换行符结尾。
服务端可以使用以下代码来实现 SSE 技术：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- ----------
---
--- -- - --
-------------- -- -
-------------- ----------
---------------- ----- ----------------------------
-----
-- ------
----------------以上代码创建了一个 HTTP 服务器，每秒向客户端发送一个事件，事件的数据为当前时间的 ISO 字符串。
客户端实现
客户端需要使用 JavaScript 来监听服务端发送的事件流。以下是一个最基本的 SSE 客户端实现：
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', event => {
console.log(event.data);
});以上代码创建了一个 EventSource 对象，监听 /sse 路径的事件流。addEventListener 方法用于监听 message 事件，当服务端发送事件时，客户端会在控制台输出事件的数据。
SSE 技术应用
实时网页交互
SSE 技术可以用于实现实时网页交互，例如在线聊天室、实时评论等功能。以下是一个简单的聊天室示例：
服务端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------- - ---
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- ----------
---
--- -- - --
-------------- -- -
-- ---------------- - -- -
----- ------- - -----------------
-------------- ----------
---------------- ---------------------------------
-----
-
-- ------
----------------
----------------------- ---- -- -
-- ----------- --- ------- -
--- ---- - ---
-------------- ----- -- -
---- -- -----------------
---
------------- -- -- -
----- ------- - -----------------
-----------------------
----------
---
- ---- -
------------------ -
--------------- -----------
---
-----------
------
------
--- -------------------
----- ------------------------------
------ ----------- ------------------
------- ---------------------------
-------
--------
----- ----------- - --- --------------------
--------------------------------------- ----- -- -
----- ------- - -----------------------
----- -------- - ------------------------------------
----- -- - -----------------------------
-------------- - -------------
-------------------------
---
-------- ------------------ -
-----------------------
----- ------------ - ----------------------------------------
----- ------- - -
----- ------------------
--
------------------ -
------- -------
----- -----------------------
---
------------------ - ---
-
---------
-------
-------
---
----------
-
----------------以上代码创建了两个 HTTP 服务器，一个用于 SSE 事件流，一个用于聊天室页面和消息发送。当客户端发送消息时，服务端将消息存储在数组中，然后发送到 SSE 事件流中。客户端通过 SSE 技术监听事件流，当接收到新消息时，将其显示在页面中。
计数器
SSE 技术可以用于实现计数器功能，例如在线人数统计、网站访问量统计等功能。以下是一个简单的在线人数统计示例：
服务端代码：
-- -------------------- ---- -------
----- ---- - ----------------
--- ----- - --
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- ----------
---
--- -- - --
-------------- -- -
-------------- ----------
---------------- ---------------
-----
-- ------
----------------
----------------------- ---- -- -
------------------ -
--------------- -----------
---
-----------
------
------
--------- ------ ----- ----------------------
--------
----- ----------- - --- --------------------
--------------------------------------- ----- -- -
----- ----- - ---------------------------------
----------------- - -----------
---
---------
-------
-------
---
----------
----------------以上代码创建了两个 HTTP 服务器，一个用于 SSE 事件流，一个用于在线人数统计页面。当客户端访问在线人数统计页面时，服务端将当前在线人数发送到 SSE 事件流中。客户端通过 SSE 技术监听事件流，当接收到在线人数更新事件时，将其显示在页面中。
总结
SSE 技术是一种实现实时网页交互和计数器功能的有效方法。通过本文的介绍和示例代码，相信读者已经掌握了 SSE 技术的实现方法和应用场景。在实际开发中，我们可以根据具体需求灵活运用 SSE 技术，提升 Web 应用程序的实时性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66160808d10417a2225ea7fe