在互联网世界中，实时通信一直是一个非常重要的问题。如何在不刷新页面的情况下实现实时消息推送和接收，这一直是前端工程师需要面对的挑战。本文将介绍使用 Server-sent Events 技术实现简单的实时网页聊天室的方法。
Server-sent Events 基本概念
Server-sent Events（简称 SSE）是一种 HTML5 技术。它允许服务器向客户端实时发送事件流（Event Stream），并使用 JavaScript 监听这些事件流，以实现客户端与服务器的实时通信。
SSE 类似于 WebSocket，但是相比 WebSocket 更简单，更容易学习和使用。SSE 可以在不同的浏览器和服务器环境中工作，并且不需要进行额外的设置和配置。
SSE 的基本流程如下：
- 客户端向服务器发送一个 HTTP 请求，请求 SSE 事件流；
- 服务器处理请求，打开一个长连接，并将事件流通过这个连接发送给客户端；
- 客户端使用 JavaScript 监听这个连接，以接收服务器发送的事件流；
- 服务器可以在任意时刻发送事件到客户端，客户端接收到一个事件后自动触发相应的事件处理函数。
实现简单的实时网页聊天室
在实现实时网页聊天室时，我们可以使用 SSE 技术完成后端的长连接和事件流，前端则使用 JavaScript 监听事件流并进行消息的实时接收和展示。
后端实现
在 Node.js 环境下，我们可以使用 express 框架来实现后端的 SSE 服务。主要的代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----- ---- - -----
----------------
---------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- ----------------- --- ----
---------------- ----------------
-- -------------
----- --------- - -------------- -- -
---------------- ----------------
-- -------
-- -------------------
-------------- ------- -- -
----- ---- - ------------------------
-- ------ -
---------------- --------------
-
---
-- ---------------
--------------- -- -- -
-------------------------
---
---
-----------------代码中，我们先创建一个基于 express 框架的 HTTP 服务器，并监听端口 3000。当客户端请求 /chat 路径时，我们响应一个 SSE 事件流，并在这个连接上进行数据处理和消息广播。
具体地，我们使用 res.writeHead() 设置响应头，保证连接不会被缓存和关闭，然后将一个初始化消息发送给客户端。之后，我们通过 setInterval() 定时向客户端发送心跳消息，以保持连接不断开。
当客户端发送消息时，我们进行数据处理，将消息广播给所有连接的客户端。最后，在客户端断开连接时，我们清除定时器并释放资源。
前端实现
前端界面的实现可以自由发挥，这里仅展示一个基本样例代码。在这个代码中，我们用 XMLHttpRequest 发送一个 GET 请求到后端 SSE 服务的 /chat 路径。然后，我们监听这个连接上的事件，并显示服务器发来的消息。
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---- ------------
----- ----------------
-------
-- -
----------- -----
------------- --
-
-- -
-------------- ----
-
--------
-------
------
------------- ---- ---------
--- -------------------
------
------ ----------- ------------------
------- ---------------------------
-------
--------
----- ----------- - ------------------------------------
----- ------------ - ----------------------------------------
-- -- --- --
----- --- - --- ---------------------
-- -- -------- --------------------
------------------------------- ------- -- -
----- ------- - -----------------------------
------------------- - -----------
---------------------------------
---
-- -------------------
--------------------------------------------------------- ------- -- -
-----------------------
----- ------- - --------------------------
-- --------- -
----- --- - --- -----------------
---------------- ---------
------------------
------------------ - ---
-
---
---------
-------
-------这段代码包含一个列表用于展示聊天记录，一个输入框和一个发送按钮用于发送消息。当我们打开 SSE 连接时，通过 EventSource 来进行连接的创建和事件的监听。当 SSE 连接收到服务器发送的消息时，我们在列表中添加一个新的条目。
当用户在输入框中输入消息并点击发送按钮时，我们通过 XMLHttpRequest 将消息发送到服务器。我们在事件监听函数中检查消息是否为空，如果是，不执行任何操作。
总结
本文介绍了使用 Server-sent Events 技术实现简单的实时网页聊天室的方法。我们从 SSE 的基本概念开始，通过一个完整的 Node.js + Express + SSE 教程，以及一个基本的前端代码示例，有效地演示了 SSE 技术的使用方法。
使用 SSE 实现实时消息推送和接收，可以帮助我们在不刷新页面的情况下实现实时通信，大幅提高用户体验和前端应用的动态交互能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c2e0d48841e9894a806c8