So erstellen Sie eine Echtzeit-Chat-Anwendung in Node.js mit Express, Mongoose und Socket.io

In diesem Tutorial verwenden wir die Node.js-Plattform, um eine Echtzeit-Chat-Anwendung zu erstellen , die Nachrichten ohne Seitenaktualisierung sofort an einen Empfänger sendet und an einen Empfänger anzeigt. Wir werden das JavaScript-Framework Express.js und die Bibliotheken Mongoose und Socket.io verwenden, um dies zu erreichen.

Bevor wir beginnen, werfen wir einen kurzen Blick auf die Grundlagen von Node.js.

Node.js

Node.js ist eine plattformübergreifende Open-Source-JavaScript-Laufzeitumgebung, die JavaScript-Code außerhalb des Browsers ausführt. Der wichtigste Vorteil der Verwendung von Node ist, dass wir JavaScript sowohl als Front-End- als auch als Back-End-Sprache verwenden können.

Wie wir wissen, wurde JavaScript hauptsächlich für clientseitige Skripte verwendet, bei denen Skripte in den HTML-Code einer Webseite eingebettet und von einer JavaScript-Engine im Webbrowser des Benutzers clientseitig ausgeführt wurden.

Mit Node.js können Entwickler JavaScript zum Schreiben von Befehlszeilentools und für serverseitiges Scripting verwenden. Dabei werden Skripte serverseitig ausgeführt, um dynamischen Webseiteninhalt zu erstellen, bevor die Seite an den Webbrowser des Benutzers gesendet wird.

So installieren Sie den Knoten:

//nodejs.org/en/download/

Obwohl der Knoten Single-Threaded ist, ist es immer noch schneller, asynchrone Funktionen zu verwenden. Beispielsweise kann Node andere Dinge verarbeiten, während eine Datei von der Festplatte gelesen wird oder während auf den Abschluss einer HTTP-Anforderung gewartet wird. Das asynchrone Verhalten kann mithilfe von Rückrufen implementiert werden. Auch JavaScript funktioniert gut mit JSON- und No-SQL-Datenbanken.

NPM-Module

Mit Nodejs können die Module von Bibliotheken in die Anwendung aufgenommen werden. Diese Module können benutzerdefinierte Module oder Module von Drittanbietern sein.

Die Module von Drittanbietern können mit dem folgenden Befehl installiert werden:

npm install module_name

und die installierten Module können mit der Funktion require () verwendet werden:

var module = require(‘module_name’)

In Node-Apps verwenden wir eine package.json-Datei, um die Modulversionen zu verwalten. Diese Datei kann mit folgendem Befehl erstellt werden:

npm init

und die Pakete müssen wie folgt installiert werden:

npm install -s module_name

Es gibt viele Frameworks, die unserer Node-Anwendung als Module hinzugefügt werden können. Diese werden bei Bedarf weiter erläutert.

Einfache Chat-Anwendung

Die App muss es mehreren Benutzern ermöglichen, miteinander zu chatten. Die Nachrichten müssen aktualisiert werden, ohne die Seite zu aktualisieren. Der Einfachheit halber vermeiden wir den Authentifizierungsteil.

Wir können beginnen, indem wir ein neues Projektverzeichnis erstellen und in dieses wechseln. Dann können wir unser Projekt mit dem folgenden Befehl starten:

npm init

Dadurch werden wir aufgefordert, Details zu unserem Projekt einzugeben.

Danach wird eine package.json- Datei erstellt:

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

Unser App-Verzeichnis ist jetzt eingestellt.

Das erste, was wir erstellen müssen, ist ein Server. Um dies zu schaffen, werden wir ein Framework namens Express verwenden.

Express.js

Express.js oder einfach Express ist ein Webanwendungsframework für Node.js. Express bietet eine Reihe robuster Funktionen für Web- und mobile Anwendungen. Express bietet eine dünne Schicht grundlegender Webanwendungsfunktionen, ohne die Funktionen von Node.j zu beeinträchtigen.

Wir werden Express.js mit dem folgenden Befehl installieren:

npm install -s express

In der Datei package.json wird eine neue Zeile hinzugefügt:

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

Als nächstes erstellen wir eine server.js- Datei.

In dieser Datei müssen wir Express benötigen und einen Verweis auf eine Variable aus einer Express-Instanz erstellen. Statische Inhalte wie HTML, CSS oder JavaScript können mit express.js bereitgestellt werden:

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

und wir können anfangen, einen Port mit dem Code abzuhören:

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

Jetzt müssen wir eine HTML-Datei index.html erstellen, die unsere Benutzeroberfläche anzeigt. Ich habe Bootstrap und JQuery CDN hinzugefügt.

//index.html    

Send Message

Send

Bitte beachten Sie, dass das leere < ; / script> -Tag der Ort ist, an dem wir den clientseitigen JavaScript-Code schreiben.

Um Express dies mitzuteilen, verwenden wir eine statische Datei. Wir werden eine neue Zeile in server.js hinzufügen:

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

Wir können die Datei server.js mit dem Befehl ausführen

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

And in the client side script tag in index.html, add the following code:

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

So each time a message is posted, the server will update the messages in the message div.

Great!!

This is very basic application that we can create in Node.js. There is lot of scope for improvement. The finished code can be found in //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); });

Hope this was helpful in understanding some basic concepts.

Some useful links

Socket.IO

SOCKET.IO 2.0 IS HERE FEATURING THE FASTEST AND MOST RELIABLE REAL-TIME ENGINE ~/Projects/tweets/index.js var io =…socket.ioExpress - Node.js web application framework

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and…expressjs.com

//mongoosejs.com/