构建一个基于Node.js的聊天室Web应用

在这篇文章中，我们将使用Node.js创建一个聊天室Web应用。聊天室Web应用通常用于创建类似于群聊的聊天室，用户可以加入群组/聊天室，发送消息到聊天室，并查看其他用户的消息。

我们将设置一个中间件EJS。EJS可以方便地从服务器文件（app.js或server.js）发送数据到网页。之后，我们将使用Body Parser来捕获用户输入值，也就是消息框中的消息，并将它们存储到一个集合中。然后，我们将使用EJS将集合的数据发送到聊天室，以便其他用户可以阅读。

方法： 以下是上述方法的逐步实现。

步骤1：项目设置

初始化NPM： 创建并定位到您的项目文件夹，进入终端并输入命令

npm init -y

它初始化我们的节点应用程序并创建一个package.json文件。

安装依赖项： 在终端中定位到您的根项目目录，然后输入以下命令

npm install express ejs body-parser

要将Express、EJS和Body Parser作为项目内的依赖项安装：

创建服务器文件： 创建一个名为’app.js’的文件，在该文件中引入Express模块，并创建一个名为’app’的常量，用于创建Express模块的实例，然后将EJS设置为默认的视图引擎。

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

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

重新安排目录： 使用EJS时，必须将HTML文件的扩展名更改为‘.ejs’，而不是‘.html’。然后，您需要将views目录中的每个‘.ejs’文件移动到根目录内。EJS默认从views文件夹中查找‘.ejs’文件。

使用EJS变量： 在您更新的.ejs文件中，您需要使用EJS变量从服务器文件中接收值。您可以像这样在EJS中声明变量：

<%= variableName %>

home.ejs

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Page Title</title> 
</head> 
  
<body> 
    <%= variableName %> 
</body> 
  
</html>

向变量发送数据： 在服务器文件（app.js或index.js）中，您可以使用render方法发送带有一些数据的EJS文件。

app.get("/", (req, res) => {
    res.render("home", { variableName: "Hello World!" })
})

app.js

const express = require('express') 
const app = express() 
app.set('view engine', 'ejs') 
  
app.get("/", (req, res) => { 
     res.render("home", { variableName: "Hello World!" }) 
}) 
  
app.listen(3000, (req, res) => { 
     console.log("App is running on port 3000") 
})

从表单到app.js获取数据： 为了接收表单的输入值，我们必须使用一个名为body-parser的node包。

安装body-parser：

npm install body-parser

要求引入 body-parser 模块：

const bodyParser = require('body-parser')

然后

app.use( bodyParser.json() );      
app.use(bodyParser.urlencoded({    
     extended: true
}))

然后，我们可以使用请求对象处理表单数据。

步骤2：获取当前用户及其消息： 我们有一个默认用户及其消息的列表数组。让我们将该数组发送到我们的网页，并显示默认用户及其消息的列表。在前一步中，我们只发送了一个值到变量，现在我们正在发送完整的数组。

app.js

const express = require('express') 
const bodyParser = require('body-parser') 
const users = [{ 
    userMessage: "Hi", 
    userName: "Aditya Gupta"
}, { 
    userMessage: "Hello", 
    userName: "Vanshita Jaiswal"
}] 
  
const app = express() 
  
app.set('view engine', 'ejs') 
  
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ 
    extended: true
})) 
  
  
app.get("/", function (req, res) { 
    res.render("home", { 
        data: users 
    }) 
}) 
  
app.listen(3000, (req, res) => { 
    console.log("App is running on port 3000") 
})

由于我们的数组中有很多元素，并且我们必须打印每个元素，所以我们必须使用For Each循环遍历集合中的每个元素并显示细节。

home.ejs

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>ChatRoom</title> 
  
    <style> 
        h2{ 
            margin: 12px 0px 0px 0px; 
            padding: 0px; 
        } 
        p{ 
            margin: 0px; 
            padding: 0px; 
        } 
    </style> 
</head> 
    
<body> 
    <h1>ChatRoom</h1> 
    <% data.forEach(element=> { %> 
    <h2><%= element.userMessage %></h2> 
      
<p> <%= element.userName %></p> 
  
    <% }) %> 
</body> 
  
</html>

步骤3：将用户和他们的消息添加到列表中： 对于这一点，我们需要创建一个表单，并在我们的 ‘app.js’ 文件中使用 Body Parser 处理表单数据。

home.ejs

<h1>Add Message</h1>

<form action="/" method="post">
     <input type="text" placeholder="User Name"
          name="userName">
     <input type="text" placeholder="Message"
          name="userMessage">
     <button type="submit">Send</button>
</form>

在 ‘app.js’ 内处理表单数据： 我们必须使用 req.body.valueName 从一个表单中获取值，然后将其按照对象的形式整理，并将其推送到我们的用户数组中。

app.js

app.post("/", (req, res) => {
   const inputUserName = req.body.userName
   const inputUserMessage = req.body.userMessage

   users.push({
       userName: inputUserName,
       userMessage: inputUserMessage,
   })

   res.render("home", {
       data: users
   })
})

完整代码：

app.js

const express = require('express') 
const bodyParser = require('body-parser') 
const users = [{ 
        userMessage: "Hi", 
        userName: "Aditya Gupta"
    }, 
    { 
        userMessage: "Hello", 
        userName: "Vanshita Jaiswal"
    } 
] 
  
const app = express() 
  
app.set('view engine', 'ejs') 
  
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ 
    extended: true
})) 
  
  
app.get("/", function (req, res) { 
    res.render("home", { 
        data: users 
    }) 
}) 
  
app.post("/", (req, res) => { 
    const inputUserName = req.body.userName 
    const inputUserMessage = req.body.userMessage 
  
    users.push({ 
        userName: inputUserName, 
        userMessage: inputUserMessage, 
    }) 
  
    res.render("home", { 
        data: users 
    }) 
}) 
  
app.listen(3000, (req, res) => { 
    console.log("App is running on port 3000") 
})

home.ejs

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>ChatRoom</title> 
  
    <style> 
        h2 { 
            margin: 12px 0px 0px 0px; 
            padding: 0px; 
        } 
  
        p { 
            margin: 0px; 
            padding: 0px; 
        } 
    </style> 
</head> 
    
<body> 
    <h1>ChatRoom</h1> 
    <% data.forEach(element=> { %> 
    <h2><%= element.userMessage %></h2> 
      
<p>by <%= element.userName %></p> 
  
    <% }) %> 
  
    <h1>Add Message</h1> 
  
    <form action="/" method="post"> 
        <input type="text" placeholder="User Name"
               name="userName"> 
        <input type="text" placeholder="Message"
               name="userMessage"> 
        <button type="submit">Send</button> 
    </form> 
</body> 
  
</html>