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

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

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

ما هو WebSocket ولماذا TypeScript؟

WebSocket هو بروتوكول يوفر اتصالًا ثنائي الاتجاه دائمًا بين العميل والخادم. على عكس HTTP، حيث يرسل العميل طلبًا ويتلقى ردًا، يسمح WebSocket لكلا الطرفين ببدء نقل البيانات في أي لحظة. هذا مثالي لـ تطبيقات الوقت الفعلي التي يكون فيها زمن الوصول المنخفض أمرًا بالغ الأهمية.

يضيف TypeScript كتابة ثابتة إلى JavaScript، وهو أمر بالغ الأهمية للمشاريع التي تستخدم WebSocket. تساعد الأنواع في تجنب الأخطاء عند معالجة الرسائل وتجعل الكود أكثر قابلية للتنبؤ. على سبيل المثال، يمكنك تعريف واجهة للرسائل الواردة والصادرة:

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

interface ServerResponse {    status: 'ok' | 'error';    data?: ChatMessage;    error?: string;}

هذا الأسلوب يبسط بشكل كبير عملية تصحيح الأخطاء وصيانة الكود.

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

لإنشاء الخادم، سنستخدم مكتبة ws — وهي تطبيق شائع لـ WebSocket في Node.js. سنقوم بتثبيت التبعيات:

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

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

import { WebSocketServer, WebSocket } from 'ws';

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

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

    // نرسل رسالة ترحيبية    ws.send(JSON.stringify({        type: 'system',        message: 'مرحبًا بك في الدردشة!'    }));

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

            // نرسل الرسالة إلى جميع العملاء المتصلين            wss.clients.forEach((client) => {                if (client.readyState === WebSocket.OPEN) {                    client.send(JSON.stringify({                        type: 'broadcast',                        user: message.user,                        text: message.text,                        timestamp: Date.now()                    }));                }            });        } catch (error) {            ws.send(JSON.stringify({                type: 'error',                message: 'تنسيق رسالة غير صحيح'            }));        }    });

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

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

قم بتشغيل الخادم باستخدام الأمر npx ts-node server.ts. الخادم جاهز لاستقبال الاتصالات وبث الرسائل.

عميل WebSocket على TypeScript

الآن سنقوم بإنشاء جزء العميل. يعمل TypeScript بشكل ممتاز في المتصفح، لذلك سنكتب العميل بلغة TypeScript النقية التي سيتم تجميعها إلى JavaScript.

ملف client.ts:

interface ChatMessage {    type: string;    user?: string;    text?: string;    message?: string;    timestamp?: number;}

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

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