Server-sent Events（SSE）是一种 Web 技术，可以实现服务器向客户端推送实时数据。在前端中，SSE 可以用于实现在线聊天功能，让用户能够实时收到其他用户发送的消息。本文将介绍如何使用 SSE 实现在线聊天功能，并提供示例代码。
SSE 简介
SSE 是一种基于 HTTP 的技术，它允许服务器向客户端发送一系列事件（event），客户端通过 EventSource API 接收这些事件。SSE 与 WebSocket 相似，但有以下几点不同：
- SSE 使用 HTTP 协议，而 WebSocket 使用自定义协议。
- SSE 只能从服务器向客户端发送消息，而 WebSocket 可以双向通信。
- SSE 可以通过 HTTP 代理和负载均衡器进行传输，而 WebSocket 需要特殊的配置才能在这些环境下工作。
SSE 的优点是它非常简单易用，可以轻松地将实时数据推送到客户端，而不需要复杂的客户端和服务器端代码。
实现在线聊天
为了实现在线聊天功能，我们需要将 SSE 用于服务器向客户端推送消息。我们可以使用 Express 框架和 Node.js 的 http 模块来实现。
服务器端代码
首先，我们需要创建一个 HTTP 服务器，并在客户端连接时向其发送一个 SSE 流：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- --- - ----------
----------------------------------
----- ------ - -----------------------
------------------- -- -- -
------------------- --------- -- ---- -------
---
--- ------- - ---
------------------ ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- --- ------ -- ---- -- -------
------------------
-- ------ ------ ---- ---------- -- ------
--------------- -- -- -
------- - ---------------- -- - --- -----
---
---这段代码创建了一个 HTTP 服务器，并在客户端连接时向其发送一个 SSE 流。我们使用 express.static 中间件来提供静态文件，这样我们可以将客户端的 JavaScript 和 CSS 文件放在 public 目录中。
当客户端连接时，我们向其发送一个 SSE 流。我们设置了以下响应头：
Content-Type: text/event-stream：告诉客户端这是一个 SSE 流。Cache-Control: no-cache：告诉客户端不要缓存响应。Connection: keep-alive：告诉客户端保持连接打开。
我们还创建了一个名为 clients 的数组，用于存储所有连接到 SSE 流的客户端。当客户端连接时，我们将其添加到 clients 数组中。当客户端关闭连接时，我们将其从 clients 数组中删除。
接下来，我们需要添加一个路由来处理客户端发送的消息：
-- -------------------- ---- -------
-------------------- --------------- ----- ---- -- -
----- - ------- - - ---------
---------------------- -- -
------------------- ------------------ ------- ----------
---
--------------------
---这段代码处理客户端发送的消息，并将其发送给所有连接到 SSE 流的客户端。我们使用 express.json 中间件来解析 JSON 请求体，这样我们可以从 message 字段中获取消息内容。
对于每个连接到 SSE 流的客户端，我们使用 client.write 方法向其发送一个 SSE 事件。我们将消息内容作为 JSON 对象发送，并将其转换为字符串。我们使用 \n\n 来分隔每个事件。
最后，我们向客户端发送一个成功响应。
客户端代码
现在我们需要创建一个页面来处理在线聊天功能。我们可以使用以下 HTML 和 JavaScript 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------------
----- ---------------- ------------------
-------
------
---- ----------------
------
------ ----------- -------------
------- ---------------------------
-------
--------
----- ---- - --------------------------------
----- ------------ - -----------------------------------
----- ------ - --- -----------------------
---------------------------------- ----- -- -
----- ---- - -----------------------
----- ------- - -------------
----- --- - ------------------------------
------------- - --------
----------------------
---
--------------------------------------------------------- ----- -- -
-----------------------
----- ------- - -------------------
------------------ - ---
----------------- -
------- -------
-------- -
--------------- ------------------
--
----- ---------------- ------- --
---
---
---------
-------
-------这段代码创建了一个 HTML 页面，其中包含一个聊天框和一个表单。当用户输入消息并点击发送按钮时，我们将消息发送到服务器，并在聊天框中显示它。
我们使用 EventSource API 来连接到 SSE 流。当服务器发送消息时，我们使用 message 事件处理程序来处理它。我们将消息内容作为 JSON 对象发送，并将其转换为字符串。我们使用 document.createElement 方法创建一个新的 div 元素，并将其添加到聊天框中。
最后，我们使用 fetch API 来将用户输入的消息发送到服务器。我们使用 POST 方法发送一个 JSON 请求体，其中包含消息内容。
总结
本文介绍了如何使用 SSE 实现在线聊天功能。我们创建了一个 HTTP 服务器，并在客户端连接时向其发送一个 SSE 流。当客户端发送消息时，我们将其发送给所有连接到 SSE 流的客户端。我们还提供了一个 HTML 页面和 JavaScript 代码，用于实现客户端的聊天功能。这个示例可以作为一个简单的在线聊天应用的基础，可以根据需求进行扩展和修改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6627916bc9431a720c43cd9e