الويب في الوقت الفعلي: المستقبل وأفضل الممارسات

// WebTransport من جانب العميل (تجريبي) async function connectWebTransport() { const url = 'https://example.com:4433/transport'; try { const transport = new WebTransport(url); await transport.ready; console.log('WebTransport متصل'); // إنشاء تدفق ثنائي الاتجاه const stream = await transport.createBidirectionalStream(); const writer = stream.writable.getWriter(); const reader = stream.readable.getReader(); // إرسال البيانات await writer.write(new TextEncoder().encode('مرحباً خادم')); // قراءة البيانات const { value, done } = await reader.read(); if (!done) { console.log('تم الاستلام:', new TextDecoder().decode(value)); } // إرسال datagrams (غير موثوق، مثل UDP) const datagramWriter = transport.datagrams.writable.getWriter(); await datagramWriter.write(new TextEncoder().encode('رسالة سريعة')); } catch (error) { console.error('خطأ WebTransport:', error); } }

┌─────────────────┬──────────────┬──────────────┬──────────────┬────────────┐ │ التقنية │ ثنائي │ التعقيد │ حالة │ دعم │ │ │ الاتجاه │ │ الاستخدام │ المتصفح │ ├─────────────────┼──────────────┼──────────────┼──────────────┼────────────┤ │ WebSocket │ نعم │ متوسط │ تطبيقات │ ممتاز │ │ │ │ │ الوقت الفعلي │ 98%+ │ ├─────────────────┼──────────────┼──────────────┼──────────────┼────────────┤ │ Server-Sent │ لا (دفع │ منخفض │ التغذيات │ جيد │ │ Events (SSE) │ الخادم فقط) │ │ الحية │ 94%+ │ ├─────────────────┼──────────────┼──────────────┼──────────────┼────────────┤ │ Long Polling │ نعم │ منخفض │ دعم │ عالمي │ │ │ │ │ قديم │ 100% │ ├─────────────────┼──────────────┼──────────────┼──────────────┼────────────┤ │ WebRTC Data │ نعم │ عالي │ الألعاب P2P، │ جيد │ │ Channels │ │ │ مشاركة ملفات │ 95%+ │ ├─────────────────┼──────────────┼──────────────┼──────────────┼────────────┤ │ WebTransport │ نعم │ متوسط │ تطبيقات │ محدود │ │ │ │ │ منخفضة جداً │ تجريبي │ └─────────────────┴──────────────┴──────────────┴──────────────┴────────────┘

// 1. نمط Pub/Sub (مع Redis) class PubSubManager { constructor() { this.subscribers = new Map(); } subscribe(channel, callback) { if (!this.subscribers.has(channel)) { this.subscribers.set(channel, []); } this.subscribers.get(channel).push(callback); } publish(channel, data) { const callbacks = this.subscribers.get(channel) || []; callbacks.forEach(callback => callback(data)); } } // 2. نمط قائم على الغرفة class RoomManager { constructor() { this.rooms = new Map(); } createRoom(roomId) { this.rooms.set(roomId, new Set()); } joinRoom(roomId, socketId) { if (!this.rooms.has(roomId)) { this.createRoom(roomId); } this.rooms.get(roomId).add(socketId); } broadcast(roomId, event, data) { const sockets = this.rooms.get(roomId) || new Set(); sockets.forEach(socketId => { io.to(socketId).emit(event, data); }); } } // 3. نمط قائمة انتظار الرسائل class MessageQueue { constructor() { this.queue = []; this.processing = false; } async enqueue(message) { this.queue.push(message); if (!this.processing) { await this.processQueue(); } } async processQueue() { this.processing = true; while (this.queue.length > 0) { const message = this.queue.shift(); await this.handleMessage(message); } this.processing = false; } async handleMessage(message) { // منطق معالجة الرسالة console.log('معالجة:', message); } }

// التوسع الأفقي مع محول Redis const io = require('socket.io')(server); const redisAdapter = require('@socket.io/redis-adapter'); const { createClient } = require('redis'); const pubClient = createClient({ host: 'localhost', port: 6379 }); const subClient = pubClient.duplicate(); io.adapter(redisAdapter(pubClient, subClient)); // الآن يمكنك تشغيل مثيلات متعددة // جميع المثيلات ستشارك نفس Redis pub/sub

// التصحيح من جانب العميل localStorage.debug = 'socket.io-client:*'; const socket = io('http://localhost:3000', { transports: ['websocket'], reconnection: true, reconnectionDelay: 1000, reconnectionAttempts: 5 }); // مراقبة جودة الاتصال socket.on('connect', () => { const startTime = Date.now(); socket.emit('ping', {}, () => { const latency = Date.now() - startTime; console.log('الزمن الانتقالي:', latency, 'ميلي ثانية'); }); }); // المراقبة من جانب الخادم مع المقاييس const promClient = require('prom-client'); const connectedClients = new promClient.Gauge({ name: 'websocket_connected_clients', help: 'عدد عملاء WebSocket المتصلين' }); const messageLatency = new promClient.Histogram({ name: 'websocket_message_latency_ms', help: 'زمن معالجة الرسالة بالميلي ثانية', buckets: [1, 5, 10, 25, 50, 100, 250, 500, 1000] }); io.on('connection', (socket) => { connectedClients.inc(); socket.on('message', (data) => { const start = Date.now(); // معالجة الرسالة handleMessage(data); const duration = Date.now() - start; messageLatency.observe(duration); }); socket.on('disconnect', () => { connectedClients.dec(); }); });