Socket.IO Emitting and Listening to Events

Socket.IO-এর মূল শক্তি হলো event-based communication — আপনি কোনো বার্তাকে নাম দিয়ে পাঠান, আর অন্যপাশে সেই নামের listener সেটি ধরে। মনে করুন চিঠিতে খামের উপর নাম লেখা — কোন খামটা কে পাবে, কোথায় যাবে সব নাম দিয়ে ঠিক হয়।

শেখার লক্ষ্য

• emit (পাঠানো) ও on (শোনা)-এর কাজ বোঝা
• Custom event-নাম ও payload ব্যবহার করা
• Reserved events চেনা এবং দুর্ঘটনায় এড়ানো

Event Model

Event-এর নাম নিজের পছন্দের — তবে string হতে হবে এবং reserved নাম বাদ দিতে হবে।

মৌলিক উদাহরণ

index.html client থেকে server-এ message পাঠাই, server আবার সবার কাছে echo করে:

const socket = io();

// পাঠানো:
socket.emit("message", "Hello from browser!");

// শোনা:
socket.on("message", (text) => {
  console.log("Server থেকে:", text);
});

io.on("connection", (socket) => {
  // client থেকে 'message' আসলে
  socket.on("message", (text) => {
    console.log("Client বলল:", text);

    // সব client-কে ফিরিয়ে পাঠাই (যার থেকে এসেছে-ও সহ)
    io.emit("message", "Server: " + text);
  });
});

প্রবাহ:

1. Client socket.emit("message", "Hello...") — server-এর socket.on("message", ...)-এ যায়
2. Server io.emit("message", ...) — সব connected socket-এই echo হয়
3. নিজের client-র socket.on("message", ...) সেটি print করে

Payload-এ object পাঠানো

একটি event-এ যত খুশি argument (ডেটা) পাঠানো যায় — object, string, number, array, এমনকি binary:

// client
socket.emit("newMessage", {
  user: "রহিম",
  text: "আসসালামু আলাইকুম",
  time: Date.now(),
});

// server
socket.on("newMessage", (data) => {
  console.log(data.user, " says:", data.text);
  io.emit("newMessage", data);
});

Reserved Events (এড়িয়ে চলুন)

Socket.IO নিজে এই নামগুলো ব্যবহার করে, তাই custom event-এর নামে ব্যবহার করবেন না:

• connect, disconnect, connect_error, disconnecting
• ping, pong
• reconnect, reconnect_attempt, reconnect_error, reconnect_failed
• newListener, removeListener (Node EventEmitter থেকে)

socket.on("connect") বা socket.on("ping") দিলে অপ্রত্যাশিত আচরণ আসতে পারে — custom event-এর নাম যেমন user:joined, chat:message ব্যবহার করুন।

Use Case: Typing Indicator

// client typing event
inputEl.addEventListener("input", () => {
  socket.emit("typing", "রহিম typing...");
});

socket.on("typing", (text) => {
  statusEl.textContent = text;
});

// server pass-through
socket.on("typing", (text) => socket.broadcast.emit("typing", text));

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

• Event নামের typo — emit("messag") আর on("message") কখনো মিলবে না; নাম constant-এ রাখুন
• Listener register না করা — emit-এর আগেই on-কে receiver-এ setup করুন
• Reserved নাম ব্যবহার — উপরোক্ত list থেকে দূরে থাকুন

Practice Task

• একটি greeting event তৈরি করুন — client পাঠাবে "Hi server", server ফিরতি "Hi client" পাঠাবে
• Object payload সহ user:joined event-এ ২টি argument (name, room) পাঠিয়ে দেখুন

সম্পর্কিত অধ্যায়: Sending and Receiving Data · Broadcasting Events · Rooms