Kuidas luua reaalajas vestlusrakendus rakenduses Node.js Express, Mongoose ja Socket.io abil

Selles õpetuses kasutame Node.js platvormi reaalajas vestlusrakenduse loomiseks, mis saadab ja kuvab adressaadile sõnumeid koheselt ilma lehe värskendamiseta. Selle saavutamiseks kasutame JavaScripti raamistikku Express.js ning raamatukogusid Mongoose ja Socket.io.

Enne alustamist tutvume kiirelt Node.js põhitõdedega

Node.js

Node.js on avatud lähtekoodiga platvormidevaheline JavaScripti käituskeskkond, mis käivitab JavaScripti koodi väljaspool brauserit. Node'i kasutamise kõige olulisem eelis on see, et saame JavaScripti kasutada nii esiotsa kui ka taustakeelena.

Nagu me teame, kasutati JavaScripti peamiselt kliendipoolsete skriptide jaoks, mille korral skriptid olid manustatud veebilehe HTML-i ja käivitasid kliendipoolseid JavaScripti mootoreid kasutaja veebibrauseris.

Node.js võimaldab arendajatel kasutada JavaScripti käsurea tööriistade kirjutamiseks ja serveripoolsete skriptide jaoks - serveripoolsete skriptide käivitamine dünaamilise veebilehe sisu loomiseks enne lehe saatmist kasutaja veebibrauserisse.

Sõlme installimiseks toimige järgmiselt.

//nodejs.org/en/download/

Kuigi sõlm on ühe keermega, on asünkroonsete funktsioonide kasutamine siiski kiirem. Näiteks saab sõlm töödelda muid asju, kui faili kettalt loetakse või oodatakse HTTP-päringu täitmist. Asünkroonse käitumise saab rakendada tagasihelistamise abil. Samuti töötab JavaScript hästi JSON-i ja No-SQL-i andmebaasidega.

NPM moodulid

Nodejs lubab rakendusse kaasata raamatukogude mooduleid. Need moodulid võivad olla kasutaja määratud või kolmanda osapoole moodulid.

Kolmanda osapoole mooduleid saab installida järgmise käsu abil:

npm install module_name

ja installitud mooduleid saab kasutada nõudma () funktsiooni:

var module = require(‘module_name’)

Node'i rakendustes kasutame mooduliversioonide hooldamiseks faili package.json. Selle faili saab luua selle käsuga:

npm init

ja pakendid tuleb paigaldada järgmiselt:

npm install -s module_name

Meie Node'i rakendusse saab moodulitena lisada palju raamistikke. Neid selgitatakse vajaduse korral edasi.

Lihtne vestlusrakendus

Rakendus peab lubama mitmel kasutajal koos vestelda. Sõnumeid tuleb värskendada ilma lehte värskendamata. Lihtsuse huvides väldime autentimise osa.

Alustuseks võime luua uue projektikataloogi ja liikuda sinna. Seejärel saame oma projekti algatada järgmise käsuga:

npm init

See palub meil sisestada meie projekti üksikasjad.

Pärast seda luuakse faili package.json :

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

Meie rakenduste kataloog on nüüd seatud.

Esimene asi, mida peame looma, on server. Selle loomiseks kasutame raamistikku nimega Express.

Express.js

Express.js või lihtsalt Express on Node.js-i veebirakenduste raamistik. Express pakub veebi- ja mobiilirakenduste jaoks tugevat funktsioonide komplekti. Express pakub õhukese kihi veebirakenduse põhifunktsioone, varjatmata Node.js funktsioone.

Installime Express.js järgmise käsu abil:

npm install -s express

Faili package.json sees lisatakse uus rida:

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

Järgmisena loome faili server.js .

Selles failis peame nõudma Expressi ja looma viite muutujale Expressi eksemplarist. Staatilist sisu, näiteks HTML-i, CSS-i või JavaScripti, saab kasutada express.js abil:

var express = require(‘express’); var app = express();

ja saame hakata sadamat kuulama koodi abil:

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

Nüüd peame looma HTML-faili index.html, mis kuvab meie kasutajaliidese. Olen lisanud bootstrapi ja JQuery cdn.

//index.html    
    

Send Message

Send

Pange tähele, et tühi < ; / script> silt on koht, kuhu kirjutame kliendipoolse JavaScripti koodi.

Selleks, et Expressile seda öelda, kasutame staatilist faili. Lisame uue rea server.js sisse:

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

