在现代 Web 应用程序中，实时通信已成为不可或缺的一部分。对于许多实时通信场景来说，使用服务器发出事件（Server-sent Events，SSE）是一种有效的实现方法。在本文中，我们将探讨使用 SSE 实现一个简单的 Web 聊天室，并介绍学习 SSE 的基本概念和技能。
SSE 简介
SSE 是一种从服务器向客户端推送的流式数据协议。与传统的 WebSockets 不同，SSE 只能在客户端上进行单向通信，并且只需要使用简单的 HTTP 协议，而无需建立双向通信通道。SSE 主要有以下特点：
- 适用于 Web 推送和实时通信场景；
- 基于纯文本协议，易于调试和部署；
- 可以在网络故障或服务器超时时自动恢复连接；
- 不需要特殊的服务器端支持，可以使用任意 HTTP 服务器；
- 可以使用自定义事件名和数据结构来传输数据。
实现 SSE 聊天室
现在我们开始使用 SSE 实现一个简单的 Web 聊天室，该聊天室将使用 Node.js 和 Express 框架作为服务器端。我们将在客户端上打开 SSE 连接，然后将聊天信息发送到服务器并将其广播到所有用户。
服务器端实现
在服务器端，我们需要使用 SSE 来广播聊天消息。首先，我们创建一个名为/events的 SSE 路由，并使用setInterval函数定期发送事件。对于每个客户端连接，我们都会创建一个text/event-stream的响应流，在响应流上写入 SSE 数据，直到客户端断开连接。
-- ---------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------
----- ------ - -----------------------
----- ---- - -----
-- --- -----
------------------ ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- ---- - ---- ----- ----- - -------
----- ----- - -------------- -- -
---------------- -----------
-- ------
-- ------ --- ----- ---- --- ---------- -- ------
--------------- -- -- -
---------------------
---
---
-- ----- --- ------
------------------- -- -- -
------------------- ------- -- ---- ----------
---在这个简单的示例中，我们只是每 5 秒钟向客户端发送一个名为“ping”的事件。在实际应用中，我们将使用“message”事件来广播聊天消息。
客户端实现
在客户端上，我们使用 JavaScript 来打开 SSE 连接并建立与服务器的通信。首先，我们创建一个新的 EventSource 实例，该实例将 SSE 流连接到服务器的 /events 路由。当服务器端发送新事件时，我们将使用 onmessage 回调函数来处理事件数据。
---- ---------- ---
--------- -----
------
------
----- ----------------
---------- ----------------
-------
------
--- -------------------
------ ------------ ------------
------- -----------------------
--------
----- -------- - ------------------------------------
----- ------------ - -----------------------------------
----- ---------- - --------------------------------
----- ------ - --- -----------------------
---------------- - ------- -- -
----- ---- - -----------
------------------ -- -------------------
--
------------------------------------ -- -- -
----- ------- - -------------------
----------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ------- ---
---------- -- -
------------------ - ---
---
---
---------
-------
-------在这个示例中，我们还添加了一个文本输入框和一个发送按钮，让用户可以发送聊天消息。当用户点击“发送”按钮时，我们将使用 fetch API 发送 POST 请求到服务器端的 /message 路由，并将用户输入的消息作为 JSON 数据发送。
服务器端响应
在服务器端，我们可以使用 Express 中间件来接收 POST 请求并将聊天消息广播到每个 SSE 连接。我们使用一个名为broadcast的数组来记录所有 SSE 连接的响应对象，然后将所有聊天消息发送到所有连接。
-- ---------
----- ---------- - -----------------------
----- ---------- - ------------------
-- --- -----------
----- --------- - ---
-- --- -----
------------------ ----- ---- -- -
-- ---
--------------------
---
-- ------- -----
-------------------- ----------- ----- ---- -- -
----- ------- - -----------------
-------------------------- -- -
------------------- -----------------
---
--------------------
---在此示例中，我们将请求的 JSON 主体解析为 JS 对象，并使用 forEach 循环遍历所有 SSE 连接并向每个连接发送新的聊天消息。
结论
使用 SSE 可以轻松地在 Web 应用程序中实现实时通信功能。在本文中，我们学习了如何使用 SSE 实现一个简单的 Web 聊天室，并介绍了 SSE 的基本概念和技能。通过了解 SSE 的工作原理，我们可以更好地利用 SSE 实现更复杂的实时通信场景。在未来的 Web 开发工作中，SSE 将成为一种非常有用的工具，帮助我们更高效地构建实时通信的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672f45e6eedcc8a97c8dade9