كيفية إنشاء تطبيق دردشة في الوقت الفعلي في Node.js باستخدام Express و Mongoose و Socket.io

في هذا البرنامج التعليمي ، سنستخدم النظام الأساسي Node.js لإنشاء تطبيق دردشة في الوقت الفعلي يرسل ويعرض الرسائل إلى المستلم على الفور دون أي تحديث للصفحة. سنستخدم إطار عمل JavaScript Express.js والمكتبات Mongoose و Socket.io لتحقيق ذلك.

قبل أن نبدأ ، دعنا نلقي نظرة سريعة على أساسيات Node.js

Node.js

Node.js هي بيئة تشغيل JavaScript مفتوحة المصدر ومتعددة المنصات تقوم بتنفيذ كود JavaScript خارج المتصفح. أهم ميزة لاستخدام Node هي أنه يمكننا استخدام JavaScript كلغة للواجهة الأمامية والخلفية.

كما نعلم ، تم استخدام JavaScript بشكل أساسي للبرمجة النصية من جانب العميل ، حيث تم تضمين البرامج النصية في HTML لصفحة الويب وتشغيلها من جانب العميل بواسطة محرك JavaScript في متصفح الويب الخاص بالمستخدم.

يتيح Node.js للمطورين استخدام JavaScript لكتابة أدوات سطر الأوامر وللبرامج النصية من جانب الخادم - تشغيل البرامج النصية من جانب الخادم لإنتاج محتوى صفحة ويب ديناميكي قبل إرسال الصفحة إلى متصفح الويب الخاص بالمستخدم.

لتثبيت العقدة:

//nodejs.org/en/download/

على الرغم من أن العقدة مفردة الخيوط ، فلا يزال من الأسرع استخدام الوظائف غير المتزامنة. على سبيل المثال ، يمكن للعقدة معالجة أشياء أخرى أثناء قراءة الملف خارج القرص ، أو أثناء انتظار اكتمال طلب 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.

Express.js

Express.js ، أو Express ببساطة ، هو إطار عمل لتطبيق الويب لـ Node.js. يوفر Express مجموعة قوية من الميزات لتطبيقات الويب والجوال. يوفر Express طبقة رقيقة من ميزات تطبيقات الويب الأساسية ، دون حجب ميزات Node.js.

سنقوم بتثبيت Express.js باستخدام الأمر التالي:

npm install -s express

داخل ملف package.json ، سيُضاف سطر جديد:

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

بعد ذلك سننشئ ملف 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    
    

Send Message

Send

يرجى ملاحظة أن العلامة الفارغة < ؛ / script> ستكون المكان الذي سنكتب فيه كود JavaScript من جانب العميل.

من أجل إخبار Express بذلك ، سنستخدم ملفًا ثابتًا. سنضيف سطرًا جديدًا داخل server.js:

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

يمكننا تشغيل server.js باستخدام الأمر

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

وفي علامة البرنامج النصي من جانب العميل في index.html ، أضف الكود التالي:

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

لذلك في كل مرة يتم فيها نشر رسالة ، سيقوم الخادم بتحديث الرسائل في الرسالة div.

عظيم!!

هذا تطبيق أساسي للغاية يمكننا إنشاؤه في Node.js. هناك مجال كبير للتحسين. يمكن العثور على الكود النهائي في //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); });

آمل أن يكون هذا مفيدًا في فهم بعض المفاهيم الأساسية.

بعض الروابط المفيدة

مقبس

SOCKET.IO 2.0 يتميز هنا الأسرع والأكثر موثوقية محرك الوقت الحقيقي ~ / المشاريع / tweets / index.js var io =… socket.io Express - إطار عمل تطبيق الويب Node.js

Express هو إطار عمل تطبيق ويب Node.js مبسط ومرن يوفر مجموعة قوية من الميزات للويب و… expressjs.com

//mongoosejs.com/