تركز هذه المقالة على فهم مفهوم WebSockets في Node.js لإنشاء بوابة للاتصال ثنائي الاتجاه في الوقت الفعلي.
WebSockets
تعد Websockets نوعًا من قنوات الاتصال التي تنشئ قنوات ثنائية الاتجاه للمعلومات عبر اتصال واحد طويل الأمد. إنه ليس مثل الاتصال المعتاد ثنائي الاتجاه على الإنترنت، فهو يسمح لكل من المستخدم والخادم بإرسال الرسائل وقتما يريدون. التقنية المستخدمة هي مصافحة WebSocket، وهي عملية تنشئ اتصالاً سلسًا بين الخادم والمستخدم، مما يتيح لهم مشاركة المعلومات ذهابًا وإيابًا دون أي مشكلة.
دعونا نلقي نظرة على بعض مزايا WebSockets قبل أن نتعمق في إنشاء واحدة خاصة بنا.
مزايا WebSockets
يوفر WebSockets مزايا متعددة مقارنة بـ HTTP التقليدي:
سرعة أسرع
عندما يقوم المستخدم بإعداد WebSocket يظل الاتصال مفتوحًا طوال الوقت ولا توجد حاجة لبدء الاتصال أو إيقافه، مما يجعل الأمور أسرع دون أي تأخير.
الاستخدام الفعال للموارد
يستخدم WebSockets موارد أجهزة الكمبيوتر بكفاءة. وبما أنه لا يوجد وقت ضائع في بدء الاتصال أو إيقافه لكل طلب، فإن الكمبيوتر يعمل بشكل أفضل.
تحديثات فورية
إذا كان المستخدم يقوم بإنشاء تطبيق يحتاج إلى نقل المعلومات على الفور في الوقت الفعلي مثل الدردشة والنتائج الرياضية وما إلى ذلك، فإن WebSockets تضمن انتقال المعلومات بسرعة.
الآن بعد أن أصبح لدينا فهم أفضل لما نحاول تأسيسه، فلنقم ببناء WebSocket خاص بنا في Node.js.
كيفية إنشاء واستخدام WebSocket في Node.js؟
اتبع الخطوات أدناه لإعداد WebSocket بنجاح على جهازك:
الخطوة 1: إعداد بيئة التطوير
قبل إنشاء WebSocket، هناك بعض الحزم والوحدات النمطية المطلوبة مسبقًا التي سيتم تثبيتها.
قم بتثبيت الحزم التالية على جهازك:
npm الحرف الأول -yتثبيت npm ws
عمل أسطر الأوامر هذه هو كما يلي:
- ' npm الحرف الأول -y ' يقوم بتهيئة مشروع Node.js جديد. ال ' -و 'الأمر يعني نعم والذي يمكن إملاءه على أنه صحيح في لغة الكمبيوتر. كما يضمن أيضًا أنه سيستخدم جميع الحزم والوحدات الموجودة في json ملف. ال package.json يحتوي الملف على جميع المعلومات حول مشروع Node.js مثل التبعيات والوحدات النمطية والإعدادات الأخرى.
- بعد تهيئة المشروع، يمكن للمستخدم تشغيل الأمر الثاني لتثبيت ' ws ' طَرد. يوفر واجهة برمجة تطبيقات أساسية تقوم بإنشاء Websocket للخوادم والعملاء.
يقوم هذان الأمران بإعداد بيئة تطوير لإنشاء WebSocket وتوصيل المعلومات في الوقت الفعلي.
ملف package.json في Node.js
يحتوي ملف pakackge.json على جميع الوظائف الداعمة لمشروع Node.js.
ستكون محتويات ملف package.json كما يلي:
يعرض مربع اللون الأحمر في الصورة أعلاه إصدار مكتبة ws(WebSocket) المثبتة.
بعد إعداد بيئة التطوير، تابع إنشاء WebSocket.
الخطوة 2: إنشاء خادم WebSocket
لإنشاء خادم WebSocket، قم بإنشاء ملف في محرر التعليمات البرمجية الخاص بك بامتداد .js وأي اسم مرغوب فيه.
فيما يلي رمز ملف الخادم:
مقدار ثابت WebSocket = يتطلب ( 'وس' ) ;مقدار ثابت http = يتطلب ( 'http' ) ;
مقدار ثابت الخادم = http. createServer ( ) ;
مقدار ثابت com.wss = جديد WebSocket. الخادم ( { الخادم } ) ;
com.wss. على ( 'اتصال' , ( ws ) => {
وحدة التحكم. سجل ( 'العميل متصل' ) ;
ws. على ( 'رسالة' , ( رسالة ) => {
وحدة التحكم. سجل ( `تم الاستلام : $ { رسالة } ` ) ;
wss. عملاء . لكل ( ( عميل ) => {
لو ( عميل !== ws && عميل. ReadyState === WebSocket. يفتح ) {
عميل. يرسل ( رسالة ) ;
}
} ) ;
} ) ;
ws. على ( 'يغلق' , ( ) => {
وحدة التحكم. سجل ( 'تم قطع اتصال العميل' ) ;
} ) ;
} ) ;
الخادم. يستمع ( 3000 , ( ) => {
وحدة التحكم. سجل ( 'الاستماع للخادم على http://localhost:3000' ) ;
} ) ;
الوظائف التي يؤديها الكود أعلاه هي:
- ' const WebSocket = يتطلب ('ws') ' و ' ثابت http = يتطلب ('http') ' يستورد الوحدات المضمنة المطلوبة للتعامل مع طلبات HTTP.
- يقوم 'const server = http.createServer()' بإنشاء خادم أساسي في Node.js.
- ' const wss = new WebSocket.Server({ server }) ' يقوم بإنشاء WebSocket على خادم HTTP الذي تم إنشاؤه. للاستماع إلى رسائل WebSocket الواردة، يقوم بإعداد خادم مقبس الويب.
- ' على ('اتصال'، (ws) => { … }) 'يتم تنفيذه عندما يقوم العميل بإنشاء اتصال WebSocket. حالة ' ws ' يتم إنشاؤه وهو ما يمثل الاتصال.
- ' على ('رسالة'، (رسالة) => { … }) يتم تنفيذ هذا الرمز عند استلام رسالة (من العميل المتصل) إلى الخادم. يقوم بتسجيل الرسالة المستلمة ثم يقوم ببثها إلى جميع العملاء المتصلين.
- ' Clients.forEach((العميل) => { … }) 'يتكرر على جميع العملاء المتصلين ويرسل رسالة إلى كل عميل إذا كان اتصال WebSocket مفتوحًا.
- ال ' على ('إغلاق'، () => { … }) يتم تنفيذ الكود عندما ينقطع اتصال العميل باتصال WebSocket ويرسل رسالة إلى الخادم تشير إلى قطع اتصال العميل.
- ' استمع (3000، () => {… }) 'يبدأ خادم HTTP للاستماع على المنفذ 3000. بمجرد تشغيل الخادم، تشير إلى رسالة مفادها أن الخادم يستمع الآن على 'http://localhost:3000/”. Users can have some other port that is listening to the connections.
الآن بعد أن تم إنشاء WebSocket الخاص بنا، فلنختبره من جانب العميل.
الخطوة 3: إنشاء عميل لاختبار WebSocket الذي تم إنشاؤه
قم الآن بإنشاء ملف HTML أساسي يتم تشغيله على صفحة الويب لاختبار WebSocket. يخترع Index.html الملف واستخدم الكود أدناه:
< لغة البرمجة فقط = 'في' >
< رأس >
< ميتا مجموعة محارف = 'UTF-8' >
< ميتا اسم = 'إطار العرض' محتوى = 'العرض=عرض الجهاز، المقياس الأولي=1.0' >
< عنوان > دردشة ويب سوكيت < / عنوان >
< / رأس >
< جسم >
< مدخل يكتب = 'نص' بطاقة تعريف = 'إدخال الرسالة' العنصر النائب = 'اكتب رسالة...' >
< زر عند النقر = 'إرسال رسالة ()' > يرسل < / زر >
< ماي بطاقة تعريف = 'رسائل الدردشة' >< / ماي >
< النصي >
const ws = new WebSocket('ws://localhost:3000');
ws.addEventListener('open', (event) => {
console.log('متصل بالخادم');
});
ws.addEventListener('message', (event) => {
const chatMessages = document.getElementById('chatMessages');
const messageItem = document.createElement('li');
messageItem.textContent = events.data;
chatMessages.appendChild(messageItem);
});
وظيفة إرسال الرسالة () {
const messageInput = document.getElementById('messageInput');
رسالة ثابتة = messageInput.value;
إذا (رسالة) {
ws.send(message);
messageInput.value = '';
}
}
< / النصي >
< / جسم >
< / لغة البرمجة >
عمل الكود أعلاه هو كما يلي:
- تتم كتابة تنسيق التعليمات البرمجية الأساسي لـ HTML.
- ' ' ينشئ مربع إدخال على صفحة ويب HTML مع العنصر النائب الذي يشير إلى رسالة للمستخدم لكتابة رسالة.
- ' ' يرسل الرسالة المكتوبة من المستخدم إلى الخادم.
- '
- '