WebSockets والتطبيقات الفورية

مقدمة إلى Socket.io

18 دقيقة الدرس 5 من 35

ما هو Socket.io؟

Socket.io هي مكتبة JavaScript شائعة تتيح الاتصال في الوقت الفعلي ثنائي الاتجاه القائم على الأحداث بين عملاء الويب والخوادم. تبني فوق بروتوكول WebSocket بينما توفر ميزات إضافية وتحسينات في الموثوقية.

نظرة عامة على Socket.io:

الإصدار: الإصدار المستقر الحالي هو 4.x (اعتبارًا من 2024)
يحتفظ بها: Guillermo Rauch ومجتمع نشط مفتوح المصدر
نجوم GitHub: 60,000+ نجمة (واحدة من أكثر مكتبات الوقت الفعلي شهرة)
حالات الاستخدام: تطبيقات الدردشة، أدوات التعاون، لوحات البيانات المباشرة، الألعاب، إنترنت الأشياء

Socket.io مقابل WebSockets الأصلية

بينما تستخدم Socket.io WebSocket كآلية نقل أساسية، فإنها توفر العديد من المزايا على استخدام WebSockets الخام:

مقارنة الميزات

الميزة                     | WebSocket الأصلي | Socket.io
---------------------------|------------------|------------------
الرجوع للاتصال             | لا               | نعم (استقصاء، إلخ)
إعادة الاتصال التلقائي     | لا               | نعم (مدمج)
دعم ثنائي                  | نعم              | نعم
واجهة برمجة قائمة على الأحداث | لا              | نعم
الغرف/مساحات الأسماء        | لا               | نعم (مدمج)
الإقرارات                  | لا               | نعم
البث                       | يدوي             | مساعدات مدمجة
دعم البرامج الوسيطة        | لا               | نعم
صديق للوكيل/جدار الحماية   | محدود            | نعم (رجوع)

1. إعادة الاتصال التلقائي

تحاول Socket.io تلقائيًا إعادة الاتصال عند فقدان الاتصال:

// WebSocket الأصلي: إعادة الاتصال اليدوي
const ws = new WebSocket('ws://example.com');
ws.onclose = () => {
  setTimeout(() => {
    // يجب إنشاء اتصال جديد يدويًا
    ws = new WebSocket('ws://example.com');
  }, 1000);
};

// Socket.io: إعادة الاتصال التلقائي
const socket = io('http://example.com');
// يعيد الاتصال تلقائيًا مع تراجع أسي
// لا حاجة لكود إضافي!

2. وسائل النقل الاحتياطية

إذا لم يكن WebSocket متاحًا (محظور بواسطة جدار الحماية، متصفح قديم، إلخ)، فإن Socket.io تتراجع تلقائيًا إلى استقصاء HTTP الطويل:

أولوية النقل (Socket.io):
1. WebSocket (مفضل - الأسرع)
2. HTTP Long-Polling (احتياطي - يعمل في كل مكان)

// WebSocket الأصلي: لا يوجد رجوع
// إذا فشل WebSocket، يفشل الاتصال

// Socket.io: رجوع تلقائي
// إذا تم حظر WebSocket، يستخدم الاستقصاء الطويل بشفافية

ميزة المؤسسة: تجعل وسائل النقل الاحتياطية Socket.io أكثر موثوقية في شبكات الشركات حيث قد يتم حظر WebSocket بواسطة الوكلاء أو جدران الحماية. يستمر التطبيق في العمل، مع تأخير أعلى قليلاً فقط.

3. واجهة برمجة قائمة على الأحداث

توفر Socket.io واجهة برمجة أنظف قائمة على الأحداث مقارنة بمعالجة رسائل WebSocket الخام:

// WebSocket الأصلي: معالجة رسائل قائمة على السلسلة
ws.send(JSON.stringify({ type: 'chat', message: 'مرحبًا' }));
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'chat') {
    // معالجة رسالة الدردشة
  }
};

// Socket.io: واجهة برمجة قائمة على الأحداث
socket.emit('chat', { message: 'مرحبًا' });
socket.on('chat', (data) => {
  // معالجة رسالة الدردشة مباشرة
  console.log(data.message);
});

4. الغرف ومساحات الأسماء

توفر Socket.io دعمًا مدمجًا لتنظيم العملاء في غرف ومساحات أسماء:

// WebSocket الأصلي: إدارة العملاء اليدوية
const rooms = new Map();
wss.on('connection', (ws) => {
  // يجب تنفيذ منطق الغرفة يدويًا
});

// Socket.io: غرف مدمجة
io.on('connection', (socket) => {
  socket.join('room1'); // الانضمام إلى الغرفة
  io.to('room1').emit('message', 'مرحبًا بالغرفة!'); // البث إلى الغرفة
});

5. الإقرارات

تدعم Socket.io أنماط الطلب-الاستجابة مع الإقرارات:

