En este artículo, vamos a crear una aplicación web de sala de chat con Node.js. Una aplicación web de sala de chat se usa básicamente para crear una sala de chat similar a un chat grupal, donde los usuarios pueden venir y unirse al grupo/sala de chat, enviar mensajes a la sala de chat y ver los mensajes de otros usuarios.
Vamos a configurar un EJS de middleware. EJS facilita el envío de datos desde su archivo de servidor (app.js o server.js) a una página web. Después de eso, vamos a usar Body Parser mediante el cual podemos capturar los valores de entrada del usuario que son mensajes del cuadro de mensajes y almacenarlos en una colección. Luego vamos a enviar los datos de la colección a la sala de chat usando EJS para que otros usuarios puedan leerlos.
Enfoque: A continuación se muestra la implementación paso a paso del enfoque anterior.
Paso 1: Configuración del proyecto
Inicializa NPM: cree y ubique la carpeta de su proyecto en la terminal y escriba el comando
npm init -y
Inicializa nuestra aplicación de Node y crea un archivo package.json.
Instale dependencias: ubique el directorio de su proyecto raíz en la terminal y escriba el comando
npm install express ejs body-parser
Para instalar Express, EJS y Body Parser como dependencias dentro de su proyecto
Crear archivo de servidor: cree un archivo ‘app.js’, dentro de este archivo se requiere el módulo Express y cree una ‘aplicación’ constante para crear una instancia del módulo express, luego configure el EJS como el motor de visualización predeterminado.
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
Reorganice sus directorios: se requiere usar ‘.ejs’ como extensión para el archivo HTML en lugar de ‘.html’ para usar EJS dentro de él. Luego, debe mover todos los archivos ‘.ejs’ en el directorio de vistas dentro de su directorio raíz. EJS busca por defecto los archivos ‘.ejs’ dentro de la carpeta de vistas.
Use la variable EJS: dentro de su archivo .ejs actualizado , debe usar variables EJS para recibir valores de su archivo de servidor. Puede declarar variables en EJS como
<%= variableName %>
casa.ejs
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <%= variableName %> </body> </html>
Envíe datos a una variable: dentro de su archivo de servidor ( app.js o index.js ), puede enviar un archivo EJS junto con algunos datos utilizando el método de procesamiento.
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello World!" })
})
aplicación.js
Javascript
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")
})
Obtener datos del formulario a app.js: para recibir valores de entrada de un formulario, tenemos que usar un paquete de Nodes llamado body-parser.
Instale el analizador de cuerpo:
npm install body-parser
Requerir módulo analizador de cuerpo:
const bodyParser = require('body-parser')
Y entonces
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({
extended: true
}))
Entonces podemos manejar los datos del formulario usando el objeto de solicitud.
Paso 2: Obtener usuarios actuales y sus mensajes: tenemos una serie de listas de usuarios predeterminados con sus mensajes. Enviemos la array a nuestra página web y mostremos la lista de usuarios predeterminados con sus mensajes. En el paso anterior, solo enviamos un valor a la variable, ahora estamos enviando la array completa.
aplicación.js
Javascript
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")
})
Dado que tenemos tantos elementos dentro de nuestra array y tenemos que imprimir cada uno de ellos, tenemos que usar For Each Loop para recorrer cada elemento dentro de nuestra colección y mostrar los detalles.
casa.ejs
HTML
<!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>
Paso 3: agregar usuarios y sus mensajes a la lista: para esto, debemos crear un formulario y manejar los datos del formulario dentro de nuestro archivo ‘app.js’ usando Body Parser.
casa.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>
Manejar datos de formulario dentro de ‘app.js’: tenemos que obtener valores de un formulario usando req.body.valueName y luego organizarlo como un objeto y empujarlo dentro de la array de nuestro usuario.
aplicación.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
})
})
Código completo:
aplicación.js
Javascript
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")
})
casa.ejs
HTML
<!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>
Pasos para ejecutar la aplicación: Dentro de la terminal, escriba el comando para ejecutar su script.
node app.js
Producción:
