Как создать приложение для чата в режиме реального времени в Node.js с помощью Express, Mongoose и Socket.io

1656570974 kak sozdat prilozhenie dlya chata v rezhime realnogo vremeni v

Арун Мэтью Курьян

6IER5uX5Cu6uhvo1F0yD9qp9o5djS6Kp6GMN

В этом уроке мы будем использовать платформу Node.js для создания a приложение для чата в режиме реального времени который мгновенно отправляет и показывает сообщение получателю без обновления страницы. Для этого мы будем использовать фреймворк JavaScript Express.js и библиотеки Mongoose и Socket.io.

Прежде чем мы начнем, давайте быстро посмотрим на основы Node.js

Node.js

Node.js — это кроссплатформенная среда выполнения JavaScript с открытым исходным кодом, выполняющая код JavaScript вне браузера. Важнейшим преимуществом использования Node является то, что мы можем использовать JavaScript как язык интерфейса и сервера.

Как мы знаем, JavaScript использовался в основном для создания сценариев на стороне клиента, когда сценарии встраивались в HTML веб-страницы и запускались на стороне клиента с помощью JavaScript в веб-браузере пользователя.

Node.js позволяет разработчикам использовать JavaScript для написания инструментов командной строки и сценариев на стороне сервера — запуск сценариев на стороне сервера для создания динамического содержимого веб-страницы до того, как страница будет отправлена ​​в веб-браузер пользователя.

Чтобы установить узел:

https://nodejs.org/en/download/

Несмотря на то, что узел однопоточный, использовать асинхронные функции все равно быстрее. Например, Node может обрабатывать другие вещи при считывании файла с диска или при ожидании завершения HTTP-запроса. Асинхронное поведение можно реализовать посредством обратных вызовов. Также JavaScript отлично работает с базами данных JSON и No-SQL.

Модули NPM

Nodejs позволяет включать модули библиотек в программу. Эти модули могут быть определены пользователями или модулями сторонних разработчиков.

Модули сторонних разработчиков можно установить с помощью такой команды:

npm install module_name

и установленные модули можно использовать с помощью требовать() функция:

var module = require(‘module_name’)

В Node мы будем использовать файл package.json для поддержки версий модуля. Этот файл можно создать с помощью этой команды:

npm init

и пакеты должны быть установлены следующим образом:

npm install -s module_name

Существует много фреймворков, которые можно добавить в модули в нашу программу Node. При необходимости они будут объяснены дальше.

Простое приложение для чата

Приложение должно разрешать нескольким пользователям общаться вместе. Сообщение необходимо обновлять без обновления страницы. Для простоты мы будем избегать части аутентификации.

Мы можем начать с создания нового каталога проекта и перемещения в него. Тогда мы можем инициировать наш проект с помощью такой команды:

npm init

Это предложит нам ввести подробности о нашем проекте.

После этого а package.json будет создан файл:

{
 “name”: “test”,
 “version”: “1.0.0”,
 “description”: “”,
 “main”: “index.js”,
 “scripts”: {
 “test”: “echo \”Error: no test specified\” && exit 1"
 },
 “author”: “”,
 “license”: “ISC”
}

Теперь наш каталог приложений настроен.

Первое, что нам нужно создать, это сервер. Чтобы создать это, мы будем использовать фреймворк с названием Экспресс.

Express.js

Express.js, или просто Express, – это фреймворк веб-приложений для Node.js. Express обеспечивает надежный набор функций для веб- и мобильных приложений. Express обеспечивает тонкий слой основных функций веб-приложений, не скрывая функции Node.js.

Мы установим Express.js с помощью такой команды:

npm install -s express

Внутри файла package.json будет добавлена ​​новая строка:

dependencies”: {
 “express”: “⁴.16.3”
 }

Далее мы создадим a server.js файл.

В этом файле нам нужно потребовать Express и создать ссылку на переменную из экземпляра Express. Статическое содержимое, например HTML, CSS или JavaScript, можно обслуживать с помощью express.js:

var express = require(‘express’);

var app = express();

и мы можем начать прослушивать порт, используя код:

var server = app.listen(3000, () => {
 console.log(‘server is running on port’, server.address().port);
});

Теперь нам нужно создать HTML-файл index.html, отображающий наш интерфейс пользователя. Я добавил bootstrap и JQuery CDN.

//index.html

<!DOCTYPE html>
<html>
<head>
 <! — include bootstap and jquery cdn →
