WebSocket 是一种实时通信协议，它允许客户端和服务器之间交换数据，同时保持数据传输的持久连接。在前端领域，我们经常使用 WebSocket 来实现聊天应用、多人协作应用等实时性较高的场景。Express.js 是一种流行的 Node.js Web 框架，它提供了一组简单易用的 API，可以帮助我们轻松地搭建一个 WebSocket 服务器。本文将介绍如何在 Node.js 中使用 Express.js 实现一个基于 WebSocket 的聊天应用。
准备工作
在开始实现之前，我们需要安装必要的依赖：
Node.js：在官网下载并安装 Node.js。
Express.js：使用 npm 安装 Express.js，命令如下：
--- ------- -------
WebSocket：使用 npm 安装 WebSocket，命令如下：
--- ------- --
创建 Express 应用
首先，我们需要创建一个 Express 应用，并在其中引入 WebSocket。在项目根目录下创建一个名为 app.js 的文件，并写入以下内容：
----- ------- - -------------------
----- --------- - --------------
----- --- - ----------
----- ------ - ---------------- -- -- -
------------------- ------- -- ---- -------
---
----- --- - --- ------------------ ------ ---
-------------------- -------- -------------- -
------------------- ------------
---------------- -------- ----------------- -
--------------------- -------- -------------
-- --------- -- -------- -----
---------------------------- ------------ -
-- ------- --- -- -- ----------------- --- --------------- -
---------------------
-
---
---
-------------- ---------- -
------------------- ---------------
---
---这段代码创建了一个 Express 应用，并在其上创建了一个 WebSocket 服务。当有客户端连接到 WebSocket 时，会触发 connection 事件，并输出一条日志。当收到客户端发来的消息时，会广播这条消息给除了发送者以外的所有客户端。当有客户端断开连接时，也会输出一条日志。
为了方便启动应用，我们在工程目录下新建一个 package.json 文件并定义 start 脚本：
-
------- -----------
---------- --------
---------- -
-------- ----- -------
-
-然后，我们在 Terminal 中进入工程目录，执行 npm start 命令启动应用。
编写客户端代码
接下来，我们要编写客户端的 HTML、CSS 和 JavaScript 代码。在项目根目录下创建一个名为 index.html 的文件，并写入以下内容：
--------- -----
----- ----------
------
----- ----------------
---------- ------------
-------
---- -
------------ -----------
-
--------- -
------- ------
--------- -----
-
----------- -
-------- -----
----------- -----
-
-------------- -
----- --
------------- -----
-
--------
-------
------
------- ---------
---- --------------------
----- ----------------
------ ------------------ ------------
------- ---------------- ---------------------------
-------
--------
----- -- - --- ---------------------------------
------------ - --------------- -
----- ------- - -----------------------
----- -------- - ------------------------------------
----- ----------- - ------------------------------
--------------------- - --------------------- --------------------
----------------------------------
--
----- ---- - --------------------------------------
------------------------------- --------------- -
-----------------------
----- ------------ - -----------------------------------------
----- ------- - -------------------
-- --------- -
----- ------- - -
--------- -----
-------- -------
--
---------------------------------
------------------ - ---
-
---
---------
-------
-------这段代码实现了一个简单的聊天应用页面。它包括一个消息列表和一个输入框及发送按钮。当用户输入消息并点击发送按钮时，客户端会把消息发送给服务器。当服务器广播消息时，客户端会收到消息并将其添加到消息列表中。
调试代码
现在我们已经完成了程序的编写，可以在浏览器中打开 index.html 文件，看到客户端页面并开始收发消息。如果出现问题，可以在服务器端和客户端分别使用 Chrome 浏览器的开发者工具进行调试。
在 Chrome 浏览器中打开客户端页面，按下 F12 键，将开发者工具打开。选择控制台面板，可以看到客户端日志输出。如果 WebSocket 连接失败或无法发送消息，可以在控制台中查看错误信息和调试代码。
在 Terminal 中运行应用时，可以看到服务器端日志输出。如果 WebSocket 连接失败或收发消息出错，可以在服务器端查看错误信息和调试代码。
总结
在本文中，我们介绍了使用 Express.js 在 Node.js 中实现基于 WebSocket 的聊天应用的方法。我们首先创建了一个 Express 应用，并在其上安装了 WebSocket 服务，然后编写了客户端的 HTML、CSS 和 JavaScript 代码，最后调试了程序并发现解决了一些问题。通过这个例子，我们学习了如何在 Node.js 中使用 Express.js 和 WebSocket，以及如何编写实时通信应用的客户端和服务器代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64fdb1ae95b1f8cacdcf1436