WebSockets في TypeScript: بناء تطبيقات الوقت الفعلي من الصفر

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

لماذا WebSockets هي سحر الوقت الفعلي؟

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

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

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

\n\n

ما هي WebSockets ولماذا نحتاجها؟

WebSocket هو بروتوكول فوق TCP يوفر اتصالاً دائمًا بين المتصفح والخادم. على عكس HTTP، حيث كل طلب يفتح ويغلق اتصالاً، يحافظ WebSocket على الاتصال مفتوحًا.

أين يكون هذا ضروريًا؟

الدردشات وتطبيقات المراسلة - تصل الرسائل دون تأخير.
الألعاب عبر الإنترنت - يتم تحديث مواقع اللاعبين في الوقت الفعلي.
أسعار البورصة - تتغير الأسعار كل ملي ثانية.
التحرير المشترك - مثل Google Docs.

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

\n\n

إعداد المشروع: Node.js + TypeScript + WebSocket

لنبدأ بالتهيئة. تأكد من تثبيت Node.js (الإصدار 18+) و npm.

mkdir websocket-ts-chat\ncd websocket-ts-chat\nnpm init -y\nnpm install ws @types/ws typescript ts-node @types/node\nnpx tsc --init

في tsconfig.json، قم بتفعيل الوضع الصارم وحدد outDir: "./dist". هذا هو الأساس لأي مشروع TypeScript.

\n\n

كتابة خادم WebSocket باستخدام TypeScript

أنشئ ملف server.ts. هنا سنقوم بتشغيل خادم WebSocket على المنفذ 8080.

import { WebSocketServer, WebSocket } from 'ws';\n\nconst wss = new WebSocketServer({ port: 8080 });\n\ninterface CustomWebSocket extends WebSocket {\n    id: string;\n    username?: string;\n}\n\nwss.on('connection', (ws: CustomWebSocket) => {\n    ws.id = generateId();\n    console.log(`اتصل العميل: ${ws.id}`);\n\n    ws.on('message', (data: Buffer) => {\n        const message = data.toString();\n        console.log(`تم الاستلام: ${message}`);\n\n        // البث للجميع باستثناء المرسل\n        wss.clients.forEach((client) => {\n            if (client !== ws && client.readyState === WebSocket.OPEN) {\n                client.send(`[${ws.id}]: ${message}`);\n            }\n        });\n    });\n\n    ws.on('close', () => {\n        console.log(`فصل العميل: ${ws.id}`);\n    });\n\n    ws.send('مرحبًا بك في الدردشة!');\n});\n\nfunction generateId(): string {\n    return Math.random().toString(36).substring(2, 9);\n}\n\nconsole.log('تم تشغيل الخادم على ws://localhost:8080');

دعنا نحلل النقاط الرئيسية: