在现代 Web 应用程序中，实时聊天室已经成为了一个极其普遍的需求。它可以提供实时通信的功能，允许用户进行即时消息传递，这在许多场景下都非常有用。
这篇文章将介绍如何在 JavaScript 中使用 SSE（Server-Sent Events）技术来实现实时聊天室。
SSE 简介
Server-Sent Events 是一种基于 HTTP 的服务器推送技术，可以让浏览器在不停止连接的情况下从服务器获得实时更新。SSE 提供了一种在浏览器和服务器之间实现实时通信的 API，而无需使用轮询或其他方法来查询新数据。
SSE 的基本原理是通过在服务器上打开一个持久的 HTTP 连接，从而可以向客户端推送数据。服务器可以随时向客户端推送消息，而客户端不需要请求数据，也不需要使用 WebSocket 等其他协议。SSE 还支持自定义事件类型、历史数据以及具有重连机制等功能。
实时聊天室的实现
使用 SSE 来实现一个实时聊天室非常简单。我们需要在服务器上创建一个 SSE 端点，然后使用 JavaScript 在客户端上处理接收到的消息。以下是一个简单的示例代码：
服务器端（使用 Node.js）
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
----- ------- - ------ ----- ------- - ------ ------------
-------------------
-- ------
-
---
------------------- -- -- -
------------------- --------- -- ---- -------
---在上面的代码中，我们使用 Node.js 创建了一个 HTTP 服务器，并在 /sse 路径上打开了 SSE 端点。我们设置了正确的 SSE 响应头，以便浏览器可以正确处理服务器发送的事件流。
在示例中，我们使用 setInterval 定期向连接客户端发送消息。我们可以使用任何其他方式向客户端发送消息。
客户端（使用 HTML 和 JavaScript）
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
--------
----- ------ - --- --------------------
---------------------------------- ------- -- -
----- ------- - ----------------------------
------------------- - -----------
-----------------------------------
-- -------
-------------- - ------- -- -
---------------------
---------------
--
---------
-------
-------在客户端代码中，我们首先创建了一个 EventSource 对象，它会自动向服务器打开 SSE 连接。我们通过监听 message 事件来处理接收到的消息，并将它们动态地添加到 DOM 中。
注意，我们还监听了 error 事件，以防连接意外中断。在发生错误时关闭连接是一个好习惯。
总结
在本文中，我们介绍了 SSE 技术，并演示了如何使用它来实现一个实时聊天室。SSE 具有许多功能，如可定制事件、历史数据、连接保持活跃和自动重连等。使用 SSE 可以为我们创建的 Web 应用程序提供实时通信功能，而无需使用 WebSocket 或其他协议。
当然，我们还可以扩展这个简单的实例，将其用于实际的生产环境中。例如，我们可以使用 Node.js 和 Express 创建更健壮的服务器；我们可以使用多个事件类型来分发不同类型的消息；我们可以使用表单输入来接收用户的消息。如果读者有兴趣深入学习 SSE，可以访问 MDN 上的相关文档，或阅读其他 SSE 的教程和示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64978adf48841e98944894c6