// يرسل العميل رسالة وينتظر الإقرار
socket.emit('save-data', { name: 'جون' }, (response) => {
  if (response.success) {
    console.log('تم حفظ البيانات بنجاح');
  }
});

// يقر الخادم بالاستجابة
socket.on('save-data', (data, callback) => {
  // حفظ البيانات...
  callback({ success: true, id: 123 });
});

متى تستخدم Socket.io مقابل WebSockets الأصلية

استخدم Socket.io عندما:

الموثوقية أمر بالغ الأهمية: الحاجة إلى إعادة الاتصال التلقائي ووسائل النقل الاحتياطية
شبكات الشركات: يجب أن يعمل التطبيق من خلال جدران الحماية المقيدة
ميزات معقدة: الحاجة إلى الغرف أو مساحات الأسماء أو مساعدات البث
التطوير السريع: واجهة برمجة قائمة على الأحداث تسرع التطوير
دعم متعدد المتصفحات: الحاجة إلى دعم المتصفحات القديمة

استخدم WebSockets الأصلية عندما:

الأداء الأقصى: كل ميلي ثانية من التأخير مهمة (الألعاب، التداول)
الحمل الأدنى: لا حاجة لميزات Socket.io الإضافية
حجم الحزمة مهم: عميل Socket.io حوالي 50KB (مقابل API أصلي مدمج في المتصفح)
متطلبات البروتوكول: يجب استخدام بروتوكول WebSocket القياسي (مثل الاتصال بخوادم WebSocket طرف ثالث)
التحكم الكامل: تريد التحكم الكامل في البروتوكول والتنفيذ

اعتبار حجم الحزمة: مكتبة عميل Socket.io حوالي 50KB مصغرة (15KB مضغوطة gzip). للتطبيقات الحرجة للأداء حيث كل بايت مهم، قد تكون WebSockets الأصلية أفضل.

هندسة Socket.io

تتكون Socket.io من مكونين رئيسيين:

1. مكتبة الخادم (Node.js)

// socket.io (خادم)
const { Server } = require('socket.io');
const io = new Server(3000);

io.on('connection', (socket) => {
  console.log('عميل متصل:', socket.id);
});

2. مكتبة العميل (المتصفح/Node.js)

// socket.io-client (متصفح)
const socket = io('http://localhost:3000');

socket.on('connect', () => {
  console.log('متصل بالخادم');
});

تثبيت Socket.io

تثبيت الخادم (Node.js)

# تثبيت خادم Socket.io
npm install socket.io

# أو باستخدام yarn
yarn add socket.io

# التحقق من الإصدار
npm list socket.io

تثبيت العميل

الخيار 1: CDN (بداية سريعة)

<!-- تضمين عميل Socket.io من CDN -->
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script>
  const socket = io('http://localhost:3000');
</script>

الخيار 2: npm/yarn (الإنتاج)

# تثبيت عميل Socket.io
npm install socket.io-client

# أو باستخدام yarn
yarn add socket.io-client

// الاستيراد في JavaScript الخاص بك
import { io } from 'socket.io-client';

const socket = io('http://localhost:3000');

الخيار 3: مستضاف ذاتيًا (تلقائي)

<!-- خادم Socket.io يخدم مكتبة العميل تلقائيًا -->
<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
</script>

خدمة العميل التلقائية: بشكل افتراضي، يخدم خادم Socket.io مكتبة العميل تلقائيًا على /socket.io/socket.io.js. هذا يضمن توافق الإصدار بين العميل والخادم.

مثال Socket.io أساسي

الخادم (server.js)

const { Server } = require('socket.io');
const io = new Server(3000, {
  cors: {
    origin: '*', // السماح بجميع الأصول (قم بالتكوين بشكل صحيح في الإنتاج)
  }
});

console.log('خادم Socket.io يستمع على المنفذ 3000');

io.on('connection', (socket) => {
  console.log('عميل متصل:', socket.id);

  // الاستماع لحدث 'message'
  socket.on('message', (data) => {
    console.log('تم استلام الرسالة:', data);

    // إعادة صدى للمرسل
    socket.emit('message', `صدى: ${data}`);
  });

  // الاستماع لحدث 'disconnect'
  socket.on('disconnect', (reason) => {
    console.log('قطع اتصال العميل:', socket.id, reason);
  });
});

