2026 সালে Socket.io এর সাথে প্রতিক্রিয়াতে ওয়েবসকেটগুলি কীভাবে ব্যবহার করবেন: সম্পূর্ণ নির্দেশিকা

রিয়েল-টাইম বৈশিষ্ট্য — লাইভ চ্যাট, বিজ্ঞপ্তি, সহযোগী সম্পাদনা, লাইভ ড্যাশবোর্ড — একটি অবিরাম সংযোগ প্রয়োজন৷ প্রতিক্রিয়ায়,Socket.io WebSocket-ভিত্তিক রিয়েল-টাইম কার্যকারিতা যোগ করার সবচেয়ে ব্যবহারিক উপায়। এই নির্দেশিকাটি দেখায় যে কীভাবে এটিকে প্রতিক্রিয়া হুকগুলির সাথে পরিষ্কারভাবে সংহত করতে হয়।

সেটআপ

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,
});

একটি পুনঃব্যবহারযোগ্য সকেট হুক

// 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

সমালোচনামূলক নিয়ম: সর্বদা শ্রোতাদের পরিষ্কার করুন

সবচেয়ে সাধারণ Socket.io + প্রতিক্রিয়া বাগ হল ডুপ্লিকেট ইভেন্ট হ্যান্ডলার। প্রতিবার কোনো কম্পোনেন্ট রি-রেন্ডার বা রিমাউন্ট করে, যদি আপনি পুরানোটিকে না সরিয়ে একজন শ্রোতা যোগ করেন, আপনি সদৃশ জমা করেন — একটি একক বার্তা আপনার হ্যান্ডলারকে একাধিকবার ট্রিগার করে। সর্বদা 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 + প্রতিক্রিয়া ভুল।

প্রশ্ন: আমি কি উপাদানের ভিতরে বা বাইরে সকেট তৈরি করব?
উত্তর: বাইরে — একটি পৃথক মডিউলে (socket.js) একটি একক ভাগ করা সকেট উদাহরণ তৈরি করুন এবং এটি আমদানি করুন। একটি উপাদানের ভিতরে এটি তৈরি করা প্রতিটি রেন্ডারে একটি নতুন সংযোগ ঘটায়। একটি ভাগ করা উদাহরণ হল সঠিক প্যাটার্ন।

প্রশ্ন: আমি কিভাবে একাধিক উপাদানে সকেট পরিচালনা করব?
উত্তর: প্রতিটি কম্পোনেন্টে শেয়ার্ড সকেট ইন্সট্যান্স ইমপোর্ট করুন যার জন্য প্রয়োজন, অথবা সংযোগের অবস্থা শেয়ার করতে একটি প্রসঙ্গ প্রদানকারী ব্যবহার করুন। প্রতিটি উপাদান তার নিজস্ব useEffect এর মাধ্যমে (পরিষ্কার সহ) প্রয়োজনীয় ইভেন্টগুলিতে সদস্যতা নেয়। একক সকেট তাদের সব পরিচালনা করে।

প্রশ্ন: Socket.io বা নেটিভ ওয়েবসকেট?
A: Socket.io প্রোডাকশন রিঅ্যাক্ট অ্যাপের জন্য — এটি স্বয়ংক্রিয় পুনঃসংযোগ, লং-পোলিং-এ ফলব্যাক, রুম এবং একটি ইভেন্ট-ভিত্তিক API যোগ করে যা উল্লেখযোগ্য কাজ সংরক্ষণ করে। নেটিভ ওয়েবসকেট নিম্ন-স্তরের এবং এর জন্য আপনাকে পুনরায় সংযোগ তৈরি করতে হবে এবং নিজেকে ইভেন্ট পরিচালনা করতে হবে।

প্রশ্ন: আমি কীভাবে রিয়েল-টাইম বৈশিষ্ট্যগুলি পরীক্ষা করব?
উত্তর: একাধিক ব্যবহারকারীকে অনুকরণ করতে এবং বার্তা/ইভেন্ট প্রচার যাচাই করতে একাধিক ব্রাউজার ট্যাব বা উইন্ডোতে অ্যাপটি খুলুন। স্বয়ংক্রিয় পরীক্ষার জন্য, সকেটটিকে উপহাস করুন বা একটি পরীক্ষা Socket.io সার্ভার ব্যবহার করুন। ম্যানুয়াল মাল্টি-ট্যাব টেস্টিং হল রিয়েল-টাইম আচরণ কাজ যাচাই করার দ্রুততম উপায়।

উপসংহার

React with Socket.io-তে রিয়েল-টাইম ফিচার যোগ করা সঠিক প্যাটার্নের সাথে সোজা:উপাদানগুলির বাইরে একটি একক শেয়ার্ড সকেট ইন্সট্যান্স তৈরি করুন, কাস্টম হুকগুলিতে সংযোগ এবং ইভেন্ট হ্যান্ডলিং মোড়ানো, এবং সর্বদা useEffect এর রিটার্ন ফাংশনে শ্রোতাদের পরিষ্কার করুন. কাস্টম হুক প্যাটার্ন (useSocket, useMessages, useTyping) আপনার রিয়েল-টাইম যুক্তি সংগঠিত এবং পুনঃব্যবহারযোগ্য রাখে। সংযোগ পুনরুদ্ধার করার পরে পুনঃ-সিঙ্ক করার স্থিতি দ্বারা পুনঃসংযোগ পরিচালনা করুন, এবং সুরক্ষিত সকেটের জন্য সংযোগে প্রমাণীকরণ টোকেনগুলি পাস করুন৷ একক সবচেয়ে গুরুত্বপূর্ণ নিয়ম হলsocket.off()দিয়ে শ্রোতাদের পরিষ্কার করা — ভুলে গেলে এটি ডুপ্লিকেট হ্যান্ডলার সৃষ্টি করে এবং এটি শীর্ষ Socket.io + প্রতিক্রিয়া বাগ। এই প্যাটার্নগুলির সাহায্যে, আপনি প্রতিক্রিয়াতে পরিষ্কারভাবে চ্যাট, বিজ্ঞপ্তি, লাইভ ড্যাশবোর্ড এবং সহযোগী বৈশিষ্ট্যগুলি তৈরি করতে পারেন।