随着移动互联网的普及，实时通讯的功能变得越来越重要。在前端开发中，利用 Server-Sent Events (SSE) 技术来实现实时通讯的功能已经成为了一个非常流行的方案。通过 SSE 技术，前端它们可以直接从服务器获取有关其感兴趣的事件的信息。而利用 SSE 完成实时聊天功能是一个非常实用的应用场景。本文将详细介绍如何利用 SSE 来实现实时聊天功能，并讲解一些相关的知识点。
什么是 SSE？
Server-Sent Events (SSE) 是基于服务器推送的一种技术。在传统的 HTTP 请求中，客户端发出请求，服务器发送响应。而在 SSE 中，服务器与客户端之间一直保持连接，服务器可以随时向客户端发送消息。SSE 技术使用的是纯文本格式，用于实现单向的服务器到客户端数据流。
基本上，SSE 允许 Web 应用程序从服务器获取实时信息，使用简单且可靠的协议。与许多其他技术或协议相比，SSE 的优点在于它们可以在不打扰现有应用程序和机制的情况下提供即时更新。
SSE 的协议特点如下：
- SSE 基于 HTTP 协议而不是 WebSocket 协议。
- 它是一种轻量级、易于实现和使用的技术。
- SSE 可以在不同域名和子域之间的浏览器中工作。
- SSE 仅使用浏览器标准而不需要重复处理。
- 可以实现服务器向客户端推送数据，无需客户端发起请求。
SSE 在实时聊天中的应用
实时聊天是一种广泛使用的应用程序场景，在许多在线社交平台、游戏、电商等网站都有应用。在实时聊天中，一个用户向另一个用户发送消息并且需要立即得到其他用户的响应。使用 SSE 技术，我们可以在不需要高级服务和架构的情况下实现这一功能。以下是使用 SSE 实现基础的实时聊天的简单示例：
- 安装 HTTP 服务器并创建 HTML 文件。
使用 http-server 这种工具来创建一个简单的 Web 服务器。
npm install http-server
在项目目录中创建一个名为 index.html 的文件，内容如下：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------- ------------
-------
------
-------- ---------
---- ----------------
------
------ ----------- ---------- --
------- ------------- -------------------------
-------
-------
-------在这里我们创建了一个简单的 HTML 页面，并在其中提供了一个用于展示聊天内容的 div 标签和一个表单用于发送消息。
- 编写 JavaScript 代码。
创建 JavaScript 文件并将以下代码添加到其中。您需要定义一个名为 messages 的空数组，并使用一个名为 openChat 的函数来实现 SSE。
-- -------------------- ---- -------
----- -------- - ---
-------- ---------- -
----- ---- - --------------------------------
----- ----- - ---------------------------------
----- ------ - ----------------------------------
----- ------ - --- ---------------------
---------------- - -------- ------- -
----- ------- - -----------------------
-----------------------
-------------- - ---------------------- -- ----------------------------
--
-------------------------------- -------- ------- -
-----------------------
----- ------- - -
----- -----------
--
-----------------------
-------------- - ---------------------- -- ----------------------------
----- --- - --- -----------------
---------------- ---------
------------------------------------ --------------------
----------------------------------
----------- - ---
---
-
-----------在这里，我们将实现完整的功能。 openChat 函数使用一个名为 EventSource 的构造函数来建立与服务器的 SSE 连接。通过 onmessage 回调函数，每当接收到新消息时，就将消息添加到 messages 数组中，并更新聊天框中的显示。sendMessage 函数创建一个新的 XHR 请求，将该消息作为 JSON 对象发送到服务器，然后将表单中的输入字段重置为 '' 。
- 实现服务器端代码。
使用以下 Node.js 代码来实现服务器端端点。我们需要添加名为 chat 的路线，该路线将监听新的 SSE 连接并将其添加到名为 chatSockets 的向量中，每当服务器上存在新的消息时，每个连接都将更新其信息。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ---------- - -----------------------
----- ---- - ---------------------
----- ---- - ---------------- -- -----
----- --- - ----------
----- ------ - ----------------------
----- -- - -----------------------------
------------------- -------- -- -
------------------- --------- -- ---------------------------
---
---------------------------
-----------------------------
--------------- -------
----- ----------- - ---
---------------- -------- ----- ---- -
---------
--------------- --------------------
---------------- ---------- --------------
------------- ------------
---
----------------------
--------------- -------- -- -
-------------------------------------------- ---
---
---
----------------- -------- ----- ---- -
----- ------- - ---------
---------- - ----------
---------------------------- -------- -
----------------- ------------------
------------------- ---------------------------------
---
---------------
---在这里，我们使用了 Node.js、express 和 body-parser。在 /chat 路由下，我们通过将 SSE 的头部添加到响应中而建立连接。向 chatSockets 添加新连接，并在当前连接关闭时将其从 chatSockets 中删除。
在 /chat 上发出 POST 请求将创建和广播新消息。添加一个 UUID，以便在连接上使用消息 ID 正确广播消息。最后，向每个连接写入新消息。如果您在浏览器中运行上述示例，则您将在浏览器中看到 Chat Room 标题和类似聊天窗口的界面。如果您在另一台电脑上打开相同的 URL，则该聊天窗口将成为另一个端点，您将能够看到任何消息。尝试向对方发送消息，您将看到消息即时出现。
总结
在本文中，我们详细介绍了 Server-Sent Events 技术以及如何使用它来实现实时聊天室。通过 SSE 技术，我们可以轻松快捷地搭建实时通讯系统，无论是聊天室、实时新闻推送、在线游戏等都有应用。在实现 SSE 时，需要注意一些知识点，例如 CORS 规则、SSE 的数据格式、SSE 的发送和接收机制等，这些都是让我们更好地使用 SSE 技术的基础。本文希望给读者提供一些启示，以帮助您完成使用 SSE 的实时聊天功能的实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647dbb9a968c7c53b088b20e