مكتبة WebSocket بلغة TypeScript: ws و Socket.IO و SockJS

مكتبة WebSocket بلغة TypeScript: نظرة عامة شاملة للموقع التعليمي

WebSocket هو بروتوكول يوفر اتصالاً ثنائي الاتجاه بين العميل والخادم في الوقت الفعلي. في بيئة TypeScript، توجد عدة مكتبات شائعة تُبسّط العمل مع WebSocket. في هذه المقالة، سنستعرض ثلاث أدوات رئيسية: ws و Socket.IO و SockJS، وسنوضح كيفية دمجها في مشروع تعليمي بلغة TypeScript.

لماذا WebSocket مهم للتعليم؟

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

1. مكتبة ws — WebSocket بسيط لـ Node.js

ws هي أبسط وأسرع مكتبة WebSocket للجزء الخادم من Node.js. إنها مناسبة تماماً للحالات التي تحتاج فيها إلى WebSocket نقي دون ميزات إضافية.

التثبيت

npm install wsnpm install @types/ws --save-dev

مثال على الخادم بلغة TypeScript

import { WebSocketServer } from 'ws';

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

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

  ws.send('مرحباً بك في الموقع التعليمي!');

  ws.on('message', (data) => {    console.log(`تم الاستلام: ${data}`);    ws.send(`الصدى: ${data}`);  });

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

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

مثال على العميل بلغة TypeScript

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

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

ws.onmessage = (event) => {  console.log('رسالة من الخادم:', event.data);};

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

الإيجابيات: حجم صغير، أداء عالٍ، تحكم كامل.
السلبيات: لا يوجد إعادة اتصال تلقائي، لا يوجد دعم للغرف.

2. Socket.IO — مكتبة قوية لتطبيقات الوقت الفعلي

Socket.IO هي المعيار الفعلي لتطبيقات الوقت الفعلي. توفر إعادة اتصال تلقائي، غرف، مساحات أسماء، ودعم لوسائل النقل البديلة (مثل الاستقصاء الطويل).

التثبيت

npm install socket.io socket.io-clientnpm install @types/socket.io --save-dev

مثال على الخادم بلغة TypeScript

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', (roomName: string) => {    socket.join(roomName);    socket.to(roomName).emit('user_joined', socket.id);  });

  socket.on('send_message', (data: { room: string; message: string }) => {    io.to(data.room).emit('new_message', {      user: socket.id,      message: data.message    });  });

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

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

مثال على العميل بلغة TypeScript

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

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

socket.on('connect', () => {  console.log('متصل بالخادم، المعرف:', socket.id);  socket.emit('join_room', 'javascript-lesson');});

socket.on('new_message', (data) => {  console.log(`${data.user}: ${