العميل (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>مثال Socket.io</title>
</head>
<body>
  <h1>عميل Socket.io</h1>
  <input id="messageInput" type="text" placeholder="أدخل الرسالة">
  <button onclick="sendMessage()">إرسال</button>
  <div id="messages"></div>

  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
  <script>
    const socket = io('http://localhost:3000');

    // أحداث الاتصال
    socket.on('connect', () => {
      console.log('متصل بالخادم');
      console.log('معرف Socket:', socket.id);
    });

    socket.on('disconnect', (reason) => {
      console.log('قطع الاتصال:', reason);
    });

    // الاستماع للرسائل
    socket.on('message', (data) => {
      const messagesDiv = document.getElementById('messages');
      messagesDiv.innerHTML += `<p>${data}</p>`;
    });

    // دالة إرسال الرسالة
    function sendMessage() {
      const input = document.getElementById('messageInput');
      socket.emit('message', input.value);
      input.value = '';
    }
  </script>
</body>
</html>

نظرة عامة على الميزات الرئيسية لـ Socket.io

1. إعادة الاتصال التلقائي

// يعيد العميل الاتصال تلقائيًا مع تراجع أسي
socket.on('disconnect', () => {
  console.log('قطع الاتصال، سيحاول إعادة الاتصال');
});

socket.on('reconnect', (attemptNumber) => {
  console.log('أعيد الاتصال بعد', attemptNumber, 'محاولات');
});

socket.on('reconnect_failed', () => {
  console.log('فشل في إعادة الاتصال');
});

2. البث

// البث لجميع العملاء
io.emit('event', data);

// البث لجميع العملاء باستثناء المرسل
socket.broadcast.emit('event', data);

// البث للعملاء في غرفة
io.to('room1').emit('event', data);

3. الغرف

// الانضمام إلى الغرفة
socket.join('room1');

// مغادرة الغرفة
socket.leave('room1');

// الحصول على الغرف التي يوجد فيها socket
console.log(socket.rooms); // Set { <socket-id>, 'room1' }

4. مساحات الأسماء

// الخادم: إنشاء مساحة اسم
const chatNamespace = io.of('/chat');
chatNamespace.on('connection', (socket) => {
  console.log('متصل بمساحة اسم /chat');
});

// العميل: الاتصال بمساحة اسم
const chatSocket = io('http://localhost:3000/chat');

تمرين: أنشئ تطبيق Socket.io بسيط:

قم بإعداد خادم Socket.io على المنفذ 3000
أنشئ عميل HTML يتصل بالخادم
نفذ ميزة صدى بسيطة (يعيد الخادم صدى أي رسالة)
أضف تسجيل أحداث الاتصال/قطع الاتصال
اختبر إعادة الاتصال التلقائي بإعادة تشغيل الخادم بينما العميل متصل

Socket.io مقابل البدائل

Socket.io مقابل ws (WebSocket خام)

Socket.io: مستوى أعلى، المزيد من الميزات، أسهل في الاستخدام، حزمة أكبر
ws: مستوى أدنى، ميزات بسيطة، مزيد من التحكم، بصمة أصغر

Socket.io مقابل SignalR (Microsoft)

Socket.io: نظام Node.js البيئي، JavaScript أولاً، مجتمع أوسع
SignalR: نظام .NET البيئي، C# أولاً، تكامل Azure محكم

Socket.io مقابل Firebase Realtime Database

Socket.io: مستضاف ذاتيًا، تحكم كامل، منطق مخصص، مجاني (تكلفة البنية التحتية)
Firebase: خدمة مدارة، إعداد سهل، مزامنة البيانات، طبقات مدفوعة

خيارات تكوين Socket.io الشائعة

const io = new Server(3000, {
  // تكوين CORS
  cors: {
    origin: ['http://localhost:3000', 'https://example.com'],
    methods: ['GET', 'POST'],
    credentials: true
  },

  // مهلة الاتصال
  connectTimeout: 45000, // 45 ثانية

  // إعدادات Ping/pong
  pingTimeout: 20000,    // 20 ثانية
  pingInterval: 25000,   // 25 ثانية

  // حجم الحمل الأقصى
  maxHttpBufferSize: 1e6, // 1 MB

  // خيارات النقل
  transports: ['websocket', 'polling'], // جرب WebSocket أولاً

  // السماح بالترقيات من الاستقصاء إلى WebSocket
  allowUpgrades: true,

  // خدمة العميل
  serveClient: true,     // خدمة العميل على /socket.io/socket.io.js

  // المسار
  path: '/socket.io/'    // المسار الافتراضي
});

نصيحة الإنتاج: في الإنتاج، قم بتكوين CORS بشكل صحيح للسماح فقط بأصول نطاقك الفعلية. استخدام origin: '*' مريح للتطوير ولكنه غير آمن للإنتاج.

الملخص

Socket.io هي مكتبة غنية بالميزات تبسط تطوير الويب في الوقت الفعلي من خلال توفير إعادة الاتصال التلقائي، ووسائل النقل الاحتياطية، وواجهة برمجة قائمة على الأحداث، والغرف، ومساحات الأسماء، ومساعدات البث. بينما تضيف بعض الحمل مقارنة بـ WebSockets الخام، فإن مكاسب الموثوقية وإنتاجية المطورين تجعلها خيارًا ممتازًا لمعظم التطبيقات في الوقت الفعلي. التثبيت واضح باستخدام npm للخادم وCDN أو npm للعميل. في الدروس القادمة، سنستكشف ميزات Socket.io بعمق، بما في ذلك الأحداث والغرف ومساحات الأسماء والأنماط المتقدمة.