简介
WebSocket 是一种全双工通信协议，它可以在客户端和服务器之间建立持久性的连接，并支持实时的双向数据传输。在 Web 应用程序中，WebSocket 可以用于实现实时通信，例如聊天应用程序、实时协作工具等。
Express.js 是一种流行的 Node.js Web 框架，它提供了方便的路由、中间件、模板引擎等功能。在本文中，我们将介绍如何使用 Express.js 构建 WebSocket 聊天应用程序。
准备工作
在开始构建 WebSocket 聊天应用程序之前，我们需要先准备好以下工具和环境：
- Node.js 和 npm
- Express.js
- WebSocket 库
如果您还没有安装 Node.js 和 npm，请先安装它们。安装完成后，您可以使用以下命令安装 Express.js 和 WebSocket 库：
--- ------- ------- --- ------- --
构建 WebSocket 服务器
在 Express.js 中，我们可以使用 ws 库来构建 WebSocket 服务器。下面是一个简单的 WebSocket 服务器示例：
----- ------- - -------------------
----- --------- - --------------
-- -- ------- ----
----- --- - ----------
-- -- --------- ---
----- --- - --- ------------------ ----- ---- ---
-- -------
-------------------- ---- -- -
------------------- ------------
-- -------
---------------- --------- -- -
--------------------- -------- -------------
-- ----------
---------------------------- -- -
-- ------------------ --- --------------- -
---------------------
-
---
---
-- ---------
-------------- -- -- -
------------------- ---------------
---
---
-- -- ------- ----
---------------- -- -- -
------------------- ----------
---在上面的代码中，我们首先创建了一个 Express 应用程序和一个 WebSocket 服务器。然后，我们监听客户端连接，在客户端连接时打印一条消息，并监听客户端消息和断开连接事件。在客户端发送消息时，我们使用 wss.clients 获取所有连接的客户端，并遍历它们，将消息广播给所有客户端。
构建聊天界面
在构建 WebSocket 聊天应用程序时，我们还需要构建一个聊天界面，以便用户可以在界面中发送和接收消息。在本文中，我们将使用 Bootstrap 框架构建一个简单的聊天界面。
--------- -----
------
------
----- ----------------
---------------- ------------
----- ---------------- ---------------------------------------------------------------------------------------
-------
------
---- ------------------
--- ----------- --------------- ---------
---- -------------
------ ----------- -------------------- ------------- ---------------------
------
---- -------------
--------- -------------------- ------------ -------- ---------------------------------
------
------- ------------- ---------- ------------ ---------------------
---- -------------
--- ------------------ -------------------
------
------
------- ----------------------------------------------------------------------------
--------
-- -- --------- ---
----- -- - --- ---------------------------------
-- --------
--------------------------- -- -- -
-------------------------
---
-- --------
------------------------------ ------- -- -
----- ------- - -----------------------
-- ---------
----- -------- - ---------------
-------------------- -------------------------------------------- --------------------------
---
-- --------
---------------------------- -- -- -
----------------------------
---
-- ----
---------------------- -- -- -
----- -------- - ---------------------
----- ------- - --------------------
-- ----- --------- ---
------------------------ --------- ------- ----
-- -------
----------------------
---
---------
-------
-------在上面的代码中，我们首先使用 Bootstrap 框架构建了一个简单的聊天界面，包括用户名输入框、消息输入框、发送按钮和消息列表。然后，我们使用 JavaScript 代码连接 WebSocket 服务器，并监听连接打开、消息接收和连接关闭事件。在发送消息时，我们将用户名和消息内容封装成一个 JSON 对象，并发送到 WebSocket 服务器。
运行应用程序
在完成上述代码后，我们可以使用以下命令启动应用程序：
---- ------
然后，我们可以在浏览器中访问 http://localhost:3000，即可看到聊天界面。在界面中输入用户名和消息内容，点击发送按钮即可发送消息。所有客户端都将接收到您发送的消息，并在界面中显示。
总结
通过本文的介绍，我们了解了如何使用 Express.js 和 WebSocket 库构建 WebSocket 聊天应用程序，并构建了一个简单的聊天界面。在实际开发中，我们可以根据需求对聊天应用程序进行扩展，例如添加用户认证、消息记录、在线状态等功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65fa4a79d10417a222623f65