WebSocket في JavaScript: بناء تطبيقات الوقت الفعلي باستخدام Node.js

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

تتطلب تطبيقات الويب الحديثة تبادلاً فورياً للبيانات بين العميل والخادم. بروتوكول HTTP التقليدي، القائم على الطلبات والاستجابات، غير مناسب للمهام التي تكون فيها السرعة مهمة: الدردشات عبر الإنترنت، أسعار الأسهم، الألعاب متعددة اللاعبين أو أنظمة الإشعارات. هنا يأتي دور بروتوكول WebSocket. في هذه المقالة، سنشرح كيفية عمل WebSocket في JavaScript، وسننشئ تطبيقاً بسيطاً يعمل في الوقت الفعلي (real-time) باستخدام Node.js.

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

WebSocket هو بروتوكول اتصال مزدوج الاتجاه (full-duplex) عبر اتصال TCP. على عكس HTTP، حيث يبدأ العميل الطلب دائماً، يسمح WebSocket للخادم بإرسال البيانات إلى العميل بشكل مستقل في أي لحظة. يتم تحقيق ذلك من خلال إنشاء قناة ثنائية الاتجاه دائمة بعد المصافحة الأولية (initial handshake).

المزايا الرئيسية لـ WebSocket مقارنة بـ HTTP:

• زمن استجابة منخفض — يتم نقل البيانات فوراً دون الحاجة إلى رؤوس HTTP متكررة.
• توفير في حركة المرور — حمل إضافي ضئيل بعد إنشاء الاتصال.
• اتصال دائم — لا حاجة إلى polling أو long-polling.
• اتصال ثنائي الاتجاه — يمكن للخادم بدء إرسال البيانات.

يعتبر WebSocket مثالياً لتطبيقات real-time: الدردشات، الإشعارات، التحرير المشترك للمستندات، المحطات المالية والألعاب عبر الإنترنت.

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

للعمل مع WebSocket على Node.js، سنستخدم المكتبة الشهيرة ws. إنها خفيفة الوزن، موثوقة وموثقة جيداً.

لنبدأ بالتثبيت:

npm init -ynpm install ws

الآن، لننشئ خادم WebSocket بسيطاً يقبل الاتصالات ويستجيب للرسائل:

// server.jsconst 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('تم فصل العميل');    });});

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

قم بتشغيل الخادم باستخدام الأمر node server.js. الخادم جاهز لقبول الاتصالات.

إنشاء الجزء العميل (Client-side) باستخدام JavaScript

يعمل الجزء العميل مباشرة في المتصفح. واجهة برمجة تطبيقات WebSocket (WebSocket API) مدمجة في جميع المتصفحات الحديثة، لذلك لا حاجة لأي مكتبات إضافية.

لننشئ صفحة HTML بواجهة بسيطة:

<!DOCTYPE html><html><head>    <title>دردشة WebSocket</title>    <style>        #messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }        #input { width: 300px; }    </style></head><body>    <h2>دردشة فورية (Real-time Chat)</h2>    <div id="messages"></div>    <input type="text" id="input" placeholder="أدخل رسالة..." />    <button onclick="sendMessage()">إرسال</button>

    <script>        // الاتصال بخادم WebSocket        const socket = new WebSocket('ws://localhost:8080');

        // معالج ا