实战指南：基于 Node.js 和 EJS 构建实时聊天室 Web 应用

2026-02-14 06:22:06 0条评论 1次阅读 0人点赞

在当今的 Web 开发领域，实时通讯功能已经成为了许多应用的核心组件。无论是客户支持系统、在线协作工具，还是社交网络，聊天室功能都是必不可少的。在这篇文章中，我们将深入探讨如何使用 Node.js 这一强大的后端技术，结合 EJS 模板引擎，从零开始构建一个功能完备的聊天室 Web 应用程序。

通过这篇教程，你将学会如何处理 HTTP 请求，如何利用模板引擎动态渲染数据，以及如何在前后端之间传递表单数据。我们将摒弃枯燥的理论堆砌，转而采用“做中学”的方式，通过编写实际的代码来理解每一个技术细节。无论你是 Node.js 的初学者，还是希望巩固基础的开发者，这篇文章都将为你提供宝贵的实战经验。

技术栈选型与核心概念

在开始编码之前，让我们先简单了解一下我们将要使用的核心技术。我们的聊天室应用将基于 Node.js 运行环境，并使用 Express 框架来简化 Web 服务器的搭建。为了实现数据的动态展示，我们将引入 EJS (Embedded JavaScript templating) 作为视图引擎。此外，我们还将使用 Body Parser（虽然在新版 Express 中已内置，但理解其原理至关重要）来处理用户提交的表单数据。

EJS 的作用：EJS 允许我们在 HTML 中嵌入 JavaScript 代码。这使得我们能够从服务器文件（如 app.js）向网页发送数据，并在客户端动态生成 HTML。例如，当有新用户加入聊天室时，我们可以通过 EJS 即时更新页面上的用户列表，而不需要手动修改 HTML 文件。

步骤 1：项目初始化与环境搭建

#### 1.1 初始化 NPM 项目

一切的开始，我们需要为我们的项目创建一个“家”。请在你的终端中创建并定位到一个新的项目文件夹，然后输入以下命令来初始化一个新的 Node.js 项目：

npm init -y

执行这个命令后，NPM 会在当前目录下生成一个 INLINECODE66867e41 文件。这个文件是项目的“身份证”，它记录了项目的元数据、依赖项以及各种脚本配置。加上 INLINECODE799afbeb 参数意味着我们接受所有默认配置，这样可以快速进入开发环节。

#### 1.2 安装核心依赖项

接下来，我们需要安装构建应用所需的“砖块”。请在终端执行以下命令：

npm install express ejs body-parser

这条命令会做三件事：

  • 安装 Express：一个轻量级且功能丰富的 Node.js Web 应用框架，提供了路由、中间件等强大功能。
  • 安装 EJS：我们选择的模板引擎，用于生成 HTML 页面。
  • 安装 Body Parser：一个 Node.js 中间件，用于处理 JSON 和 URL 编码的数据。

安装完成后，你的 INLINECODE2bdcb2a7 文件会自动更新，将这些包添加到 INLINECODE6d3d2b72 列表中。

#### 1.3 创建并配置服务器文件

现在，让我们创建应用程序的入口文件。在项目根目录下创建一个名为 app.js 的文件。这是我们后端逻辑的大脑。

我们需要在文件中引入 Express 模块，并创建一个应用实例，同时将 EJS 设置为默认的视图引擎。以下是初始化代码：

// 引入 Express 框架
const express = require(‘express‘);
const app = express();

// 设置 EJS 为视图引擎
// 这样 Express 就知道去查找 .ejs 文件来渲染页面
app.set(‘view engine‘, ‘ejs‘);

最佳实践提示：在实际生产环境中，我们通常会将配置（如端口号）与环境变量分离，但为了保持本教程的专注性，我们暂时直接使用硬编码值。

#### 1.4 规划目录结构

为了保持项目的整洁和可维护性，我们需要遵循一定的目录结构规范。Express 默认会在项目根目录下的 views 文件夹中寻找模板文件。

请在你的项目中创建一个 INLINECODE94974d8c 文件夹。之后，我们创建的所有 INLINECODE7a9879ff 文件都必须存放在这里。虽然本质上它们是 HTML 文件，但使用 .ejs 扩展名可以让编辑器和 Express 识别出它们是模板文件。

步骤 2：掌握 EJS 数据渲染

在构建聊天室之前，我们需要先理解 EJS 的核心机制：数据如何从服务器流向客户端。

#### 2.1 在 EJS 中使用变量

