مكتبات WebSocket الخاصة بـ TypeScript: ws و Socket.IO – دليل شامل

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

WebSocket هو بروتوكول يوفر اتصالاً ثنائي الاتجاه في الوقت الفعلي بين العميل والخادم. في بيئة TypeScript/Node.js، أشهر المكتبات للعمل مع WebSocket هي ws (خفيفة الوزن) و Socket.IO (مع إمكانيات إضافية). في هذه المقالة، سنستعرض بالتفصيل كلتا المكتبتين، وكيفية تثبيتهما، والاستخدام الأساسي، وأمثلة على الكود بلغة TypeScript.

1. مكتبة ws

ws هي مكتبة WebSocket بسيطة وسريعة لـ Node.js، متوافقة تماماً مع TypeScript. توفر واجهة برمجة تطبيقات WebSocket نقية بدون تجريدات غير ضرورية.

التثبيت

npm install wsnpm install -D @types/ws

إنشاء خادم WebSocket بلغة TypeScript

import { WebSocketServer, WebSocket } from 'ws';

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

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

  // إرسال رسالة إلى العميل  ws.send('مرحباً بك!');

  // معالجة الرسائل الواردة  ws.on('message', (data: Buffer) => {    const message = data.toString();    console.log(`تم الاستلام: ${message}`);

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

  // معالجة إغلاق الاتصال  ws.on('close', () => {    console.log('تم فصل العميل');  });});

console.log('تم تشغيل خادم WebSocket على المنفذ 8080');

كود العميل بلغة TypeScript

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

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

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

ws.onclose = () => {  console.log('تم إغلاق الاتصال');};

2. مكتبة Socket.IO

Socket.IO هي مكتبة ذات مستوى أعلى، مبنية فوق WebSocket. تضيف:

• إعادة الاتصال التلقائي عند انقطاع الاتصال
• دعم الغرف ومساحات الأسماء (namespaces)
• آلية احتياطية (التحول إلى HTTP long-polling إذا كان WebSocket غير متاح)
• دعم مدمج للأحداث (events)

التثبيت

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

الخادم بلغة TypeScript مع Socket.IO

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

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

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

  // الانضمام إلى غرفة  socket.on('join_room', (room: string) => {    socket.join(room);    console.log(`Socket ${socket.id} انضم إلى الغرفة ${room}`);  });

  // معالجة حدث مخصص  socket.on('chat_message', (data: { room: string; message: string }) => {    // إرسال الرسالة إلى الجميع في الغرفة باستثناء المرسل    socket.to(data.room).emit('chat_message', {      userId: socket.id,      message: data.message    });  });

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

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

العميل بلغة TypeScript مع Socket.IO

import { io, Socket } from 'socket.io-client';

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

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

  // الانضمام إلى غرفة  socket.emit('join_room', 'room_1');});

socket.on('chat_message', (data: { us