Socket.IO Client and Server Setup

আগের অধ্যায়ে সব install হয়েছে। এবার একটি পূর্ণ client-server setup তৈরি করি — যেখানে browser থেকে connect করে বার্তা আসা-যাওয়ার ভিত্তিটি বুঝবো।

শেখার লক্ষ্য

• Server ও browser client কীভাবে যুক্ত হয় তা বোঝা
• Static file serve করে client script-এর ব্যবহার বুঝা
• Connection-এর প্রথম ধাপ line-by-line analyze করা

Project Structure

socketio-app/
├── server.js          # Socket.IO server
├── public/
│   └── index.html     # browser client
└── package.json

Server (server.js)

Server-কে static file serve-ও করতে হবে, যাতে browser public/index.html খুলতে পারে। Express ছাড়া Node-এর built-in http দিয়ে:

const { createServer } = require("node:http");
const { Server } = require("socket.io");
const { readFileSync } = require("node:fs");

// static client serve (সহজ HTML response)
const httpServer = createServer((req, res) => {
  if (req.url === "/" || req.url === "/index.html") {
    res.writeHead(200, { "Content-Type": "text/html" });
    res.end(readFileSync("public/index.html"));
    return;
  }
  res.writeHead(404);
  res.end("Not found");
});

// http server-এর উপর Socket.IO attach
const io = new Server(httpServer, {
  cors: { origin: "*" },
});

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

httpServer.listen(3000, () => {
  console.log("Listening on http://localhost:3000");
});

Line-by-line:

• createServer(...) — handled HTTP requests; এখানে শুধু index.html দিচ্ছি
• new Server(httpServer, { cors }) — একই HTTP server-এর উপর Socket.IO চড়ানো হয়; আলাদা port লাগে না
• io.on("connection", cb) — প্রতিটি নতুন client-এর জন্য callback
• httpServer.listen(3000) — HTTP + Socket দুটোই port 3000-এ

Client (public/index.html)

<!doctype html>
<html lang="bn">
<body>
  <h1>Socket.IO Test</h1>
  <p id="status">Connecting...</p>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io(); // same origin → url লাগে না

    socket.on("connect", () => {
      document.getElementById("status").textContent =
        "Connected: " + socket.id;
    });

    socket.on("disconnect", (reason) => {
      document.getElementById("status").textContent = "Disconnected: " + reason;
    });
  </script>
</body>
</html>

কী হচ্ছে:

• <script src="/socket.io/socket.io.js"> — বাহক client script; এটি server-ই দেয়, তাই CDN লাগে না
• io() — server-এ connect; একই origin বলে url দিতে হয় না
• connect event — সফল হলে socket.id দেখাই
• disconnect event — সংযোগ ভেঙে গেলে reason সহ দেখাই

Expected Behavior

# terminal (server)
Listening on http://localhost:3000
Connected: A1b2C3d4...

# browser
Socket.IO Test
Connected: A1b2C3d4...

• Browser page reload করলে পুরনো connection disconnect হয়ে নতুন id আসবে
• Server বন্ধ করলে browser-এ Disconnected: transport close দেখবেন

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

• io is not defined — socket.io.js script-টি client render-এর আগে থাকুন; path /socket.io/socket.io.js ঠিক আছে কিনা check করুন
• 404 client script-এ — server-এ কোনো route বা static file handler না থাকলে এই problem হয়; উপরের createServer handler-এ client দেবার ব্যবস্থা রাখুন
• ২টি server instance — পরে Express ব্যবহার করলে httpServer দিয়ে reuse করুন, নতুন Server(3000) না বানিয়ে

Practice Task

• নিজের setup-এ browser থেকে connect/disconnect চেষ্টা করুন এবং id পরিবর্তন দেখুন
• io(\"http://localhost:3000\") explicitly দিয়ে ফারাক আছে কিনা দেখুন (না হওয়া উচিত, same origin-এ)

সম্পর্কিত অধ্যায়: Installation and Setup · Connecting and Disconnecting