在 EJS 模板中，你可以使用特定的语法来输出服务器传来的变量。最基本的语法是 ，它会对其中的 JavaScript 代码进行求值，并将结果转换为字符串输出到 HTML 中。

让我们创建一个简单的测试页面。在 INLINECODE94d17b90 文件夹中创建 INLINECODEf541db8d 文件：




    
    聊天室首页
    
        body { font-family: sans-serif; padding: 20px; }
        .message-box { border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 5px; }

#### 2.2 从服务器发送数据

光有模板还不够，我们需要在 INLINECODE2e576a37 中编写路由逻辑，将数据发送给模板。我们可以使用 INLINECODE7bfe0017 方法来实现这一点。

修改你的 app.js 文件如下：

const express = require(‘express‘);
const app = express();

app.set(‘view engine‘, ‘ejs‘);

// 定义根路径的路由
app.get("/", (req, res) => {
    // render 方法的第二个参数是我们想要传递给模板的数据对象
    res.render("home", { variableName: "欢迎来到 Node.js 聊天室！" });
});

// 启动服务器，监听 3000 端口
app.listen(3000, (req, res) => {
    console.log("应用程序正在 3000 端口运行");
});

现在，如果你在终端运行 INLINECODE4774ef30 并在浏览器中访问 INLINECODE069a94c3，你将看到“欢迎来到 Node.js 聊天室！”这段文字显示在页面上。这就是数据绑定的魅力。

步骤 3：处理表单数据与中间件

一个聊天室不能只有单向的展示，它必须能够接收用户的输入。为了实现这一点，我们需要处理来自 HTML 表单的数据。

#### 3.1 理解 Body Parser

在 HTTP 请求中，表单数据通常包含在请求体中，而不是 URL 中。Node.js 原生并没有提供解析这些数据的便捷方法。这就需要用到 Body Parser（或者 Express 内置的解析功能）。

虽然在新版本的 Express (4.16.0+) 中，INLINECODE3ac2293c 和 INLINECODE8d24cf1a 已经取代了独立的 body-parser 模块，但为了理解其原理，我们先介绍中间件的概念。中间件就像一个过滤器，它可以访问请求对象和响应对象。

在 app.js 中添加以下配置：

// 配置中间件以解析 application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: true }));

// 配置中间件以解析 application/json
app.use(express.json());

这段代码告诉 Express，当收到请求时，先解析请求体，这样我们在后续的路由处理函数中就可以通过 req.body 直接获取到表单数据。

步骤 4：构建聊天室核心功能

现在，让我们把各个部分组合起来，构建一个真正的聊天室。

#### 4.1 准备模拟数据

在实际应用中，我们会使用数据库（如 MongoDB 或 Redis）来存储聊天记录。为了简化本教程，我们先在内存中创建一个数组来模拟数据库。

我们将在 app.js 中定义一个包含默认用户和消息的数组，并将其发送到网页上显示。这演示了如何传递和渲染数组列表。

更新 app.js 代码如下：

const express = require(‘express‘);
const app = express();

// 模拟数据库数据
const users = [
    {
        userMessage: "大家好，这是第一条测试消息。",
        userName: "开发者_Alice"
    },
    {
        userMessage: "Node.js 真的很酷！",
        userName: "极客_Bob"
    }
];

app.set(‘view engine‘, ‘ejs‘);

// 配置解析表单数据的中间件
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.get("/", function (req, res) {
    // 将整个 users 数组传递给模板
    res.render("home", {
        data: users
    });
});

// 处理表单提交的路由（稍后详细讲解）
app.post("/chat", (req, res) => {
    // 我们稍后在这里编写处理逻辑
});

app.listen(3000, () => {
    console.log("应用程序正在 3000 端口运行");
});

#### 4.2 在 EJS 中遍历显示数据

由于我们传递的是一个数组，而不仅仅是一个字符串，我们需要在 EJS 中使用循环来遍历集合并显示每一条消息。EJS 允许我们直接使用 JavaScript 的 forEach 循环。

