Socket.io لجافا سكريبت (Node.js): دليل كامل مع أمثلة

ما هو Socket.io ولماذا نحتاجه؟

Socket.io هي مكتبة جافا سكريبت قوية توفر اتصالاً ثنائي الاتجاه في الوقت الفعلي (real-time) بين العميل (المتصفح) والخادم (Node.js). على عكس بروتوكول HTTP التقليدي، حيث يرسل العميل طلبًا وينتظر الرد، يسمح Socket.io للخادم ببدء إرسال البيانات إلى العميل في أي لحظة، والعكس صحيح.

لماذا نحتاج هذا؟ تخيل تطبيق محادثة، لعبة عبر الإنترنت، لوحة تحكم برسوم بيانية حية، أو نظام تحرير مستندات مشترك. في كل هذه السيناريوهات، يجب تحديث البيانات فورًا دون إعادة تحميل الصفحة. HTTP غير مناسب لهذا لأنه يعمل وفق مبدأ "طلب-استجابة". يحل Socket.io هذه المشكلة عن طريق إنشاء اتصال دائم (عادةً عبر WebSocket) يمكن من خلاله نقل البيانات في كلا الاتجاهين في أي لحظة.

الميزات الرئيسية لـ Socket.io:

\n
• ثنائية الاتجاه: يمكن للخادم والعميل إرسال الرسائل لبعضهما البعض.
\n
• الوقت الفعلي: يتم تسليم الرسائل فورًا (بأقل تأخير).
\n
• إعادة الاتصال التلقائي: إذا انقطع الاتصال، يحاول Socket.io استعادته تلقائيًا.
\n
• الغرف (Rooms): إمكانية تجميع العملاء وإرسال الرسائل إلى مجموعة معينة فقط.
\n
• مساحات الأسماء (Namespaces): تقسيم التطبيق إلى قنوات اتصال مستقلة.
\n
• الموثوقية: إذا لم يكن WebSocket مدعومًا، يتحول Socket.io تلقائيًا إلى طرق أخرى (long-polling، FlashSocket، إلخ).
\n

تثبيت Socket.io

يتكون Socket.io من جزأين: جزء الخادم (لـ Node.js) وجزء العميل (للمتصفح). يتم تثبيت كليهما عبر npm.

تثبيت جزء الخادم

افتح الطرفية في مجلد مشروعك ونفذ الأمر التالي:

npm install socket.io

تثبيت جزء العميل

يمكن ربط سكريبت العميل بطريقتين:

1. عبر CDN (الأسهل للبدء):

<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>

2. عبر npm (للمشاريع التي تستخدم أدوات التجميع مثل Webpack):

npm install socket.io-client

بداية سريعة: أول محادثة

لننشئ محادثة بسيطة حيث يرى جميع العملاء الرسائل المرسلة من عميل واحد.

الخطوة 1: الخادم (ملف server.js)

// server.js\nconst http = require('http');\nconst { Server } = require("socket.io");\n\n// 1. إنشاء خادم HTTP\nconst server = http.createServer((req, res) => {\n    res.writeHead(200, { 'Content-Type': 'text/plain' });\n    res.end('خادم Socket.io قيد التشغيل');\n});\n\n// 2. إنشاء مثيل Socket.io مرتبط بالخادم\nconst io = new Server(server);\n\n// 3. معالج اتصال عميل جديد\nio.on('connection', (socket) => {\n    console.log('مستخدم جديد متصل:', socket.id);\n\n    // 4. الاستماع لحدث 'chat message' من العميل\n    socket.on('chat message', (msg) => {\n        console.log('الرسالة:', msg);\n        // 5. إرسال الرسالة إلى جميع العملاء المتصلين (بما فيهم المرسل)\n        io.emit('chat message', msg);\n    });\n\n    // 6. معالج فصل العميل\n    socket.on('disconnect', () => {\n        console.log('مستخدم مفصول:', socket.id);\n    });\n});\n\n// 7. تشغيل الخادم على المنفذ 3000\nserver.listen(3000, () => {\n    console.log('الخادم قيد التشغيل على http://localhost:3000');\n});\n

الخطوة 2: العميل (ملف index.html)

<!DOCTYPE html>\n<html>\n<head>\n    <title>محادثة Socket.io</title>\n    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>