随着 Web 技术的不断发展，人们对于 Web 应用程序的要求越来越高。传统的 Web 应用程序已经不能满足需求，许多需要实时交互的应用程序开始出现。实时 Web 应用程序可以实现双向通信，能够让用户立即看到其他用户的操作结果，这种用户体验比传统的 Web 应用程序更好。
在构建实时 Web 应用程序时，我们需要使用一些适合实时应用程序的技术。Node.js 是一个非常适合构建实时应用程序的平台，它的事件驱动、非阻塞 I/O 的特点让它能够快速响应连接和数据流。而 Express.js 则是一个基于 Node.js 的快速、灵活的 Web 应用框架，它能够帮助我们快速构建 Web 应用程序并提供一些有用的功能。
本文将介绍如何使用 Express.js 构建基于 Node.js 的实时 Web 应用程序。我们将使用 Socket.io 库来实现实时通信，并使用 Express.js 提供的功能来创建 Web 应用程序。通过本文的学习，你将能够了解如何构建实时 Web 应用程序，并掌握使用 Express.js 构建 Web 应用程序的方法。
准备工作
在开始之前，你需要确保已经安装了 Node.js 和 npm。如果你尚未安装，可以从官方网站下载并安装。然后我们需要创建一个新的项目来安装和管理所需的依赖。打开终端并输入以下命令：
mkdir express-realtime && cd express-realtime npm init -y
该命令创建一个名为 express-realtime 的文件夹，并使用默认设置初始化 npm 项目。现在我们可以安装所需的依赖：
npm install express socket.io
这将安装 Express.js 和 Socket.io 库。Express.js 是一个 Web 应用框架，能够帮助我们创建路由、处理 HTTP 请求以及提供有用的功能。Socket.io 是一个实现了 WebSocket 协议的库，能够帮助我们在客户端和服务器之间建立实时双向通信。
现在我们已经准备好开始构建实时 Web 应用程序了。
创建 Express.js 应用程序
首先，我们需要创建一个 Express.js 应用程序。打开 app.js 文件并输入以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ ----- ---- -- - --------------- ---------- -- ---------------- -- -- - ---------------- --------- -- ---- ------ --
这段代码使用 Express.js 创建了一个应用程序，并在默认路由上响应 GET 请求。当用户访问根路径时，返回一个文本响应。
现在我们可以启动应用程序并在浏览器中访问它。打开终端并输入以下命令：
node app.js
你应该会看到应用程序启动并监听在端口 3000 上的消息。
现在在浏览器中打开 http://localhost:3000，你应该会看到返回的文本 “Hello Express!”。
我们已经成功创建了一个 Express.js 应用程序并响应了 HTTP 请求。接下来，我们将使用 Socket.io 库来实现实时通信。
使用 Socket.io 实现实时通信
为了实现实时通信，我们需要在客户端和服务器之间建立一个 WebSocket 连接，这可以使用 Socket.io 完成。下面是将 Socket.io 添加到我们的应用程序的步骤。
客户端
在客户端上，我们需要在 HTML 文件中添加 Socket.io 库。打开 index.html 并在 <head> 标签中添加以下代码：
<script src="/socket.io/socket.io.js"></script>
这将从服务器上加载 Socket.io 库并包含在 HTML 文件中。现在我们可以创建客户端 Socket.io 实例并连接到服务器。在 <body> 标签中添加以下代码：
<script>
const socket = io()
socket.on('connect', () => {
console.log('Connected')
})
</script>这段代码创建一个 Socket.io 实例并连接到服务器。当连接成功时，控制台将输出 “Connected”。
服务器端
在服务器端上，我们需要创建一个 WebSocket 服务器并与客户端建立连接。
打开 app.js 并添加以下代码：
-- -------------------- ---- -------
----- ------ - ---------------------------
----- -- - ----------------------------
------------------- ------ -- -
-------------- ---- -----------
-------------------- ------- -- -
---------------------- ------------
------------------ --------
--
----------------------- -- -- -
-------------- ---- --------------
--
--
------------------- -- -- -
---------------- --------- -- ---- ------
--这段代码创建了一个 WebSocket 服务器并在 connection 事件上响应客户端连接请求。当客户端连接成功时，控制台将输出 “A user connected”。当客户端发送消息时，WebSocket 服务器将打印消息并使用 io.emit('message', message) 将该消息广播给所有客户端。
现在我们启动应用程序并在浏览器中访问 http://localhost:3000，然后在浏览器控制台中输入以下代码：
socket.emit('message', 'Hello World!')这将发送 “Hello World!” 消息给服务器，并将该消息广播到所有连接的客户端。你应该会在控制台中看到类似以下输出：
现在我们已经成功地实现了实时通信，接下来我们将使用 Express.js 提供的功能来创建一个完整的 Web 应用程序。
使用 Express.js 构建实时 Web 应用程序
在创建实时 Web 应用程序时，我们需要考虑到用户的交互体验。为此，我们将创建一个基于 Express.js 的应用程序，让用户可以在控制台中跟踪其他用户的消息。
为了实现这一目标，我们将使用 Express.js 提供的视图引擎。视图引擎可以帮助我们快速生成 HTML 模板，并将动态内容嵌入到模板中。我们将使用 EJS 视图引擎，它是一个简单易用的视图引擎，可以帮助我们快速生成动态内容。
首先，我们需要创建一个 views 文件夹来存储视图文件。打开终端并输入以下命令：
mkdir views
然后我们创建一个名为 index.ejs 的视图文件，它将显示聊天室和消息列表。在 views/index.ejs 中输入以下代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------- -------- ------------
-------
------
----------- -------- ---------
---- ----------
--- -------------------
------
------ ------------ ------------------ --
---------------------
-------
------
------- ---------------------------------------
--------
----- ------ - ----
----- ----------- - -----------------------------------
----- ------------ - ----------------------------------
----- ----------- - ------------------------------
-------------------------------------- ----- -- -
----------------------
----- ------- - -------------------------
-- --------- -
---------------------- --------
------------------ - --
-
--
-------------------- ------- -- -
----- ---- - ----------------------------
---------------- - -------
-----------------------------
--
-------------------- -- -- -
------------------------
--------------------- - -----
-------------------------------------- ----- -- -
----------------------
----- ------- - ----- -------
---------------------- --------
--
--
----------------------- -- -- -
---------------------------
--------------------- - ----
----- ------- - ----- -----
----- ---- - ----------------------------
---------------- - -------
-----------------------------
--
---------
-------
-------这段代码创建了一个包含一个文本输入框和一个按钮的表单元素，并且附有一些脚本元素。当用户提交表单时，脚本会使用 Socket.io 将消息发送到服务器。服务器将在接收到消息时将其广播到其他客户端。当客户端接收到广播消息时，它将将该消息添加到消息列表中。
现在我们需要告诉 Express.js 使用 EJS 视图引擎。打开 app.js 并添加以下代码：
const path = require('path')
app.set('view engine', 'ejs')
app.set('views', path.join(__dirname, 'views'))这段代码告诉 Express.js 使用 EJS 视图引擎，并指定视图文件夹的路径。现在我们可以创建一个路由来渲染 index.ejs 视图文件并响应 GET 请求。打开 app.js 并添加以下代码：
app.get('/', (req, res) => {
res.render('index')
})现在我们已经成功创建了一个实时 Web 应用程序。可以启动应用程序并在浏览器中访问它。打开终端并输入以下命令：
node app.js
你应该会在控制台中看到类似以下输出：
现在在浏览器中打开 http://localhost:3000，你应该会看到类似以下界面：
在输入框中输入一些文本并单击发送按钮，该文本将被添加到消息列表中。你可以在另一个标签页或浏览器窗口中打开该应用程序，并尝试发送一些消息，你将看到消息在另一个标签页或浏览器窗口中的消息列表中出现。
结论
通过本文的学习，你已经掌握了如何使用 Express.js 构建基于 Node.js 的实时 Web 应用程序。我们使用 Socket.io 库实现了实时通信，并使用 EJS 视图引擎构建了应用程序的 UI。现在你可以构建自己的实时 Web 应用程序，并提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f7adce9a7045d0d738123