WebSocket على JavaScript: إنشاء تطبيقات الوقت الفعلي على Node.js

WebSocket على JavaScript: إنشاء تطبيقات real-time باستخدام Node.js

يتطلب الويب الحديث استجابة فورية. يتوقع المستخدمون وصول الرسائل في الدردشة خلال أجزاء من الثانية، وتحديث أسعار الأسهم دون إعادة تحميل الصفحة، واستلام الإشعارات في الوقت الفعلي. تقنية WebSocket على JavaScript تحل هذه المشكلة من خلال توفير اتصال ثنائي الاتجاه دائم بين العميل والخادم. في هذه المقالة، سنشرح كيفية استخدام WebSocket في بيئة Node.js لإنشاء تطبيقات real-time سريعة وقابلة للتوسع.

ما هو WebSocket ولماذا نحتاجه؟

يعمل بروتوكول HTTP التقليدي على مبدأ "طلب-استجابة": يرسل العميل طلبًا، ويستجيب الخادم، ثم يُغلق الاتصال. للحصول على بيانات جديدة، يضطر العميل إلى استقصاء الخادم باستمرار (polling) أو استخدام طلبات HTTP الطويلة (long polling). هذا غير فعال، ويخلق حملاً زائدًا ويزيد من زمن الاستجابة.

WebSocket (RFC 6455) هو بروتوكول يُنشئ اتصالاً مزدوجًا دائمًا عبر قناة TCP واحدة. بعد المصافحة (handshake) عبر HTTP، يمكن للخادم والعميل إرسال البيانات لبعضهما البعض في أي وقت دون الحاجة إلى رؤوس إضافية. هذا يجعل WebSocket حلاً مثاليًا لـ:

• الدردشات وتطبيقات المراسلة
• الألعاب عبر الإنترنت والتحرير المشترك
• أسعار الأسهم ولوحات المعلومات المالية
• الإشعارات الفورية والمراقبة
• نقل البيانات المتدفقة (IoT، السجلات)

تثبيت وإعداد خادم WebSocket على Node.js

للعمل مع WebSocket على جانب الخادم، سنستخدم مكتبة ws - وهي أشهر وأوثق تطبيق لـ Node.js. سنقوم بتثبيتها عبر npm:

npm install ws

لنقم بإنشاء خادم WebSocket بسيط. أولاً، نستورد الوحدة وننشئ مثيلاً للخادم على المنفذ 8080:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {    console.log('تم اتصال عميل جديد');

    // إرسال رسالة ترحيبية للعميل    ws.send('مرحبًا بك في خادم WebSocket!');

    // معالجة الرسائل الواردة    ws.on('message', function incoming(message) {        console.log('تم الاستلام: %s', message);        // الرد على جميع العملاء المتصلين        wss.clients.forEach(function each(client) {            if (client.readyState === WebSocket.OPEN) {                client.send(`الصدى: ${message}`);            }        });    });

    // معالجة فصل العميل    ws.on('close', function close() {        console.log('تم فصل العميل');    });

    // معالجة الأخطاء    ws.on('error', function error(err) {        console.error('خطأ WebSocket:', err);    });});

console.log('خادم WebSocket قيد التشغيل على ws://localhost:8080');

يقوم هذا الكود بإنشاء خادم صدى بسيط: أي رسالة يرسلها العميل سيتم إعادة توجيهها إلى جميع المستخدمين المتصلين. لاحظ التحقق من readyState - فهو يضمن أننا لا نحاول إرسال بيانات إلى اتصال مغلق.

جزء العميل WebSocket في المتصفح

على جانب العميل (المتصفح)، WebSocket هو كائن مدمج - لا حاجة لأي مكتبات إضافية. سنتصل بخادمنا وننفذ دردشة بسيطة:

// إنشاء اتصال WebSocketconst socket = new WebSocket('ws://localhost:8080');

// معالج فتح الاتصالsocket.addEventListener('open', function (event) {    console.log('تم إنشاء الاتصال');    socket.send('مرحبًا أيها الخادم!');});

// معالج استلام الرسالةsocket.addEventListener('message', function (event) {    const messagesDiv = document.getElementById('messages');    const messageElement = document.createElement('div');```