</head>
<body>
<div class=”container”>
 <br>
 <div class=”jumbotron”>
 <h1 class=”display-4">Send Message</h1>
 <br>
 <input id = “name” class=”form-control” placeholder=”Name”>
 <br>
 <textarea id = “message” class=”form-control” placeholder=”Your Message Here”>
</textarea>
 <br>
 <button id=”send” class=”btn btn-success”>Send</button>
 </div>
 <div id=”messages”>
 
</div>
</div>
<script>

</script>
</body>
</html>

Обратите внимание, что пуст <сценарій> <Тег ;/script> будет местом, где мы будем писать код JavaScript на стороне клиента.

Чтобы уведомить Express об этом, мы будем использовать статический файл. Мы добавим новую строчку внутри server.js:

app.use(express.static(__dirname));

Мы можем запустить server.js с помощью команды

node ./server.js

или пакет под названием nodemon, так что изменения, внесенные в код, будут автоматически обнаружены. Мы загрузим nodemon с помощью команды

npm install -g nodemon

-g – глобальный, чтобы он был доступен во всех проектах.

Мы запустим код с помощью команды

nodemon ./server.js

Если вы перейдете к localhost:3000, мы увидим файл индекса:

caxmtV7tYzJ1EUU69TeX4YQVsC69EhgzcSL5
index.html

Теперь, когда наш сервер запущен, нам нужно создать нашу базу данных. Для этого приложения мы будем иметь базу данных No-SQL и будем ее использовать Mongodb. Я устанавливаю свой mongodb mlab.com. Наша база данных будет содержать одну коллекцию под названием сообщение с полями имя и сообщения.

UWJYcDmpxrFhUoKRCrgkhtaTcBD4z4NivreC

Чтобы подключить эту базу данных к программе, мы будем использовать другой пакет под названием Мангуст.

Мангуст

Mongoose — инструмент моделирования объектов MongoDB, предназначенный для работы в асинхронной среде. Mongoose можно установить с помощью команды

npm install -s mongoose

Внутри server.js нам понадобится мангуст:

var mongoose = require(‘mongoose’);

И мы назначим переменный, URL-адрес нашей базы данных mlab:

var dbUrl = ‘mongodb://username:pass@ds257981.mlab.com:57981/simple-chat’

Mongoose подключится к базе данных mlab с помощью метода подключения:

mongoose.connect(dbUrl , (err) => { 
   console.log(‘mongodb connected’,err);
})

И мы будем определять нашу модель сообщения как

var Message = mongoose.model(‘Message’,{ name : String, message : String})

Теперь мы можем реализовать логику чата. Но перед этим необходимо добавить еще один пакет.

Body-Parser

Body-Parser извлекает всю часть тела входящего потока запросов и раскрывает его на req.body. Ранее промежуточное программное обеспечение являлось частью Express.js, но теперь его нужно устанавливать отдельно.

Установите его с помощью такой команды:

npm install -s body-parser

Добавьте следующие коды в server.js:

var bodyParser = require(‘body-parser’)
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}))

Маршрутизация

Маршрутизация относится к тому, как конечные точки приложения (URI) отвечают на запросы клиента. Вы определяете маршрутизацию с помощью методов объекта программы Express, соответствующих методам HTTP: app.get() для обработки запросов GET и app.post() для обработки запросов POST.

Эти методы маршрутизации определяют функцию обратного вызова (иногда ее называют «функцией обработчика»), которая вызывается, когда приложение получает запрос к указанному маршруту (конечной точке) и методу HTTP. Другими словами, программа «прослушивает» запросы, соответствующие указанным маршрутам и методам, и когда она выявляет соответствие, она вызывает указанную функцию обратного вызова.

Теперь нам нужно создать два маршрута к сообщениям, чтобы наш чат работал.

Внутри server.js:

получить: получит все сообщения из базы данных

app.get('/messages', (req, res) => {
  Message.find({},(err, messages)=> {
    res.send(messages);
  })
})

пост: публикует новые сообщения, созданные пользователем, в базу данных

app.post('/messages', (req, res) => {
  var message = new Message(req.body);
  message.save((err) =>{
    if(err)
      sendStatus(500);
    res.sendStatus(200);
  })
})

Чтобы подключить эти маршруты к интерфейсу, нам нужно добавить следующий код в тег сценария на стороне клиента index.html:

$(() => {
    $("#send").click(()=>{
       sendMessage({
          name: $("#name").val(), 
          message:$("#message").val()});
        })
      getMessages()
    })
    
