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

مقدمة في WebSocket و TypeScript لتطبيقات الوقت الفعلي

تتطلب تطبيقات الويب الحديثة بشكل متزايد تبادلاً فورياً للبيانات بين العميل والخادم. بروتوكول HTTP التقليدي، الذي يعمل وفق مبدأ "طلب-استجابة"، غير مناسب للمهام التي تكون فيها سرعة توصيل المعلومات حاسمة: الدردشات عبر الإنترنت، أسعار الأسهم، الألعاب متعددة اللاعبين، أو أنظمة المراقبة. وهنا يأتي WebSocket للإنقاذ - وهو بروتوكول يوفر اتصالاً ثنائي الاتجاه مستمراً.

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

أساسيات WebSocket: كيف يعمل البروتوكول

ما هو WebSocket؟

WebSocket (RFC 6455) هو بروتوكول ينشئ اتصالاً مستمراً بين العميل (المتصفح) والخادم. بعد المصافحة (handshake)، يمكن نقل البيانات في كلا الاتجاهين دون طلبات HTTP متكررة. هذا يقلل من زمن الوصول وعبء الشبكة.

الفرق عن HTTP

• HTTP: يبدأ العميل طلباً ← يرد الخادم ← يُغلق الاتصال (أو يبقى مفتوحاً للطلبات التالية، لكنه لا يزال يبدأ من قبل العميل).
• WebSocket: بعد إنشاء الاتصال، يمكن للخادم إرسال البيانات إلى العميل في أي لحظة (إشعارات دفع).

دورة حياة اتصال WebSocket

1. المصافحة (Handshake): يرسل العميل طلب HTTP مع رأس Upgrade: websocket. يرد الخادم برمز 101 Switching Protocols.
2. تبادل البيانات: بعد المصافحة الناجحة، يتحول الاتصال إلى بروتوكول WebSocket. تُنقل البيانات على شكل إطارات (frames).
3. الإغلاق: يمكن لأي من الطرفين بدء إغلاق الاتصال عن طريق إرسال إطار تحكم خاص.

إنشاء خادم WebSocket على TypeScript

اختيار المكتبة

بالنسبة للجزء الخادم، سنستخدم المكتبة الشائعة ws - وهي تطبيق خفيف وسريع لـ WebSocket لـ Node.js. سنقوم بتثبيتها مع الأنواع الخاصة بـ TypeScript:

npm install wsnpm install -D @types/ws

الخادم الأساسي

لننشئ ملف server.ts:

import { WebSocketServer, WebSocket } from 'ws';

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

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

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

  // إرسال رسالة ترحيبية  ws.send('مرحباً بك في الخادم!');

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

    // رد الصدى    ws.send(`صدى: ${text}`);  });

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

  // معالجة الأخطاء  ws.on('error', (error: Error) => {    console.error('خطأ WebSocket:', error);  });});

معالجة أنواع مختلفة من الرسائل

في التطبيقات الحقيقية، غالباً ما تكون الرسائل منظمة بتنسيق JSON. لننشئ معالجاً مكتوباً:

interface ChatMessage {  type: 'message' | 'join' | 'leave';  username: string;  content?: string;  timestamp: number;}

wss.on('connection', (ws: WebSocket) => {  ws.on('message', (data: Buffer) => {    try {      const msg: ChatMessage = JSON.parse(data.toString());            switch (msg.type) {        case 'join':          console.log(`${msg.username} انضم`);