Socket.IO Connecting and Disconnecting

Socket.IO application-এর জীবনের সবচেয়ে গুরুত্বপূর্ণ মুহূর্ত হলো client-এর connect ও disconnect। এখানে জেনে নিন কীভাবে এই lifecycle handle করবেন।

শেখার লক্ষ্য

• Server-এ connection event-এর ব্যবহার
• Client ও server-এ connect/disconnect event চেনা
• socket.id ও handshake কীভাবে ব্যবহার হয় তা বোঝা
• Online presence-type feature create করা

Server-Side Events

প্রতিটি client-ের রাষ্ট্র Socket.IO track করে — server side-এ তিনটি main event:

io.on("connection", (socket) => {
  console.log("Client joined:", socket.id);

  socket.on("disconnect", (reason) => {
    console.log("Client left:", socket.id, "| reason:", reason);
  });

  socket.on("error", (err) => {
    console.error("Socket error:", err.message);
  });
});

disconnect-এর reason কী কী হতে পারে:

• io server disconnect — server নিজে socket disconnect করেছে
• transport close — network বা server connection বন্ধ
• client namespace disconnect — client নিজে disconnect করেছে
• ping timeout — heartbeat-এ সাড়া দেয়নি

Client-Side Events

const socket = io();

socket.on("connect", () => {
  console.log("আমি যোগ দিলাম:", socket.id);
});

socket.on("disconnect", (reason) => {
  console.log("সংযোগ ছুটল:", reason);
});

socket.on("connect_error", (err) => {
  console.error("Connect failed:", err.message);
});

• connect — connected state-এ এলে (বারবার reconnect হলেও প্রতি বার আবার চলে)
• disconnect — server বা network-এ সমস্যায়
• connect_error — handshake fail হলে (যেমন auth middleware reject করলে তার message এখানে আসে)

socket.id ও handshake

প্রতিটি সংযুক্ত socket-এর আলাদা socket.id আছে (একই tab-এ refresh করলেও নতুন id)। handshake object-এ সংযোগ-এর সময় client-এর পাঠানো auth, headers, query, address পাওয়া যায়:

io.on("connection", (socket) => {
  console.log("ID:", socket.id);
  console.log("Query:", socket.handshake.query);
  console.log("Auth:", socket.handshake.auth);
  console.log("From:", socket.handshake.address);
});

socket.handshake.auth — client io({ auth: { token } }) দিয়ে পাঠানো ডেটা; handshake.query — URL query থেকে (যেমন ?room=general); handshake.headers — HTTP headers। Authentication-এ এদের ব্যবহার দেখবেন।

Use Case: Online Presence

io.on("connection", (socket) => {
  io.emit("presence", {
    online: io.engine.clientsCount,
    id: socket.id,
  });

  socket.on("disconnect", () => {
    io.emit("presence", { online: io.engine.clientsCount });
  });
});

io.engine.clientsCount — বর্তমানে কত client connected। io.emit(...) — সবাইকে broadcast (বিস্তারিত Broadcasting Events ও Rooms-এ)।

সাধারণ ভুল ও সমাধান

• server-এ connection, client-এ connect — connection event server-side, client-এ connect (একই নয়)
• Refresh-এ পুরনো socket-কে মনে রাখা — state server-এ সংরক্ষণ করুন, socket.id-এর উপর নির্ভর নয় (id প্রতি connection-এ বদলায়)
• disconnect-এ bad data send — disconnect পরে socket আর নেই; socket.emit করলে silent fail হয়

Practice Task

• Server-এ handshake.query print করুন এবং client-এ io({ query: { room: \"lobby\" } }) দিয়ে দেখুন
• ২টি tab খুলে presence counter-এর পরিবর্তন দেখুন
• Tab refresh করলে count কমা-বাড়ার কারণ ব্যাখ্যা করুন

সম্পর্কিত অধ্যায়: Client and Server Setup · Reconnection and Error Handling