什么是 Server-Sent Events？
Server-Sent Events (SSE) 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送异步事件流，而不需要客户端发起请求。SSE 的核心是一个单向的、持久的 HTTP 连接，服务器通过这个连接向客户端发送事件流，客户端通过监听这个连接来接收事件。
SSE 的优点在于它不需要客户端轮询服务器，从而减少了网络流量和服务器负载，并且能够实时推送数据给客户端，从而提高了用户体验。
如何使用 SSE？
使用 SSE 需要以下几个步骤：
- 在客户端创建一个 EventSource 对象，指定要连接的服务器端点。
- 在服务器端点上发送事件流，事件流需要以 "text/event-stream" 格式发送，并且需要以 "data:" 开头，以 "\n\n" 结束。
- 在客户端监听 EventSource 对象的 "message" 事件，从事件中获取服务器发送的数据。
下面是一个简单的 SSE 示例代码：
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
--- -------------------
--------
----- ----------- - --- --------------------
--------------------- - ------- -- -
----- ------- - -----------
----- -- - -----------------------------
-------------- - --------
----------------------------------------------------
--
---------
-------
-------在上面的代码中，我们创建了一个 EventSource 对象，并指定连接的服务器端点为 "/sse"。然后我们监听 "message" 事件，当服务器发送事件流时，我们将事件流中的数据添加到页面上的一个列表中。
在服务器端，我们需要发送事件流。下面是一个使用 Node.js 和 Express 框架的 SSE 示例代码：
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ------- - -------- ---- -- ----- ---------
---------------- -----------------
-- ------
---
---------------- -- -- -
------------------- ------- -- ------------------------
---在上面的代码中，我们创建了一个路由 "/sse"，当客户端连接到这个路由时，我们设置响应头，告诉浏览器返回的是一个 "text/event-stream" 类型的数据，并且禁止缓存和关闭连接。然后我们启动一个定时器，每隔一秒钟发送一个包含当前时间的事件流。
SSE 在移动 Web 应用程序中的应用
SSE 在移动 Web 应用程序中有很多应用，比如实时聊天、实时通知、实时数据更新等。下面我们以实时聊天为例，介绍如何在移动 Web 应用程序中使用 SSE。
首先，我们需要在客户端创建一个 SSE 连接，并监听 "message" 事件。当服务器发送聊天消息时，我们将消息添加到聊天窗口中。下面是一个简单的聊天客户端示例代码：
--------- -----
------
------
----- ----------------
----------- ------------
-------
------
---- ----------------
------
------ ----------- -------------
------- ---------------------------
-------
--------
----- ---- - --------------------------------
----- ------------ - -----------------------------------
----- ----------- - --- ---------------------
--------------------- - ------- -- -
----- ------- - -----------
----- --- - ------------------------------
--------------- - --------
----------------------
--
--------------------------------------------------------- ------- -- -
-----------------------
----- ------- - -------------------
------------------ - ---
-------------- -
------- -------
----- --------------------------
-------- ---------------- -------------------
---
---
---------
-------
-------在上面的代码中，我们创建了一个 SSE 连接，并指定连接的服务器端点为 "/chat"。然后我们监听 "message" 事件，当服务器发送聊天消息时，我们将消息添加到一个聊天窗口中。我们还创建了一个表单，当用户提交表单时，我们使用 fetch API 向服务器发送聊天消息。
在服务器端，我们需要处理客户端发送的聊天消息，并将消息发送给所有连接的客户端。下面是一个使用 Node.js 和 Express 框架的聊天服务器示例代码：
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
---------------------------
---------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----- ---- - --------- -- -
---------------- -----------------
--
-------------------
--------------- -- -- -
------------------------------------- ---
---
---
----------------- ----- ---- -- -
----- ------- - -----------------
---------------------- -- ---------------
--------------------
---
----- ------- - ---
---------------- -- -- -
------------------- ------- -- ------------------------
---在上面的代码中，我们创建了一个路由 "/chat"，当客户端连接到这个路由时，我们设置响应头，告诉浏览器返回的是一个 "text/event-stream" 类型的数据，并且禁止缓存和关闭连接。然后我们创建一个 send 函数，将该函数添加到客户端列表中，当有新的聊天消息时，我们遍历客户端列表，将消息发送给所有连接的客户端。当客户端关闭连接时，我们从客户端列表中删除该客户端。
总结
Server-Sent Events 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送异步事件流，而不需要客户端发起请求。SSE 的优点在于它不需要客户端轮询服务器，从而减少了网络流量和服务器负载，并且能够实时推送数据给客户端，从而提高了用户体验。在移动 Web 应用程序中，SSE 可以用于实现实时聊天、实时通知、实时数据更新等功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653b45ba7d4982a6eb59d6ef