WebSocket 是一种实时通信协议，它允许客户端和服务器之间交换数据，同时保持数据传输的持久连接。在前端领域，我们经常使用 WebSocket 来实现聊天应用、多人协作应用等实时性较高的场景。Express.js 是一种流行的 Node.js Web 框架，它提供了一组简单易用的 API，可以帮助我们轻松地搭建一个 WebSocket 服务器。本文将介绍如何在 Node.js 中使用 Express.js 实现一个基于 WebSocket 的聊天应用。
准备工作
在开始实现之前，我们需要安装必要的依赖：
Node.js：在官网下载并安装 Node.js。
Express.js：使用 npm 安装 Express.js，命令如下：
npm install express
WebSocket：使用 npm 安装 WebSocket，命令如下：
npm install ws
创建 Express 应用
首先，我们需要创建一个 Express 应用，并在其中引入 WebSocket。在项目根目录下创建一个名为 app.js 的文件，并写入以下内容：
-- -------------------- ---- -------
----- ------- - -------------------
----- --------- - --------------
----- --- - ----------
----- ------ - ---------------- -- -- -
------------------- ------- -- ---- -------
---
----- --- - --- ------------------ ------ ---
-------------------- -------- -------------- -
------------------- ------------
---------------- -------- ----------------- -
--------------------- -------- -------------
-- --------- -- -------- -----
---------------------------- ------------ -
-- ------- --- -- -- ----------------- --- --------------- -
---------------------
-
---
---
-------------- ---------- -
------------------- ---------------
---
---这段代码创建了一个 Express 应用，并在其上创建了一个 WebSocket 服务。当有客户端连接到 WebSocket 时，会触发 connection 事件，并输出一条日志。当收到客户端发来的消息时，会广播这条消息给除了发送者以外的所有客户端。当有客户端断开连接时，也会输出一条日志。
为了方便启动应用，我们在工程目录下新建一个 package.json 文件并定义 start 脚本：
{
"name": "web-chat",
"version": "0.1.0",
"scripts": {
"start": "node app.js"
}
}然后，我们在 Terminal 中进入工程目录，执行 npm start 命令启动应用。
编写客户端代码
接下来，我们要编写客户端的 HTML、CSS 和 JavaScript 代码。在项目根目录下创建一个名为 index.html 的文件，并写入以下内容：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------------
-------
---- -
------------ -----------
-
--------- -
------- ------
--------- -----
-
----------- -
-------- -----
----------- -----
-
-------------- -
----- --
------------- -----
-
--------
-------
------
------- ---------
---- --------------------
----- ----------------
------ ------------------ ------------
------- ---------------- ---------------------------
-------
--------
----- -- - --- ---------------------------------
------------ - --------------- -
----- ------- - -----------------------
----- -------- - ------------------------------------
----- ----------- - ------------------------------
--------------------- - --------------------- --------------------
----------------------------------
--
----- ---- - --------------------------------------
------------------------------- --------------- -
-----------------------
----- ------------ - -----------------------------------------
----- ------- - -------------------
-- --------- -
----- ------- - -
--------- -----
-------- -------
--
---------------------------------
------------------ - ---
-
---
---------
-------
-------这段代码实现了一个简单的聊天应用页面。它包括一个消息列表和一个输入框及发送按钮。当用户输入消息并点击发送按钮时，客户端会把消息发送给服务器。当服务器广播消息时，客户端会收到消息并将其添加到消息列表中。
调试代码
现在我们已经完成了程序的编写，可以在浏览器中打开 index.html 文件，看到客户端页面并开始收发消息。如果出现问题，可以在服务器端和客户端分别使用 Chrome 浏览器的开发者工具进行调试。
在 Chrome 浏览器中打开客户端页面，按下 <kbd>F12</kbd> 键，将开发者工具打开。选择控制台面板，可以看到客户端日志输出。如果 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