إنشاء وتشغيل مشروع Socket.io باستخدام ServBay

Socket.io هي مكتبة جافاسكريبت شهيرة، صُمِّمت خصيصًا لبناء تطبيقات ويب تفاعلية وآنية قائمة على الأحداث ثنائية الاتجاه. تعتمد على بروتوكول WebSocket، وتوفر آليات احتياطية مثل الاستطلاع الطويل (long polling) لضمان استقرار وأمان الاتصال في كافة البيئات والشبكات.

سيرشدك هذا الدليل خطوة بخطوة حول كيفية الاستفادة من بيئة ServBay القوية لإعداد وتشغيل وإدارة مشروع Socket.io. يوفر ServBay بيئة Node.js مُعدّة مسبقًا وأدوات إدارة مواقع سهلة الاستخدام، لجعل تطوير Socket.io أكثر كفاءة.

ما هو Socket.io؟

Socket.io هي مكتبة توفر آليّة تواصل آنية وحدثية ثنائية الاتجاه. تتكون من قسمين:

1. مكتبة خلفية تعمل على خادم Node.js.
2. مكتبة جافاسكريبت للعميل تعمل في المتصفح.

بالرغم من أن هدف Socket.io الأساسي هو استخدام WebSocket، إلا أنه يكفل التوافق مع المتصفحات القديمة أو الشبكات المقيّدة من خلال الكشف الآلي والرجوع إلى وسائل نقل أخرى (مثل Adobe Flash Socket، Ajax Long Polling، Ajax Multipart Streaming، Forever IFrame، JSONP Polling، وغيرها).

الميزات الرئيسية والفوائد لـ Socket.io

• الاتصال الآني: يتيح التبادل الفوري للبيانات بين الخادم والعميل، ما يجعله مثاليًا لتطبيقات الدردشة، أدوات التعاون، لوحات البيانات الحية، الألعاب الإلكترونية وغيرها.
• دعم عبر المنصات: متاح للاستخدام في متصفحات الويب وتطبيقات الهواتف وبيئة خوادم Node.js.
• إعادة الاتصال التلقائي: يحاول العميل إعادة الاتصال بالخادم تلقائيًا عند انقطاع الاتصال، ما يعزز قوة التطبيق واستقراره.
• بنية موجهة بالأحداث: تعتمد على نموذج برمجة بالأحداث، مما يجعل التعامل مع الاتصالات غير المتزامنة أكثر سهولة ووضوحًا.
• الغرف والمساحات: يدعم تجميع المستخدمين في "غرف" لإرسال رسائل موجهة، كما يتيح "المساحات" لاستخدام موارد متعددة على نفس الاتصال.
• دعم البيانات الثنائية: يمكن بسهولة إرسال واستقبال بيانات ثنائية.
• توافقية عالية: يضمن الاتصال المستقر من خلال تقديم عدة آليات نقل في ظل ظروف الشبكة المختلفة.

بفضل Socket.io، يمكن للمطور التركيز على منطق التطبيق دون الانشغال بتفاصيل تعقيدات الاتصال الآني من الخلفية.

إنشاء وتشغيل مشروع Socket.io باستخدام ServBay

يقدم لك ServBay بيئة جاهزة لمطوري Node.js، تشمل وقت تشغيل Node.js ومدير الحزم npm بالإضافة إلى أدوات إدارة المواقع. سنستفيد من هذه الأدوات لإنشاء مشروع Socket.io تجريبي.

المتطلبات الأساسية

قبل البدء، تأكد من توفر ما يلي:

1. تثبيت ServBay: قم بتحميل وتثبيت أحدث إصدار من الموقع الرسمي لـ ServBay.
2. تثبيت حزمة Node.js داخل ServBay: تأكد من تثبيت Node.js ضمن حزم ServBay من واجهة الإدارة ضمن قسم "الحزم". للمزيد من التفاصيل راجع مستند استخدام Node.js في ServBay.

إنشاء مشروع Socket.io تجريبي

سنقوم بإنشاء تطبيق دردشة بسيط كنموذج.

1. تهيئة مجلد المشروع:

   بدايةً، افتح تطبيق الطرفية Terminal. يوصى بوضع مشاريع المواقع ضمن المسار /Applications/ServBay/www. انتقل إلى هذا المسار، أنشئ مجلدًا جديدًا للمشروع، ثم قم بتهيئة مشروع Node.js وتركيب الاعتمادات اللازمة:

   cd /Applications/ServBay/www
   mkdir servbay-socketio-chat
   cd servbay-socketio-chat
   npm init -y
   npm install express socket.io

   سيتم إنشاء ملف package.json داخل مجلد servbay-socketio-chat، مع تثبيت حزمتي express (لتقديم الملفات والتعامل مع الطلبات HTTP) وsocket.io (مكتبة الخادم والعميل الأساسية).

