يتطلب مستوى متوسط. محتاج تكون مرتاح مع أساسيات Node.js وسطر أوامر npm، وفكرة بسيطة عن JavaScript في المتصفح. مش محتاج أي خبرة سابقة في الشبكات.
في نهاية المقال هيكون عندك شات لحظي شغّال بالكامل: خادم Node.js يستقبل رسالة من مستخدم ويوزّعها على كل المتصلين في أقل من مللي ثانية، بأقل من 60 سطر كود، من غير ما المتصفح يسأل السيرفر كل شوية.
اعمل شات لحظي بـ WebSocket في Node.js
المشكلة باختصار
الطريقة الشائعة عشان المتصفح يعرف إن في رسالة جديدة هي إنه يسأل السيرفر كل شوية (polling). الطريقة دي بتفشل في اللحظية والتكلفة مع أول ضغط حقيقي.
ركز في الأرقام. لو عندك 10 آلاف مستخدم والمتصفح بيسأل كل ثانيتين، ده 300 ألف طلب في الدقيقة، أغلبها بيرجع "مفيش جديد". وكل طلب بيحمل هيدرز HTTP حجمها 700 إلى 800 بايت. وفوق ده، الرسالة ممكن تتأخر لحد الطلب الجاي، يعني تأخير يوصل 2000 مللي ثانية بالظبط قد الفاصل بين طلبين.
مثال يقرّب الفكرة
تخيّل الفرق بين مكالمة تليفون وتبادل خطابات بالبريد. مع الخطابات، عشان تعرف في رد، لازم تبعت خطاب كل شوية تسأل: وصل جديد؟ ده الـ polling، مجهود ضائع في أغلب الأحيان. مع المكالمة، الخط مفتوح، والطرفين يتكلموا في أي لحظة من غير ما حد يعيد الاتصال. ده بالظبط اللي بيعمله WebSocket.
بالتفاصيل وبدقة: WebSocket بروتوكول اتصال ثنائي الاتجاه (full-duplex) فوق اتصال TCP واحد دائم. بيبدأ بطلب HTTP عادي فيه هيدر Upgrade: websocket، والسيرفر يرد بـ 101 Switching Protocols، وبعدها القناة تفضل مفتوحة والطرفين يبعتوا في أي وقت. المعيار موصوف رسميًا في RFC 6455.
الخطوة 1: ثبّت المكتبة وابنِ الخادم
هنستخدم مكتبة ws، أشهر مكتبة WebSocket في Node.js واللي مبني عليها مكتبات أعلى زي Socket.IO. ابدأ بتثبيتها:
npm init -y
npm install wsبعدين اعمل ملف server.js:
const { WebSocketServer } = require('ws');
const wss = new WebSocketServer({ port: 8080 });
wss.on('connection', (socket) => {
console.log('اتصال جديد. العدد الحالي:', wss.clients.size);
socket.on('message', (data) => {
// بث الرسالة لكل المتصلين
for (const client of wss.clients) {
if (client.readyState === client.OPEN) {
client.send(data.toString());
}
}
});
});
console.log('شغّال على ws://localhost:8080');
