Web 聊天室是一个非常常见的互联网应用程序，它可以让用户在一个在线环境中进行实时的文字聊天。在本文中，我们将介绍如何使用 Express.js 和 WebSocket 构建一个简单的 Web 聊天室。
Express.js
Express.js 是一个用于 Node.js 的 Web 应用程序框架。它提供了一些基本的功能，如路由、中间件、模板引擎等，使得构建 Web 应用程序变得更加容易。
以下是一个简单的 Express.js 的示例：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ ----- ---- -- - --------------- -------- -- ---------------- -- -- - -------------------- --- --------- -- ---- ------- --
在上面的例子中，我们创建了一个 Express.js 应用程序，并创建了一个路由，当用户访问根路径时，会返回 "Hello World!"。
WebSocket
WebSocket 是一种基于 TCP 协议的双向通信协议。它可以在客户端和服务器之间建立一个实时连接，并支持双向数据传输。
以下是一个简单的 WebSocket 的示例：
-- -------------------- ---- ------- ----- --------- - ------------- ----- -- - --- -------------------------------- ------------- -------- ------ - ---------------- -- ---------------- -------- -------------- - ----------------- --
在上面的例子中，我们创建了一个 WebSocket 连接，并在连接打开后发送了一条消息。我们还监听了来自服务器的消息，并在控制台中打印了它们。
构建一个基本的 Web 聊天室
现在，我们可以将 Express.js 和 WebSocket 结合起来，构建一个基本的 Web 聊天室。
首先，我们需要创建一个 Express.js 应用程序，并使用静态文件中间件从静态目录中提供前端 Web 客户端的文件。我们还需要为 GET / 路由设置一个 HTML 文件，该文件包含了 Web 客户端和 WebSockets JavaScript 客户端库的链接。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- --------------------------------- ------------ ----- ---- -- - --------------------------------- -------------- -- ---------------- -- -- - -------------------- --- --------- -- ---- ------- --
然后，我们需要设置 WebSocket 服务器，在服务器上监听来自客户端的连接，并在连接建立后向所有客户端广播新消息。
-- -------------------- ---- -------
----- --------- - -------------
----- --- - --- ------------------ ----- ---- --
-------------------- ---- -- -
---------------- --------- -- -
---------------------------- -- -
-- ------------------ --- --------------- -
--------------------
-
--
--
--在上面的例子中，当客户端连接到 WebSocket 服务器时，我们将其存储在客户端对象中，并在收到一条新的消息时，向所有客户端广播该消息。
最后，我们需要创建一个基本的前端界面，使用户能够在浏览器中加入 Web 聊天室。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
--- -------------------
----- ----------
------ ------------ ------------------ -----------------------
-------
------- ---------------------------------------
--------
----- ------ - ----
----- ---- - ------------------------------
----- ----- - -------------------------------
----- -------- - -----------------------------------
------------------------------- ------- -- -
----------------------
----------------- --------- ------------
----------- - --
--
--------------- --------- --------- -- -
----- -- - ----------------------------
-------------- - -------
------------------------
--
---------
-------
-------在上面的例子中，我们创建了一个简单的表单和一个用于显示消息的列表。我们还通过提供链接到 WebSocket 客户端库的脚本来连接 To WebSocket 服务器。我们还在客户端代码中发送了消息，并使用 "chat message" 事件监听器以在 Web 聊天室中显示新消息。
总结
在本文中，我们介绍了如何使用 Express.js 和 WebSocket 构建一个基本的 Web 聊天室。我们从头开始介绍了如何设置 Express.js 应用程序并提供静态文件，设置 WebSocket 服务器并监听客户端连接，并将所有这些组合在一起以提供一个基本的浏览器界面以进行实时聊天。此外，我们还提供了完整的示例代码，使得使用 Express.js 和 WebSocket 构建 Web 聊天室变得更加容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64661bc1968c7c53b06c66cd