2. إنشاء ملف الخادم (server.js):

   أنشئ ملفًا باسم server.js في جذر المشروع والصق فيه الكود التالي. سيقوم هذا الملف بتشغيل خادوم HTTP ودمج Socket.io والتحكم باتصالات العملاء وبث الرسائل بينهم.

   const express = require('express');
   const http = require('http');
   const socketIo = require('socket.io');
   const path = require('path'); // استدعاء مكتبة path
   
   const app = express();
   // إنشاء خادوم HTTP يعتمد على تطبيق express
   const server = http.createServer(app);
   // دمج Socket.io مع الخادوم
   const io = socketIo(server);
   
   // تعيين مجلد تقديم الملفات الثابتة ليكون المجلد الحالي
   app.use(express.static(__dirname));
   
   // معالجة طلبات GET للمسار الجذري، وإرسال ملف index.html
   app.get('/', (req, res) => {
     // استخدام path.join لضمان التوافق بين أنظمة التشغيل
     res.sendFile(path.join(__dirname, 'index.html'));
   });
   
   // الاستماع لاتصالات Socket.io
   io.on('connection', (socket) => {
     console.log('a user connected'); // عند اتصال مستخدم جديد
   
     // مراقبة أحداث قطع الاتصال
     socket.on('disconnect', () => {
       console.log('user disconnected'); // عند انفصال المستخدم
     });
   
     // الاستماع لحدث 'chat message'
     socket.on('chat message', (msg) => {
       console.log('message: ' + msg); // طباعة الرسالة المستقبلة
       // بث الرسالة إلى كافة العملاء المتصلين
       io.emit('chat message', msg);
     });
   });
   
   // الحصول على رقم المنفذ من متغيرات البيئة أو الافتراضي
   const port = process.env.PORT || 3000;
   server.listen(port, () => {
     console.log(`Server running on port ${port}`);
     console.log(`Access it via http://localhost:${port} (direct) or via ServBay reverse proxy`);
   });

   شرح الكود:

   • استخدمنا express لبناء خادم ويب بسيط يقدم ملف index.html.
   • http.createServer(app) ينشئ خادوم HTTP قياسي قاعدة لتشغيل Socket.io عليه.
   • socketIo(server) يهيئ ويشبك Socket.io بالخادوم.
   • io.on('connection', ...) لمراقبة الاتصالات الجديدة.
   • socket.on('disconnect', ...) لمراقبة قطع الاتصال.
   • socket.on('chat message', ...) لحدث استقبال الرسائل من العميل.
   • io.emit('chat message', msg) لبث الرسائل تلقائيًا لجميع العملاء المتصلين.

