Создание веб-приложения Chatroom на базе Node.js
В этой статье мы собираемся создать веб-приложение чата, используя Node.js. Веб-приложение Chatroom в основном используется для создания чата, похожего на групповой чат, куда пользователи могут приходить и присоединяться к группе/чату, отправлять сообщения в чат и просматривать сообщения других пользователей.
Мы собираемся настроить промежуточное ПО 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 и создайте постоянное «приложение» для создания экземпляра модуля Express, затем установите EJS в качестве механизма просмотра по умолчанию.
const express = require("express");
const app = express();
app.set("view engine", "ejs");Переупорядочите свои каталоги : необходимо использовать «.ejs» в качестве расширения для файла HTML вместо «.html» для использования EJS внутри него. Затем вам нужно переместить каждый файл «.ejs» в каталоге представлений внутри вашего корневого каталога. EJS по умолчанию ищет файлы '.ejs' внутри папки представлений.
Используйте переменную EJS: внутри вашего обновленного файла .ejs вы должны использовать переменные EJS для получения значений из файла вашего сервера. Вы можете объявлять переменные в EJS, например
<%= variableName %>
home.ejs
HTML
<!DOCTYPE html><html> <head> <title>Page Title</title></head> <body> <%= variableName %></body> </html> |
Отправка данных в переменную: внутри файла вашего сервера ( app.js или index.js ) вы можете отправить файл EJS вместе с некоторыми данными, используя метод рендеринга.
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello World!" })
})app.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")}) |
Извлечение данных из формы в app.js: чтобы получить входные значения формы, мы должны использовать пакет узлов с именем 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
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")}) |
Поскольку у нас так много элементов внутри нашего массива, и мы должны распечатать каждый из них, поэтому мы должны использовать цикл For Each Loop, чтобы просмотреть каждый отдельный элемент в нашей коллекции и отобразить детали.
home.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> |
Шаг 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
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")}) |
home.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> |
Шаги для запуска приложения: Внутри терминала введите команду для запуска вашего скрипта.
node app.js
Выход: