مكتبات WebSocket الخاصة بـ TypeScript: ws, Socket.IO, uWebSockets.js

مكتبات WebSocket الخاصة بـ TypeScript: نظرة عامة شاملة وأمثلة عملية

في تطوير الويب الحديث، أصبحت تقنية WebSocket هي المعيار لإنشاء تطبيقات الوقت الفعلي (real-time). بفضل الاتصال ثنائي الاتجاه المستمر بين العميل والخادم، تعتبر WebSocket مثالية للدردشات والألعاب عبر الإنترنت والمتداولين في البورصة وأنظمة المراقبة وأي مشاريع أخرى تتطلب نقلًا فوريًا للبيانات. في هذه المقالة، سنقوم بتحليل ثلاث مكتبات WebSocket رئيسية لـ TypeScript: ws و Socket.IO و uWebSockets.js، بما في ذلك تثبيتها وإعدادها وأمثلة على الكود.

1. مكتبة ws — WebSocket خفيف وسريع لـ Node.js

مكتبة ws هي أكثر تطبيقات بروتوكول WebSocket شيوعًا وبساطة لـ Node.js. لا تضيف أي تجريدات إضافية، وتعمل مباشرة مع البروتوكول الأصلي وتوفر أقصى أداء. يتم دعم TypeScript من خلال الأنواع (types) التي يمكن تثبيتها بشكل منفصل.

التثبيت

npm install wsnpm install -D @types/ws

مثال على خادم بسيط باستخدام TypeScript

import { WebSocketServer, WebSocket } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (ws: WebSocket) => {  console.log('تم اتصال العميل');

  ws.on('message', (message: Buffer) => {    console.log('تم استلام رسالة:', message.toString());    // إرسال الرد لجميع العملاء المتصلين    wss.clients.forEach((client) => {      if (client.readyState === WebSocket.OPEN) {        client.send(`صدى: ${message.toString()}`);      }    });  });

  ws.on('close', () => {    console.log('تم فصل العميل');  });});

console.log('خادم WebSocket قيد التشغيل على ws://localhost:8080');

كود العميل (المتصفح)

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {  console.log('تم إنشاء الاتصال');  ws.send('مرحبًا أيها الخادم!');};

ws.onmessage = (event: MessageEvent) => {  console.log('الرد من الخادم:', event.data);};

الإيجابيات: حمل إضافي ضئيل، تحكم كامل في البروتوكول، مناسب جدًا للأنظمة عالية التحميل.

السلبيات: لا يوجد دعم مدمج للغرف (rooms)، أو إعادة الاتصال التلقائي، أو التبديل الاحتياطي (fallback) إلى نقل HTTP.

2. Socket.IO — حل شامل مع واجهة برمجة تطبيقات غنية

Socket.IO ليس مجرد WebSocket، بل هو إطار عمل كامل للاتصالات في الوقت الفعلي. يستخدم WebSocket كوسيلة نقل رئيسية، ولكنه يتحول تلقائيًا إلى HTTP long-polling إذا كانت WebSocket غير متاحة (على سبيل المثال، خلف بروكسي أو متصفحات قديمة). يوفر Socket.IO آليات جاهزة: الغرف، مساحات الأسماء (namespaces)، إعادة الاتصال التلقائي، تأكيد تسليم الرسائل (acknowledgements) وغيرها الكثير.

التثبيت

npm install socket.io socket.io-clientnpm install -D @types/socket.io

مثال على خادم مع غرف باستخدام TypeScript

import { Server, Socket } from 'socket.io';import http from 'http';

const server = http.createServer();const io = new Server(server, {  cors: { origin: '*' }});

io.on('connection', (socket: Socket) => {  console.log('تم اتصال المستخدم:', socket.id);

  // الانضمام إلى غرفة  socket.on('join_room', (roomName: string) => {    socket.join(roomName);    socket.to(roomName).emit('user_joined', socket.id);  });

  // إرسال رسالة إلى غرفة  socket.on('room_message', (data: { room: string; message: string }) => {    io.to(data.room).emit('new_message', {      user: socket.id,      text: data.message    });  });

  socket.on('disconnect', () => {    console.log('تم فصل المستخدم:', socket.id);  });});

server.listen(3000, () => {  console.log('خادم Socket.IO قيد التشغيل على المنفذ');