在现代应用程序中，实时通信已成为一个日益重要的功能。WebSockets 是一种可以实现客户端和服务器之间实时交互的技术。Express.js 是一款流行的 Node.js 框架，它可以帮助我们快速创建 Web 应用程序。这篇文章将介绍如何使用 Express.js 和 WebSocket 创建一个即时聊天室。
准备工作
首先，我们需要确保我们已经安装了 Node.js 和 NPM。打开终端并输入以下命令来检查它们是否已经安装：
---- -- --- --
如果你看到了它们的版本号，那么就说明它们已经安装好了。否则，请按照官方文档的指示进行安装。
创建 Express 应用程序
接下来，我们需要创建一个新的 Express.js 应用程序。在终端中，输入以下命令：
--- ---- -- --- ------- ------- ------
上面的命令初始化了我们的应用程序并安装了 Express.js。
创建一个新文件夹来保存我们的应用程序，然后在该文件夹中创建一个名为server.js的文件，它将成为我们的 Express 应用程序的主要 JavaScript 文件。
将以下代码复制到server.js文件中：
----- ------- - ------------------- ----- --- - ---------- ------------ -------- ----- ---- - --------------- --------- --- ---------------- -------- -- - ---------------------- -- ---- -------- ---
上面的代码初始化了一个 Express 应用程序，它只有一个路由处理程序，当您访问根 URL 时，它将返回“Hello World!”消息。我们还告诉应用程序在端口3000上监听HTTP请求，并在控制台中输出一条消息。
现在，我们可以运行以下命令来启动我们的应用程序：
---- ---------
然后在浏览器中打开 http://localhost:3000，将看到我们的应用程序响应“Hello World!”消息。
添加 WebSocket 功能
接下来，我们将使用 WebSocket 添加即时聊天室的功能。但是，由于 Express.js 并不原生支持 WebSocket，我们需要使用一个叫做 ws 的 Node.js 模块来实现它。
让我们先安装 ws 模块：
--- ------- -- ------
接下来，在server.js文件中添加以下代码：
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
-------------- --- ------ -------------
---------------- -------- ----------------- -
---------------------- ---- ---------
---------------------------- ------------ -
-- ------- --- -- -- ----------------- --- --------------- -
---------------------
-
---
---
---上面的代码创建了一个 WebSocket 服务器，并在端口8080上监听连接请求。connection事件将在客户端连接到服务器时触发，然后我们输出一条消息到控制台中。
当收到客户端发送的消息时，我们将通过遍历所有连接的客户端，将接收到的消息发送到除了发送方之外的所有客户端。
现在，我们需要修改server.js的路由处理程序，以便将我们的 WebSocket 服务提供给客户端。将以下代码复制到路由处理程序中：
---------------- -------- ----- ---- - ---------------------- - ---------------- ---
这告诉我们的应用程序在请求/chat URL 时，将返回名为client.html的文件，我们稍后会在其中添加客户端JavaScript 代码。
接下来，我们需要创建一个名为client.html的新文件，并将以下代码复制到其中：
--------- -----
------
------
---------------- ------------
-------
------
------ ----------- ---------- ----------------- ---- ------- ---------
------- ------------- ------------------------------
--------
----- ------ - --- ---------------------------------
------------------------------- -------- ------- -
---------------------- -- --------- ---------
---
---------------------------------- -------- ------- -
----- -------- - ------------------------------------
----- ------- - -----------------------------
------------------- - -----------
------------------------------
---
-------- ------ -
----- ----- - ---------------------------------
-------------------------
----------- - ---
-
---------
-------
-------上面的代码创建了一个简单的聊天界面。当用户在输入框中输入消息并单击“Send”时，它将通过 WebSocket 连接发送到服务器。我们还将通过 WebSocket 连接接收到所有其他客户端发送的消息，并在 UI 中将它们作为列表项列出。
现在，我们可以再次运行我们的应用程序，并访问 http://localhost:3000/chat。这将打开我们的聊天界面，并连接到我们的 WebSocket 服务器。我们可以打开另一个浏览器窗口并访问相同的 URL 以创建另一个客户端，然后就可以开始聊天了！
总结
在本文中，我们介绍了如何使用 Express.js 和 WebSocket 创建一个基于 Web 的即时聊天室。我们使用 Express.js 初始化了一个 HTTP 服务器，并使用 ws 模块在同一端口上初始化了一个 WebSocket 服务器。我们还添加了一个基本的聊天界面来进行测试。这个程序只是一个起点，您可以在此基础上添加更多功能和扩展。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651f93a495b1f8cacd71ec08