更新 views/home.ejs 文件：




    Node.js 聊天室实战
    
    
        body { font-family: ‘Segoe UI‘, Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f4f4; padding: 20px; }
        .container { max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #333; }
        .chat-item { border-bottom: 1px solid #eee; padding: 10px 0; }
        .message { font-size: 18px; margin: 0 0 5px 0; color: #444; }
        .user { font-size: 14px; color: #888; font-weight: bold; }
        /* 新消息的高亮样式 */
        .new-message { background-color: #e8f5e9; padding: 10px; border-radius: 5px; }
    


    

        
公共聊天室

        

        
        
         { %>
            

                
                

                
                
-

通过这段代码，你可以看到 INLINECODEa55e574e 数组中的每一条消息都被渲染到了页面上。注意 EJS 标签的使用：INLINECODEe844c04d 用于执行逻辑（如循环），而 用于输出内容。

步骤 5：实现用户消息发送功能

最后，我们需要让用户能够真正地参与聊天。为此，我们必须在页面底部创建一个表单，并配置相应的后端逻辑来接收用户输入，将其存入我们的数组，并重新渲染页面。

#### 5.1 创建输入表单

在 INLINECODE8fdafd96 的容器底部添加一个 HTML 表单。这个表单将使用 INLINECODE5acdaca4 方法向服务器发送数据。

<!-- 在
结束标签之前添加以下表单 -->

发送新消息

#### 5.2 处理表单提交与更新数据

回到 INLINECODE6e38504a，我们需要编写 INLINECODE39bddfdf 路由的处理逻辑。这里的核心思想是：当用户提交表单时，服务器接收数据，将其添加到 users 数组中，然后触发页面重定向或重新渲染，从而让用户看到新消息。

在 app.js 中添加或修改以下代码：

// 处理 POST 请求
app.post("/chat", (req, res) => {
    // 从请求体中获取表单数据
    // input 标签的 name 属性决定了这里的键名
    let userInput = {
        userName: req.body.userName,
        userMessage: req.body.userMessage
    };

    // 将新消息添加到数组中（相当于保存到数据库）
    users.push(userInput);

    // 重定向回根路径，触发 GET 请求，重新渲染页面
    // 这样页面就能显示包含新消息的更新列表
    res.redirect("/");
});

#### 5.3 完整的逻辑验证

现在，让我们梳理一下完整的用户交互流程，以确保你理解整个数据闭环：

  • 初始加载：用户访问 http://localhost:3000。浏览器发送 GET 请求。
  • 渲染列表：Express 服务器接收请求，查找 INLINECODE24199c95 模板，将 INLINECODE3542dded 数组传递给它，然后返回生成的 HTML。
  • 用户输入：用户在表单中输入名字和消息，点击“发送”。
  • 数据提交：表单向 /chat 发送 POST 请求，携带用户输入的数据。
  • 服务器处理：服务器通过 INLINECODEae2e4232 读取数据，将其 INLINECODE74dc790e 到 users 数组中。
  • 重定向：服务器告诉浏览器（res.redirect("/")）去访问首页。
  • 刷新显示：浏览器再次请求首页，这次服务器发送的是包含了刚才那条新消息的更新后的数组，用户就在屏幕上看到了自己的发言。

总结与进阶方向

在这篇文章中，我们一步步构建了一个基于 Node.js 的聊天室 Web 应用。我们不仅实现了基础的页面渲染，还深入了表单处理、数据绑定以及循环渲染等核心技术点。你已经学会了如何利用 Express 搭建服务，使用 EJS 动态生成 HTML，以及如何通过 Body Parser 处理用户输入。

实际应用中的注意事项：

虽然我们的应用已经可以运行，但在生产环境中，你还需要考虑以下几个关键点：

  • 数据持久化：目前的实现中，消息都存储在内存变量 users 中。这意味着一旦重启服务器，所有聊天记录都会丢失。你可以尝试集成 MongoDB 或 MySQL 来持久化存储数据。
  • 实时性优化：当前的实现需要用户手动发送消息后刷新页面才能看到新消息，或者用户必须不断刷新浏览器。你可以引入 Socket.io，这是一个强大的 WebSocket 库，可以实现服务器与客户端之间的双向、实时通信，真正实现“即时”聊天体验。
  • 安全性：在生产环境中，直接渲染用户输入的内容可能会导致 XSS（跨站脚本）攻击。虽然 EJS 默认会对 进行 HTML 转义，但在更复杂的应用中，你需要更加严格地验证和清洗用户输入。
  • UI/UX 改进：前端界面可以进一步美化，例如添加时间戳、表情包支持、头像显示以及滚动条自动定位到底部等功能。

希望这篇教程能为你打开 Node.js 开发的大门。掌握这些基础后，你就可以随心所欲地扩展你的应用，构建出更加强大的 Web 工具。祝你在编码之旅中收获满满！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。如需转载，请注明文章出处豆丁博客和来源网址。https://shluqu.cn/48560.html
点赞
0.00 平均评分 (0% 分数) - 0 票

相关文章美国1G带宽/1T流量高速vps $17.99/年