极客教程构建一个基于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>
运行应用程序的步骤： 在终端中键入命令以运行脚本。
node app.js
输出：