function addMessages(message){
   $(“#messages”).append(`
      <h4> ${message.name} </h4>
      <p>  ${message.message} </p>`)
   }
   
function getMessages(){
  $.get(‘ (data) => {
   data.forEach(addMessages);
   })
 }
 
function sendMessage(message){
   $.post(‘ message)
 }

Вот отправить сообщение используется для вызова маршрута отправки сообщений и сохранения сообщения, отправленного пользователем. Сообщение создается, когда пользователь нажимает кнопку отправить.

Так же getMessage используется для вызова маршрута получения сообщений. Это позволит получить все сообщения, сохраненные в базе данных, и будут добавлены в раздел сообщений.

m1tJ6aV53XnmvkU8PjY7u16wkI1gKrplYWHo

Единственная проблема теперь заключается в том, что клиент не может узнать, обновлен ли сервер. Поэтому каждый раз, когда мы публикуем сообщения, нам нужно обновлять страницу, чтобы увидеть новые сообщения.

Для решения этой проблемы мы можем добавить систему push-сообщений, которая будет отправлять сообщения от сервера к клиенту. В Node.js мы используем socket.io.

Socket.io

Socket.IO – это библиотека JavaScript для веб-приложений реального времени. Он обеспечивает двунаправленную связь между веб-клиентами и сервером в реальном времени. Он состоит из двух частей: библиотека на стороне клиента, работающей в обозревателе, и библиотека на стороне сервера для Node.js. Socket.io обеспечивает двунаправленную связь в реальном времени на основе событий.

Чтобы установить socket.io:

npm install -s socket.io

нам также нужен пакет HTTP для работы Socket.io:

npm install -s http

Добавьте следующий код в server.js:

var http = require(‘http’).Server(app);
var io = require(‘socket.io’)(http);

И мы можем создать соединение:

io.on(‘connection’, () =>{
 console.log(‘a user is connected’)
})

В index.html добавить следующий тег:

<script src=”/socket.io/socket.io.js”></script>

Теперь нам нужно создать действие emit при создании сообщения server.js. Таким образом, почтовый маршрут становится следующим:

app.post('/messages', (req, res) => {
  var message = new Message(req.body);
  message.save((err) =>{
    if(err)
      sendStatus(500);
    io.emit('message', req.body);
    res.sendStatus(200);
  })
})

И в тег сценария на стороне клиента index.html, добавьте следующий код:

var socket = io();

socket.on(‘message’, addMessages)

Поэтому каждый раз, когда сообщение публикуется, сервер будет обновлять сообщения в разделе сообщения.

6KUYtaL4L3ShtPNaHRKWXvP6v3mMuUAdq6R0

Прекрасно!!

Это очень простое приложение, которое мы можем создать в Node.js. Есть много возможностей для усовершенствования. Готовый код можно найти на https://github.com/amkurian/simple-chat

server.js

var express = require('express');
var bodyParser = require('body-parser')
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var mongoose = require('mongoose');

app.use(express.static(__dirname));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}))

var Message = mongoose.model('Message',{
  name : String,
  message : String
})

var dbUrl="mongodb://username:password@ds257981.mlab.com:57981/simple-chat"

app.get('/messages', (req, res) => {
  Message.find({},(err, messages)=> {
    res.send(messages);
  })
})

app.get('/messages', (req, res) => {
  Message.find({},(err, messages)=> {
    res.send(messages);
  })
})

app.post('/messages', (req, res) => {
  var message = new Message(req.body);
  message.save((err) =>{
    if(err)
      sendStatus(500);
    io.emit('message', req.body);
    res.sendStatus(200);
  })
})

io.on('connection', () =>{
  console.log('a user is connected')
})

mongoose.connect(dbUrl ,{useMongoClient : true} ,(err) => {
  console.log('mongodb connected',err);
})

var server = http.listen(3001, () => {
  console.log('server is running on port', server.address().port);
});

Надеюсь, это было полезно для понимания некоторых основных понятий.

Некоторые полезные ссылки

Socket.IO
ЗДЕСЬ SOCKET.IO 2.0 С САМОЙ БЫСТРОЙ И САМОЙ НАДЕЖНОЙ СУБДОМ В РЕАЛЬНОМ ВРЕМЕНИ ~/Projects/tweets/index.js var io =…socket.ioExpress – фреймворк веб-приложений Node.js
Express – это минимальный и гибкий фреймворк веб-приложений Node.js, который предоставляет надежный набор функций для Интернета и…expressjs.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *