كيفية استخدام WebSockets في التفاعل مع المقبس.io في عام 2026: الدليل الكامل

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

الإعداد

npm install socket.io-client

الاتصال الأساسي

// socket.js - create a single shared socket instance
import { io } from 'socket.io-client';

export const socket = io('http://localhost:3001', {
  autoConnect: false,   // connect manually when ready
  reconnection: true,
  reconnectionDelay: 1000,
});

خطاف useSocket قابل لإعادة الاستخدام

// hooks/useSocket.js
import { useEffect, useState } from 'react';
import { socket } from '../socket';

export function useSocket() {
  const [isConnected, setIsConnected] = useState(socket.connected);

  useEffect(() => {
    socket.connect();

    function onConnect() { setIsConnected(true); }
    function onDisconnect() { setIsConnected(false); }

    socket.on('connect', onConnect);
    socket.on('disconnect', onDisconnect);

    // Cleanup - CRITICAL to prevent duplicate listeners
    return () => {
      socket.off('connect', onConnect);
      socket.off('disconnect', onDisconnect);
      socket.disconnect();
    };
  }, []);

  return { socket, isConnected };
}

الاستماع للأحداث

// hooks/useMessages.js - subscribe to a specific event
import { useEffect, useState } from 'react';
import { socket } from '../socket';

export function useMessages() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    function onMessage(msg) {
      setMessages(prev => [...prev, msg]);
    }

    socket.on('message', onMessage);

    // Always clean up the listener to avoid duplicates on re-render
    return () => {
      socket.off('message', onMessage);
    };
  }, []);

  const sendMessage = (text) => {
    socket.emit('send_message', { text, timestamp: Date.now() });
  };

  return { messages, sendMessage };
}

مكون دردشة كامل

import { useState } from 'react';
import { useSocket } from './hooks/useSocket';
import { useMessages } from './hooks/useMessages';

