Sådan oprettes en chatapplikation i realtid i Node.js ved hjælp af Express, Mongoose og Socket.io

I denne vejledning bruger vi Node.js-platformen til at opbygge et chatprogram i realtid, der sender og viser meddelelser til en modtager med det samme uden sideopdatering. Vi bruger JavaScript-rammen Express.js og bibliotekerne Mongoose og Socket.io til at opnå dette.

Før vi starter, kan vi hurtigt se på det grundlæggende i Node.js

Node.js

Node.js er et open source, cross-platform JavaScript-runtime-miljø, der udfører JavaScript-kode uden for browseren. Den vigtigste fordel ved at bruge Node er, at vi kan bruge JavaScript som både et front- og back-end-sprog.

Som vi ved, blev JavaScript primært brugt til scripting på klientsiden, hvor scripts blev integreret i en websides HTML og kørt klientsiden af ​​en JavaScript-motor i brugerens webbrowser.

Node.js lader udviklere bruge JavaScript til at skrive kommandolinjeværktøjer og til scripting på serversiden - kører scriptserver-side for at producere dynamisk websideindhold, før siden sendes til brugerens webbrowser.

Sådan installeres node:

//nodejs.org/da/download/

Selvom noden er enkelt gevind, er det stadig hurtigere at bruge asynkrone funktioner. For eksempel kan Node behandle andre ting, mens en fil læses fra disken, eller mens den venter på, at en HTTP-anmodning skal udføres. Den asynkrone adfærd kan implementeres ved hjælp af tilbagekald. JavaScript fungerer også godt med JSON- og No-SQL-databaser.

NPM-moduler

Nodejs tillader moduler af biblioteker at blive inkluderet i applikationen. Disse moduler kan være brugerdefinerede eller tredjepartsmoduler.

Tredjepartsmodulerne kan installeres ved hjælp af følgende kommando:

npm install module_name

og de installerede moduler kan bruges ved hjælp af funktionen () :

var module = require(‘module_name’)

I Node-apps bruger vi en package.json-fil til at vedligeholde modulversionerne. Denne fil kan oprettes ved hjælp af denne kommando:

npm init

og pakkerne skal installeres som følger:

npm install -s module_name

Der er mange rammer, der kan tilføjes som moduler til vores Node-applikation. Disse vil blive forklaret yderligere efter behov.

Enkel chatapplikation

Appen skal tillade flere brugere at chatte sammen. Beskederne skal opdateres uden at siden opdateres. For enkelheds skyld undgår vi godkendelsesdelen.

Vi kan starte med at oprette en ny projektmappe og flytte ind i den. Derefter kan vi starte vores projekt med følgende kommando:

npm init

Dette vil bede os om at indtaste detaljer om vores projekt.

Herefter oprettes en package.json- fil:

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

Vores appkatalog er nu indstillet.

Den første ting, vi skal oprette, er en server. For at skabe det vil vi bruge en ramme ved navn Express.

Express.js

Express.js, eller simpelthen Express, er en webapplikationsramme for Node.js. Express giver et robust sæt funktioner til web- og mobilapplikationer. Express giver et tyndt lag af grundlæggende webapplikationsfunktioner uden at skjule Node.js-funktioner.

Vi installerer Express.js ved hjælp af følgende kommando:

npm install -s express

Inde i filen package.json tilføjes en ny linje:

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

Derefter opretter vi en server.js- fil.

I denne fil skal vi kræve Express og oprette en reference til en variabel fra en forekomst af Express. Statisk indhold som HTML, CSS eller JavaScript kan serveres ved hjælp af express.js:

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

og vi kan begynde at lytte til en port ved hjælp af koden:

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

Nu skal vi oprette en HTML-fil index.html, der viser vores brugergrænseflade. Jeg har tilføjet bootstrap og JQuery cdn.

//index.html    
    

Send Message

Send

Bemærk, at det tomme < ; / script> -tag er det sted, hvor vi skriver JavaScript-koden på klientsiden.

For at fortælle Express det, bruger vi en statisk fil. Vi tilføjer en ny linje inde i server.js:

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

Vi kan køre server.js ved hjælp af kommandoen

node ./server.js

eller en pakke kaldet nodemon , så de ændringer, der foretages i koden, automatisk registreres. Vi downloader nodemon ved hjælp af kommandoen

npm install -g nodemon

-g - global, så den er tilgængelig i alle projekter.

Vi kører koden ved hjælp af kommandoen

nodemon ./server.js

Hvis du går til localhost: 3000, kan vi se indeksfilen:

Nu hvor vores server er i gang, skal vi oprette vores database. Til denne app har vi en No-SQL-database og bruger Mongodb . Jeg opretter min mongodb i mlab.com . Vores database vil indeholde en enkelt samling kaldet beskeder med marker navn og budskab.

For at forbinde denne database til appen bruger vi en anden pakke kaldet 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); }) })

Og tilføj følgende kode i script-tagget på klientsiden i index.html :

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

Så hver gang der sendes en besked, opdaterer serveren beskederne i meddelelses div.

Store!!

Dette er meget grundlæggende program, som vi kan oprette i Node.js. Der er masser af muligheder for forbedring. Den færdige kode kan findes på //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); });

Håber dette var nyttigt til forståelse af nogle grundlæggende begreber.

Nogle nyttige links

Socket.IO

SOCKET.IO 2.0 ER HER FUNKTIONER DEN HURTIGSTE OG MEST PÅLIDELIGE MOTOR I REALTID ~ / Projekter / tweets / index.js var io =… socket.io Express - Node.js webapplikationsramme

Express er en minimal og fleksibel ramme til Node.js-webapplikation, der giver et robust sæt funktioner til web og ... expressjs.com

//mongoosejs.com/