随着 Web 技术的不断发展，实时通信的需求越来越大。传统的 HTTP 请求响应模式无法满足实时通信的需求，因此 HTML5 引入了一种新的通信协议，即 Server-Sent Events（SSE）。在本文中，我们将探讨如何使用 SSE 实现一个 HTML5 实时聊天室。
什么是 Server-Sent Events
Server-Sent Events 是一种基于 HTTP 的协议，它允许服务器推送事件数据到客户端。SSE 的精髓在于它使用了长轮询技术，可以实现持久连接。这代表着，一旦建立了连接，服务器就可以持续向客户端发送事件数据，而客户端只需要等待事件到来，无需再发起请求。
SSE 的事件数据是以文本形式返回的，它们可以是任何格式的数据，例如 JSON、XML 或纯文本。在 HTML5 中，我们可以使用 EventSource 对象来与 SSE 进行交互。
实现实时聊天室
现在，我们将使用 SSE 实现一个简单的实时聊天室。在此聊天室中，用户可以发送消息，并实时将消息发送给所有在线用户。
服务端实现
我们将使用 Node.js 和 Express 框架来实现服务端。首先，我们需要安装依赖：
npm install express uuid --save
在服务端代码中，我们需要实现一个 SSE 路由来处理客户端请求。以下是代码示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- - --- ---- - - ----------------
----- --- - ----------
----- ---- - ---------------- -- -----
-- -------- --- -
----- ----- - --- ------
-- --- --
------------------ ----- ---- -- -
-- -----
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- ---------- --
----- -------- - -------
-- --------- --- -
----- ---------- - - ---- -------- --
------------------- ------------
-- ---------
----------------- ----------- ------------------
-- ----------
--------------- -- -- -
-----------------------
-------------------------- ---------- ---------
---
---
-- -------
-------------------- --------------- ----- ---- -- -
----- ------- - -----------------
-- --------- -
---------------------- -------------
-- ----------
---------------- --- -- -- -
----------------- -------------- -----------------
---
--------------------
- ---- -
--------------------
-
---
---------------- -- -- -
------------------- -- --------- -- ---- ----------
---在上述代码中，我们首先设置了 SSE 的响应头，并为每个客户端创建一个唯一的事件流 ID。接下来，我们将客户端信息存储在一个 Map 中，这样我们就可以根据客户端 ID 来发送事件。我们还为每个客户端发送了一个初始化事件，并监听客户端关闭的事件。最后，我们实现了一个发送消息的路由，它会向所有客户端发送一个事件。
客户端实现
在客户端代码中，我们需要创建一个 EventSource 对象来与服务端 SSE 进行交互。以下是示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ------------
-------
------
-------- ---------
---- ------- ---
---- --------------------
---- ------- ---
------
------ ----------- ------------ ------------------ ---- ------------
------- ---------------------------
-------
--------
----- -------- - ------------------------------------
----- ------------ - -----------------------------------
----- ---- - -------------------------------
-- -- --- --
----- ----------- - --- -----------------------
-- -------
------------------------------------ ------- -- -
----- -------- - -----------
-------------------------- --------------
---
-- ------
--------------------------------------- ------- -- -
----- ------- - -----------
------------------ -- ------------------------
---
-- --------
------------------------------- ------- -- -
-----------------------
----- ------- - --------------------------
-- --------- -
-- --------
----------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ------- --
---
-- ----
------------------ - ---
-
---
---------
-------
-------在上述代码中，我们首先创建了一个 EventSource 对象，并监听了两个事件：初始化事件和消息事件。当初始化事件触发时，我们可以获得客户端的事件流 ID。当消息事件触发时，我们使用 DOM 操作将消息添加到容器中。最后，我们监听了表单提交事件，并向服务端发送了一个 POST 请求，以发送消息。
总结
在本文中，我们使用 SSE 实现了一个简单的 HTML5 实时聊天室。使用 SSE 可以轻松地实现实时通信，而无需使用 WebSocket 或其他复杂的协议。但是，由于 SSE 使用的是单向通信，无法像 WebSocket 那样实现双向通信。因此，SSE 更适合那些需要向客户端推送实时数据的场景，例如实时通知、股票行情等。
在实际开发中，SSE 的使用也具有一定的局限性。例如，SSE 不支持跨域请求，无法发送二进制数据，且无法获知连接状态等。因此，在使用 SSE 时需要考虑其局限性，并针对具体场景进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486f99f48841e98945a20a6