function Chat() {
  const { isConnected } = useSocket();
  const { messages, sendMessage } = useMessages();
  const [input, setInput] = useState('');

  const handleSend = (e) => {
    e.preventDefault();
    if (input.trim()) {
      sendMessage(input);
      setInput('');
    }
  };

  return (
    <div>
      <div>Status: {isConnected ? 'Connected' : 'Disconnected'}</div>
      <ul>
        {messages.map((msg, i) => (
          <li key={i}>{msg.text}</li>
        ))}
      </ul>
      <form onSubmit={handleSend}>
        <input value={input} onChange={e => setInput(e.target.value)} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

مؤشرات الكتابة والتواجد

export function useTyping() {
  const [typingUsers, setTypingUsers] = useState([]);

  useEffect(() => {
    function onTyping({ user, isTyping }) {
      setTypingUsers(prev =>
        isTyping
          ? [...new Set([...prev, user])]
          : prev.filter(u => u !== user)
      );
    }
    socket.on('user_typing', onTyping);
    return () => socket.off('user_typing', onTyping);
  }, []);

  const setTyping = (isTyping) => {
    socket.emit('typing', { isTyping });
  };

  return { typingUsers, setTyping };
}

التعامل مع إعادة الاتصال

useEffect(() => {
  function onReconnect() {
    console.log('Reconnected - re-syncing state');
    // Re-fetch missed data or re-join rooms after reconnection
    socket.emit('rejoin_room', { roomId });
  }

  socket.io.on('reconnect', onReconnect);
  return () => socket.io.off('reconnect', onReconnect);
}, [roomId]);
// Socket.io auto-reconnects; use this hook to re-sync after connection drops

القاعدة الحاسمة: قم دائمًا بتنظيف المستمعين

الخطأ الأكثر شيوعًا في Switch.io + React هو معالجات الأحداث المكررة. في كل مرة يتم فيها إعادة عرض أحد المكونات أو إعادة تحميله، إذا قمت بإضافة مستمع دون إزالة المستمع القديم، فإنك تتراكم التكرارات – تقوم رسالة واحدة بتشغيل المعالج الخاص بك عدة مرات. قم دائمًا بإرجاع وظيفة التنظيف من useEffect التي تزيل المستمع باستخدامsocket.off(). هذا غير قابل للتفاوض من أجل السلوك الصحيح.

المصادقة

// Pass auth token when connecting
export const socket = io('http://localhost:3001', {
  auth: {
    token: localStorage.getItem('accessToken'),
  },
  autoConnect: false,
});

// Server verifies the token in a middleware before allowing the connection
// Update the token if it changes:
socket.auth.token = newToken;
socket.disconnect().connect();   // reconnect with new auth

الأسئلة المتداولة

س: لماذا أتلقى رسائل مكررة؟
ج: أنت تقوم بإضافة مستمعي الأحداث دون تنظيفهم. تضيف كل عملية إعادة عرض مستمعًا آخر. قم دائمًا بإرجاع وظيفة التنظيف من useEffect التي تستدعيsocket.off() لإزالة المستمع. هذا هو الخطأ الأكثر شيوعًا لـSocket.io + React.

س: هل يجب أن أقوم بإنشاء المقبس داخل المكون أو خارجه؟
ج: في الخارج – قم بإنشاء نسخة مأخذ توصيل مشتركة واحدة في وحدة منفصلة (socket.js) وقم باستيرادها. يؤدي إنشائه داخل أحد المكونات إلى إنشاء اتصال جديد في كل عرض. أحد المثيلات المشتركة هو النمط الصحيح.

س: كيف يمكنني التعامل مع المقبس في مكونات متعددة؟
ج: قم باستيراد مثيل مأخذ التوصيل المشترك في كل مكون يحتاج إليه، أو استخدم موفر السياق لمشاركة حالة الاتصال. يشترك كل مكون في الأحداث التي يحتاجها (مع التنظيف) عبر useEffect الخاص به. المقبس الواحد يتعامل مع كل منهم.

س: Switch.io أو WebSocket الأصلي؟
ج: المقبس.io لتطبيقات React للإنتاج — فهو يضيف إعادة الاتصال التلقائي، والرجوع إلى الاستقصاء الطويل، والغرف، وواجهة برمجة التطبيقات المستندة إلى الأحداث التي توفر العمل الكبير. يعد Native WebSocket ذو مستوى أدنى ويتطلب منك إنشاء عملية إعادة الاتصال والتعامل مع الأحداث بنفسك.

س: كيف يمكنني اختبار الميزات في الوقت الفعلي؟
ج: افتح التطبيق في علامات تبويب أو نوافذ متعددة بالمتصفح لمحاكاة عدة مستخدمين والتحقق من نشر الرسائل/الأحداث. للاختبار الآلي، قم بمحاكاة المقبس أو استخدم خادم اختبار Switch.io. يعد الاختبار اليدوي لعلامات التبويب المتعددة أسرع طريقة للتحقق من عمل السلوك في الوقت الفعلي.

الخلاصة

تعد إضافة ميزات الوقت الفعلي إلى React with Jack.io أمرًا مباشرًا باستخدام الأنماط الصحيحة:إنشاء مثيل مقبس مشترك واحد خارج المكونات، ولف الاتصال ومعالجة الأحداث في خطافات مخصصة، وتنظيف المستمعين دائمًا في وظيفة الإرجاع الخاصة بـ useEffect. يحافظ نمط الربط المخصص (useSocket، وuseMessages، وuseTyping) على تنظيم منطق الوقت الفعلي وقابل لإعادة الاستخدام. تعامل مع إعادة الاتصال عن طريق إعادة مزامنة الحالة بعد استعادة الاتصال، وتمرير رموز المصادقة على الاتصال للمآخذ الآمنة. القاعدة الأكثر أهمية هي تنظيف المستمعين باستخدامsocket.off() — يؤدي نسيان ذلك إلى تكرار المعالجات وهو أعلى خطأ في تطبيق Switch.io + React. باستخدام هذه الأنماط، يمكنك إنشاء الدردشة والإشعارات ولوحات المعلومات المباشرة والميزات التعاونية بشكل واضح في React.