3. إنشاء ملف العميل (index.html):

   أنشئ ملفًا باسم index.html في جذر المشروع، وأضف فيه الشيفرة التالية. يحتوي هذا الملف على هيكل HTML وتصميم CSS وكود جافاسكريبت لربط العميل بالخادم وإرسال واستقبال الرسائل.

   <!DOCTYPE html>
   <html>
   <head>
     <title>ServBay Socket.io Chat</title>
     <style>
       body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
       #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
       #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
       #input:focus { outline: none; }
       #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
       #messages { list-style-type: none; margin: 0; padding: 0; }
       #messages > li { padding: 0.5rem 1rem; }
       #messages > li:nth-child(odd) { background: #efefef; }
       .servbay-banner {
         background-color: #007bff; /* أزرق ServBay */
         color: white;
         text-align: center;
         padding: 15px 0;
         font-size: 22px;
         margin-bottom: 20px;
         font-weight: bold;
       }
     </style>
   </head>
   <body>
     <div class="servbay-banner">مرحباً بك في تجربة الدردشة مع ServBay Socket.io!</div>
     <ul id="messages"></ul>
     <form id="form" action="">
       <input id="input" autocomplete="off" /><button type="submit">إرسال</button>
     </form>
   
     <!-- إدراج مكتبة عميل Socket.io -->
     <!-- يتم توليد هذا الملف ديناميكياً من الخادم أثناء التشغيل -->
     <script src="/socket.io/socket.io.js"></script>
     <script>
       // الاتصال بخادم Socket.io
       // إذا كان العميل والخادم على نفس النطاق والمنفذ، سيتم الاتصال تلقائياً
       var socket = io();
   
       var form = document.getElementById('form');
       var input = document.getElementById('input');
       var messages = document.getElementById('messages'); // الحصول على عنصر الرسائل
   
       form.addEventListener('submit', function(e) {
         e.preventDefault(); // منع السلوك الافتراضي لإرسال النموذج
         if (input.value) {
           // إرسال حدث 'chat message' ومحتوى الرسالة إلى الخادم
           socket.emit('chat message', input.value);
           input.value = ''; // تفريغ حقل الإدخال
         }
       });
   
       // الاستماع لحدث 'chat message' المرسل من الخادم
       socket.on('chat message', function(msg) {
         // إنشاء عنصر قائمة جديد لإظهار الرسالة
         var item = document.createElement('li');
         item.textContent = msg; // استخدام textContent للحماية من هجمات XSS
         messages.appendChild(item); // إضافة الرسالة للقائمة
         // تمرير الشاشة للرسالة الأخيرة تلقائياً
         window.scrollTo(0, document.body.scrollHeight);
       });
     </script>
   </body>
   </html>

   شرح الكود:

   • الصفحة تتضمن هيكل HTML بسيط وبعض أنماط CSS (منها بانر بلون ServBay المميز)، قائمة رسائل (ul#messages) ونموذج إرسال (form#form).
   • <script src="/socket.io/socket.io.js"></script> تستورد مكتبة عميل Socket.io. هذا الملف يتم تقديمه ديناميكياً من الخادم عند التشغيل.
   • io() يبدأ الاتصال بين العميل وخادم Socket.io.
   • الكود يراقب إرسال النموذج، يمنع الإرسال الافتراضي، ثم يرسل الرسالة إلى الخادم وينظف الحقل.
   • يستقبل الرسائل الجديدة من الخادم ويضيفها إلى القائمة في الواجهة مباشرة.

بهذا تكون قد أنجزت كتابة الكود الأساسي لمشروع Socket.io تجريبي جاهز للتشغيل عبر ServBay.

تشغيل المشروع عبر ServBay (وضع التطوير)

أثناء التطوير، عادةً يتم تشغيل خادوم Node.js مباشرة ثم ربطه عبر ميزة الوكيل العكسي في ServBay على النطاق المحلي.

1. تشغيل خادم تطوير Node.js:

   افتح الطرفية، انتقل إلى مشروعك ثم نفِّذ الأمر التالي لتشغيل الخادم على منفذ (مثال: 8585):

   cd /Applications/ServBay/www/servbay-socketio-chat
   PORT=8585 node server.js

   بعد بدء الخادم، سترى في الطرفية رسالة مثل Server running on port 8585. الآن الخادم يستمع على المنفذ المحلي 8585.

2. تكوين موقع (وكيل عكسي) في ServBay:

   لسهولة الوصول عبر نطاق محلي والاستفادة من دعم HTTPS، أنشئ موقع وكيل عكسي جديد داخل ServBay:

   • افتح لوحة تحكم ServBay.
   • انتقل إلى قسم "المواقع".
   • اضغط زر إضافة موقع جديد.
   • الإعدادات:
     • الاسم: ServBay Socket.io Dev (أو اسم آخر حسب رغبتك)
     • النطاقات: servbay-socketio-dev.servbay.demo (أو أي نطاق محلي .servbay.demo)
     • نوع الموقع: اختر وكيل عكسي (Reverse Proxy)
     • هدف الوكيل: أدخل http://127.0.0.1:8585
   • احفظ التكوين. سيطبق ServBay التعديلات تلقائياً وقد يحتاج إلى إعادة تشغيل خادم الويب الداخلي (Caddy أو Nginx بحسب إعدادك).

   ملاحظة: الوكيل العكسي يدعم Socket.io لأنه يمرر ليس فقط طلبات HTTP القياسية بل أيضاً اتفاقية ترقية بروتوكول WebSocket. إعدادات ServBay (Caddy/Nginx) تضمن دعم ذلك.

   لمزيد من الشرح حول إضافة مواقع في ServBay راجع وثيقة إضافة موقع تطوير Node.js. يمكنك تشغيل HTTPS/SSL بسهولة على النطاق المحلي عبر ServBay، انظر استخدام SSL/TLS. يتوفر خيارا ServBay User CA وServBay Public CA لإنشاء وتوثيق الشهادات المحلية.

3. زيارة الموقع في وضع التطوير:

   افتح المتصفح وادخل نطاقك المحلي الذي قمت بتكوينه، مثال: https://servbay-socketio-dev.servbay.demo. ستظهر واجهة الدردشة ويمكنك تجربة المحادثة الحية بين أكثر من نافذة أو جهاز.

نشر المشروع عبر ServBay (وضع الإنتاج)

في بيئة الإنتاج، من الأفضل الاعتماد على مدير عمليات مثل PM2 أو forever لتشغيل تطبيق Node.js بشكل موثوق وخلفي ودمجه مع ServBay. سنركز هنا فقط على جزء إعداد الوكيل العكسي، بافتراض أن تطبيقك يعمل على منفذ محدد ثابت.

1. تشغيل خادم Node.js للإنتاج:

   يوصى باستخدام أداة إدارة مثل PM2 في الإنتاج لضمان الاستمرارية وإعادة التشغيل التلقائي:

   # لتثبيت PM2 (عند الحاجة)
   # npm install pm2 -g
   
   cd /Applications/ServBay/www/servbay-socketio-chat
   PORT=8586 NODE_ENV=production pm2 start server.js --name servbay-socketio-prod

   سيبدأ PM2 الخادم على المنفذ 8586 مع تفعيل بيئة production.

2. تكوين موقع إنتاجي (وكيل عكسي) في ServBay:

   كرر نفس الخطوات في وضع التطوير، مع تخصيص منفذ الإنتاج:

   • افتح لوحة تحكم ServBay.
   • انتقل إلى قسم "المواقع".
   • اضغط زر إضافة موقع جديد.
   • الإعدادات:
     • الاسم: ServBay Socket.io Prod (أو اسم مناسب)
     • النطاقات: servbay-socketio-prod.servbay.demo
     • نوع الموقع: وكيل عكسي (Reverse Proxy)
     • هدف الوكيل: http://127.0.0.1:8586
   • احفظ الإعدادات.

3. زيارة الموقع الإنتاجي:

   افتح متصفحك وزر العنوان https://servbay-socketio-prod.servbay.demo.

بفضل ServBay يمكنك إدارة عدة تطبيقات Node.js (سواء للتطوير أو الإنتاج) مع تخصيص نطاقات محلية وشهادات SSL بسهولة دون الحاجة لتعديل ملف hosts أو إعداد خوادم ويب معقدة يدوياً.

ربط قواعد البيانات التي يوفرها ServBay

يدعم ServBay عدة حزم قواعد بيانات، من بينها MySQL، MariaDB، PostgreSQL، MongoDB وRedis. قد يحتاج تطبيق Socket.io الخاص بك إلى التعامل مع هذه القواعد لتخزين البيانات أو أرشفة المحادثات. فيما يلي نماذج ربط Node.js بكل منها:

هام: تأكد من تثبيت وتفعيل قاعدة البيانات المطلوبة من واجهة إدارة ServBay قبل تشغيل الأكواد التالية. المواصفات الافتراضية (مثل المنفذ، المستخدم، وكلمة السر) يمكن معرفتها من واجهة إدارة قواعد البيانات بـ ServBay أو وثائقه (مثلاً: كلمة مرور root تُحدد عند تثبيت ServBay ويمكن تعديلها لاحقاً).

1. الاتصال بـ MongoDB:

   تثبيت مكتبة Mongoose أو mongodb الرسمية:

   npm install mongoose

   ضمن كود الخادم (مثلاً في server.js أو ملف خاص):

   const mongoose = require('mongoose');
   
   // الاتصال افتراضياً بـ MongoDB على المنفذ 27017 (الافتراضي)
   // اسم قاعدة البيانات servbay_socketio_app على سبيل المثال
   mongoose.connect('mongodb://localhost:27017/servbay_socketio_app', {
     useNewUrlParser: true,
     useUnifiedTopology: true,
     // خيارات أخرى للمصادقة
     // user: 'your_mongo_user',
     // pass: 'your_mongo_password'
   })
   .then(() => console.log('تم الاتصال بـ MongoDB بنجاح عبر Mongoose'))
   .catch(err => console.error('خطأ في الاتصال بـ MongoDB:', err));
   
   // الآن يمكنك تعريف الواجهات والموديلات مع mongoose.model()
   // ...

2. الاتصال بـ Redis:

   تثبيت مكتبة redis:

   npm install redis

   إضافة كود الاتصال في Node.js:

   const redis = require('redis');
   
   // إنشاء عميل Redis (الافتراضي على localhost:6379)
   const client = redis.createClient({
     // إذا كانت هناك كلمة سر
     // password: 'your_redis_password',
     // url: 'redis://localhost:6379'
   });
   
   client.on('error', (err) => {
     console.error('خطأ في الاتصال بـ Redis:', err);
   });
   
   client.on('connect', () => {
     console.log('تم الاتصال بـ Redis بنجاح');
   });
   
   // الاتصال بالخادوم
   client.connect(); // مطلوبة للإصدار v4+ من المكتبة
   
   // يمكنك الآن تنفيذ أوامر عبر client (مثال: await client.set('mykey', 'myvalue');)
   // ...

3. الاتصال بـ MariaDB / MySQL:

   ServBay يدعم MariaDB وMySQL، وطريقة الربط متشابهة. سنستخدم مكتبة mariadb كمثال.

   تثبيت المكتبة:

   npm install mariadb

   كود الاتصال في Node.js:

   const mariadb = require('mariadb');
   
   // إنشاء تجمّع اتصالات
   const pool = mariadb.createPool({
     host: 'localhost',
     port: 3306, // المنفذ الافتراضي
     user: 'root', // عادةً المستخدم الافتراضي هو root
     password: 'password', // أدخل كلمة المرور المُعينة في ServBay
     database: 'servbay_socketio_app', // اسم قاعدة بيانات افتراضي
     connectionLimit: 5 // عدد الاتصالات في التجمع
   });
   
   // اختبار الاتصال بالتجمع
   pool.getConnection()
     .then(conn => {
       console.log("تم الاتصال بـ MariaDB/MySQL بنجاح");
       conn.release(); // تحرير الاتصال
       // يمكنك الآن استخدام pool لتنفيذ الاستعلامات
       // مثال: await pool.query("SELECT 1");
       // ...
     })
     .catch(err => {
       console.error("خطأ في الاتصال بـ MariaDB/MySQL:", err);
     });

   ملحوظة: استبدل كلمة المرور بما يناسب إعداد ServBay الخاص بك. يوصى بإنشاء مستخدم وقاعدة بيانات مخصصة للتطبيق بدل الاعتماد على root.

4. الاتصال بـ PostgreSQL:

   تثبيت مكتبة pg:

   npm install pg

   كود الاتصال:

   const { Pool } = require('pg');
   
   // إنشاء تجمع اتصالات
   const pool = new Pool({
     user: 'user', // اسم المستخدم الافتراضي (استبدله حسب إعدادك)
     host: 'localhost',
     database: 'servbay_socketio_app', // اسم قاعدة البيانات
     password: 'password', // كلمة المرور التي عينتها في ServBay
     port: 5432, // المنفذ الافتراضي
   });
   
   // اختبار الاتصال
   pool.connect((err, client, done) => {
     if (err) {
       console.error('خطأ في الاتصال بـ PostgreSQL:', err);
       return;
     }
     console.log('تم الاتصال بـ PostgreSQL بنجاح');
     client.release(); // تحرير الاتصال
     // يمكنك استخدام pool لتنفيذ الاستعلامات
     // مثال: pool.query('SELECT NOW()', (err, res) => { ... });
     // ...
   });

   ملحوظة: غيّر اسم المستخدم وكلمة المرور حسب إعدادك في ServBay.

بدمج قاعدة بيانات مع تطبيقك، يمكنك بناء تطبيقات Socket.io أكثر تعقيدًا ومرونة. يسهّل ServBay إعداد وتنصيب بيئة تطوير محلية كاملة في دقائق.

ملاحظات هامة

• تعارض المنافذ: تأكد أن المنفذ المستخدم من تطبيقك غير مستعمل من برنامج آخر (مثال: 8585 أو 8586). يمكنك تعديله بتغيير متغير البيئة PORT.
• تكوين مواقع ServBay: بعد إعداد موقع وكيل عكسي، تأكد من إعادة تشغيل خادم الويب في ServBay لتطبيق التعديلات (Caddy أو Nginx).
• دعم WebSocket في الوكيل العكسي: إعداد ServBay يدعم WebSocket تلقائيًا. إذا واجهت مشاكل، راجع سجل الخادم أو الإعدادات وتأكد من تفعيل الوكيل.
• جدار الحماية: تأكد أن الجدار الناري للنظام لا يمنع الوصول لمنافذ ServBay أو منافذ تطبيق Node.js.

الأسئلة الشائعة