Socket.IO Sending and Receiving Data

Socket.IO-তে event-এর সাথে যেকোনো JSON-serializable ডেটা অথবা binary পাঠানো যায়। কয়েকটা topic-এ একসাথে ডেটা পাঠানোর সুবিধাটা বুঝে নেওয়া যাক।

শেখার লক্ষ্য

• কোন কোন type-এর ডেটা পাঠানো যায় তা জানা
• একাধিক argument দেওয়া
• Binary (files, audio, image) পাঠানো
• বড় payload-এর সীমা নিয়ন্ত্রণ করা

কী কী পাঠানো যায়?

একাধিক Argument

// server
socket.on("giveMeData", (name, age, active) => {
  console.log(name, age, active); // রহিম 25 true
});

// client
socket.emit("giveMeData", "রহিম", 25, true);

একটার মধ্যে সব রেখে object পাঠানোও সমান ভালো। ৩-এর বেশি argument হলে object ব্যবহার করা cleaner — ভবিষ্যতে field যোগ/বাদ পড়লে client-server contract এত fragile থাকে না।

Line-by-line: data validation

socket.on("newMessage", (data) => {
  // 1. check: data object কি না
  if (!data || typeof data !== "object") return;

  // 2. field sanitize
  const text = String(data.text || "").slice(0, 500);
  const user = String(data.user || "anonymous").slice(0, 50);

  if (!text.trim()) return; // খালি message ignore

  io.emit("newMessage", { user, text });
});

• আগে validate — client-এর থেকে যা-ই আসে তা বিশ্বাস-যোগ্য না; type-check অপরিহার্য
• Length limit — text.slice(0, 500) বড়/ফেক payload ঠেকায়
• trim — খালি বার্তা broadcast-এ আটকায়

Binary Data পাঠানো

Socket.IO binary payload support করে — Buffer (Node) / ArrayBuffer, Blob (browser):

// client — file পাঠানো
const fileInput = document.querySelector("input[type=file]");

fileInput.addEventListener("change", (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = () => {
    // মেটাডেটা + bytes arrayBuffer
    socket.emit("upload", {
      name: file.name,
      size: file.size,
      data: reader.result,
    });
  };

  reader.readAsArrayBuffer(file);
});

socket.on("upload", ({ name, size, data }) => {
  console.log("File:", name, "| size:", size);
  // অন্য sockets-এ forward
  socket.broadcast.emit("upload", {
    name,
    size,
    data, // Buffer object
  });
});

বড় Payload নিয়ন্ত্রণ

const io = new Server(3000, {
  cors: { origin: "*" },
  // ডিফল্ট 1 MB (10^6) — প্রয়োজনে বাড়ান
  maxHttpBufferSize: 5 * 1024 * 1024, // 5 MB
});

• এই সীমার উপরে গেলে connection error নিয়ে event fail হয়
• খুব ছোট সীমা রাখলে legit data-ও কাটা পড়তে পারে — use case অনুযায়ী সমন্বয়

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

• Function / circular object পাঠানো — serialization fail; plain data-ই রাখুন
• undefined item-এ access — server-এ type guard না দিলে crash
• Large binary default limit — maxHttpBufferSize না বাড়ালে silently drop

Practice Task

• client থেকে { user, text }-এর object পাঠিয়ে server-এ validate-সহ echo করুন
• 2MB-এর একটি file upload করুন — প্রথমে default limit এ কী হয় দেখুন, তারপর 5MB limit দিয়ে
• multi-argument vs object — কোনটা code-এ বুঝতে সহজ, নিজেই লক্ষ্য করুন

সম্পর্কিত অধ্যায়: Events · Broadcasting Events · Acknowledgements