Saame server.js käivitada käsu abil

node ./server.js

or a package called nodemon, so that the changes made in the code will be automatically detected. We will download nodemon using the command

npm install -g nodemon

-g — global, so that it is accessible in all projects.

We will run the code using the command

nodemon ./server.js

If you go to localhost:3000 we can see the index file:

Now that our server is up and running, we need to create our database. For this app we will having a No-SQL database and will be using Mongodb. I am setting up my mongodb in mlab.com. Our database will contain a single collection called messages with fields name and message.

In-order to connect this database to the app, we will use another package called Mongoose.

Mongoose

Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose can be installed using the command

npm install -s mongoose

Inside server.js we will require mongoose:

var mongoose = require(‘mongoose’);

And we will assign a variable, the URL of our mlab database:

var dbUrl = ‘mongodb://username:[email protected]:57981/simple-chat’

Mongoose will connect to the mlab database with the connect method:

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

And we will be defining our message model as

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

We can implement the chat logic now. But before that there is one more package that needs to be added.

Body-Parser

Body-Parser extracts the entire body portion of an incoming request stream and exposes it on req.body. The middleware was a part of Express.js earlier, but now you have to install it separately.

Install it using the following command:

npm install -s body-parser

Add the following codes to server.js:

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

Routing

Routing refers to how an application’s endpoints (URIs) respond to client requests. You define routing using methods of the Express app object that correspond to HTTP methods: app.get() to handle GET requests and app.post() to handle POST requests.

These routing methods specify a callback function (sometimes called “handler functions”) called when the application receives a request to the specified route (endpoint) and HTTP method. In other words, the application “listens” for requests that match the specified routes and methods, and when it detects a match, it calls the specified callback function.

Now we need to create two routes to the messages for our chat to work.

Inside server.js:

get : will get all the message from database

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

post : will post new messages created by the user to the database

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

In order to connect these routes to the front end we need to add the following code in the client side script tag in the index.html:

$(() => { $("#send").click(()=>{ sendMessage({ name: $("#name").val(), message:$("#message").val()}); }) getMessages() }) function addMessages(message){ $(“#messages”).append(` 

${message.name}

${message.message}

`) } function getMessages(){ $.get(‘//localhost:3000/messages', (data) => { data.forEach(addMessages); }) } function sendMessage(message){ $.post(‘//localhost:3000/messages', message) }

Here the sendMessage is used to invoke the post route of the messages, and save a message sent by the user. The message is created when a user clicks the send button.

Similarly the getMessage is used to invoke the get route of messages. This will get all the messages saved in the database and will be appended to the messages div.

The only issue now is that there is no way for the client to know if the server is updated. So each time we post a message we need to refresh the page to see the new messages.

To solve this we can add a push notification system that will send messages from server to client. In Node.js we use socket.io.

Socket.io

Socket.IO is a JavaScript library for realtime web applications. It enables realtime, bi-directional communication between web clients and server. It has two parts: a client-side library that runs in the browser, and a server-side library for Node.js. Socket.io enables real-time bidirectional event-based communication.

To install socket.io:

npm install -s socket.io

we also need an HTTP package for Socket.io to work:

npm install -s http

Add the following code to server.js:

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

And we can create a connection:

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

In the index.html add the following tag:

Now we need to create an emit action when a message is created in server.js. So the post route becomes this:

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); }) })

Ja lisage index.html-i kliendipoolse skripti märgendisse järgmine kood:

var socket = io(); socket.on(‘message’, addMessages)

Nii et iga kord, kui sõnum postitatakse, värskendab server sõnumite jaotises olevaid kirju.

Suurepärane !!

See on väga lihtne rakendus, mille saame luua failis Node.js. Parandamiseks on palju võimalusi. Valmis koodi leiate saidilt //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:[email protected]: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); });

Loodetavasti oli sellest abi mõne põhimõiste mõistmisel.

Mõned kasulikud lingid

Pesa.IO

SOCKET.IO 2.0 on siin kõige kiirema ja usaldusväärsema reaalajas töötava mootori funktsiooniga ~ / Projektid / säutsud / index.js var io =… socket.io Express - Node.js veebirakenduste raamistik

Express on minimaalne ja paindlik Node.js veebirakenduste raamistik, mis pakub veebi ja ... expressjs.com jaoks tugevat funktsioone

//mongoosejs.com/