WebSocket على TypeScript: إنشاء تطبيقات الوقت الفعلي

WebSocket على TypeScript: إنشاء تطبيقات في الوقت الفعلي

تتطلب تطبيقات الويب الحديثة تبادلاً فورياً للبيانات بين العميل والخادم. يوفر بروتوكول WebSocket اتصالاً ثنائي الاتجاه مستمراً، مما يجعله مثالياً لإنشاء الدردشات وأنظمة الإشعارات والألعاب عبر الإنترنت وخدمات الوقت الفعلي الأخرى. في هذه المقالة، سنشرح بالتفصيل كيفية العمل مع WebSocket على TypeScript — بدءاً من إعداد الخادم وصولاً إلى تنفيذ العميل.

ما هو WebSocket ولماذا هو مطلوب؟

WebSocket هو بروتوكول اتصال يوفر قناة مزدوجة الاتجاه بالكامل عبر اتصال TCP واحد. على عكس HTTP التقليدي، حيث يرسل العميل طلباً وينتظر الرد، يسمح WebSocket للخادم ببدء إرسال البيانات إلى العميل بشكل مستقل.

المزايا الرئيسية لـ WebSocket:

• اتصال مستمر — لا حاجة لإنشاء اتصال جديد لكل طلب
• زمن استجابة منخفض — يتم نقل البيانات فوراً دون حمل إضافي لرؤوس HTTP
• اتصال ثنائي الاتجاه — يمكن للخادم إرسال البيانات دون طلب من العميل
• كفاءة — حركة مرور أقل مقارنة بحلول الاستقصاء (polling)

يُستخدم WebSocket على نطاق واسع في التطبيقات المالية (أسعار البورصة)، والشبكات الاجتماعية (الإعجابات والتعليقات في الوقت الفعلي)، والألعاب متعددة اللاعبين، وأنظمة المراقبة، وإنترنت الأشياء (IoT).

إعداد خادم WebSocket على TypeScript

لإنشاء الخادم، سنستخدم المكتبة الشائعة ws. قم بتثبيتها عبر npm:

npm init -ynpm install wsnpm install -D typescript @types/ws @types/nodenpx tsc --init

لنقم بإنشاء ملف server.ts:

import { WebSocketServer, WebSocket } from 'ws';

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

interface CustomMessage {  type: string;  payload: any;}

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

  // إرسال رسالة ترحيبية  const welcomeMessage: CustomMessage = {    type: 'welcome',    payload: { message: 'مرحباً بك في الخادم!' }  };  ws.send(JSON.stringify(welcomeMessage));

  // معالجة الرسائل الواردة  ws.on('message', (data: Buffer) => {    try {      const message: CustomMessage = JSON.parse(data.toString());            switch (message.type) {        case 'chat':          // بث الرسالة لجميع العملاء المتصلين          broadcast(message, ws);          break;        case 'ping':          ws.send(JSON.stringify({ type: 'pong', payload: {} }));          break;        default:          console.log('نوع رسالة غير معروف:', message.type);      }    } catch (error) {      console.error('خطأ في معالجة الرسالة:', error);    }  });

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

  ws.on('error', (error: Error) => {    console.error('خطأ في WebSocket:', error);  });});

function broadcast(message: CustomMessage, sender: WebSocket) {  wss.clients.forEach((client) => {    if (client !== sender && client.readyState === WebSocket.OPEN) {      client.send(JSON.stringify(message));    }  });}

console.log(`خادم WebSocket قيد التشغيل على ws://localhost:${PORT}`);

قم بتشغيل الخادم باستخدام الأمر npx ts-node server.ts. سيقوم الخادم بالاستماع على المنفذ 8080 ومعالجة الاتصالات الواردة.

إنشاء عميل WebSocket على TypeScript

يمكن تنفيذ جزء العميل لكل من المتصفح و Node.js. سننظر في كلا الخيارين.

عميل المتصفح

لنقم بإنشاء ملف client.ts للاستخدام في تطبيق الويب:

class WebSocketClient {  private socket: WebSocket;  private url: string;

  constructor(url: string) {    this.url = url;    this.socket = new WebSocke
```