Socket.IOIntermediate

Socket.IO with TypeScript

typed event maps, Server/Socket generics, typed data — Socket.IO TypeScript-এ বাংলায়।

23টি অংশবাংলা ভাষায়

Socket.IO TypeScript-এর সাথে দারুণ কাজ করে — event নাম, payload ও socket.data সব type-safe করা যায়। ফলে ভুল event বা ভুল payload compile-time-এ ধরা পড়ে।

শেখার লক্ষ্য

event map interface বানানো
Server ও Socket generic ব্যবহার
socket.data typed করা
client-side type safety

Event Map Interfaces

৪টি generic type সংজ্ঞায়িত করা হয়:

src/types.tstypescript

typescript

// types.ts
export interface ServerToClientEvents {
  "chat:message": (msg: Message) => void;
  "user:joined": (name: string) => void;
  "ack:noop": () => void;
}

export interface ClientToServerEvents {
  "chat:message": (text: string) => void;
  "room:join": (room: string) => void;
}

export interface InterServerEvents {
  ping: () => void;
}

export interface SocketData {
  user: { id: string; name: string };
}

export interface Message {
  id: string;
  name: string;
  text: string;
  at: number;
}

Typed Server

server.tstypescript

typescript

import { Server } from "socket.io";
import type {
  ClientToServerEvents,
  InterServerEvents,
  ServerToClientEvents,
  SocketData,
} from "./types";

const io = new Server<
  ClientToServerEvents,
  ServerToClientEvents,
  InterServerEvents,
  SocketData
>(httpServer, {
  cors: { origin: "*" },
});

io.on("connection", (socket) => {
  // socket.data typed
  socket.data.user = { id: "1", name: "রহিম" };

  // ✅ সঠিক event + সঠিক type
  socket.on("chat:message", (text) => {
    io.emit("chat:message", {
      id: Date.now().toString(),
      name: socket.data.user.name,
      text,
      at: Date.now(),
    });
  });

  // ❌ ভুল event বা ভুল payload — compile error
  // socket.on("chat:massage", (x) => {});
  // io.emit("chat:message", "plain string");
});

Generic order

Server<ClientToServerEvents, ServerToClientEvents, InterServerEvents, SocketData> — ক্রমটি মনে রাখা জরুরি: প্রথমটি client থেকে server-এ আসা event, দ্বিতীয়টি server থেকে client-এ যাওয়া event।

Typed Socket (server-side)

typed sockettypescript

typescript

import type { Socket } from "socket.io";
import type {
  ClientToServerEvents,
  ServerToClientEvents,
  InterServerEvents,
  SocketData,
} from "./types";

type TypedSocket = Socket<
  ClientToServerEvents,
  ServerToClientEvents,
  InterServerEvents,
  SocketData
>;

function onJoin(socket: TypedSocket, room: string) {
  socket.data.lastRoom = room; // extended হলে typed
}

Typed Client

client.tstypescript

typescript

import { io, type Socket } from "socket.io-client";
import type {
  ClientToServerEvents,
  ServerToClientEvents,
} from "./types";

const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io();

// ✅
socket.emit("chat:message", "হ্যালো");
socket.on("chat:message", (msg) => {
  console.log(msg.name, ":", msg.text); // msg typed
});

// ❌ args type mismatch — compile error
// socket.emit("chat:message", { unknown: true });

Client generic order is reversed

client-এ Socket<ServerToClientEvents, ClientToServerEvents> — server-এর ক্রমের ঠিক উল্টো। এটা মিলিয়ে না রাখলেই type সঠিক থাকবে। আরও example: Events।

Typed Acknowledgements

typed acktypescript

typescript

interface ClientToServerEvents {
  "order:create": (
    payload: { item: string },
    ack: (res: { ok: boolean; id?: string }) => void,
  ) => void;
}

socket.on("order:create", (payload, ack) => {
  ack({ ok: true, id: "ORD-1" }); // এখন শুধু সঠিক আকারই accepted
});

socket.data বাড়ানো

extend datatypescript

typescript

interface SocketData {
  user: { id: string; name: string };
  lastRoom?: string;
}

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

client ও server-এ ভিন্ন types — shared types.ts file maintain করুন
generic ক্রম উল্টে যাওয়া — server: CSR → S2C; client: S2C → CSR
any দিয়ে shortcut — type safety হারায়; strict থাকুন
ack ও multiple arg-এ type ভুল — ack-কে শেষ param হিসেবেই type করুন

Practice Task

উপরের types.ts ব্যবহার করে server ও client দুটোই typed করুন
ইচ্ছাকৃত ভুল event নাম লিখে compile error দেখুন
socket.data.user typed করে handler-এ use করুন

সম্পর্কিত অধ্যায়: Events · Building a Real-Time Chat Application · Best Practices

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।

Socket.IOIntermediate

Socket.IO with TypeScript

typed event maps, Server/Socket generics, typed data — Socket.IO TypeScript-এ বাংলায়।

23টি অংশবাংলা ভাষায়

শেখার লক্ষ্য

event map interface বানানো
Server ও Socket generic ব্যবহার
socket.data typed করা
client-side type safety

Event Map Interfaces

৪টি generic type সংজ্ঞায়িত করা হয়:

src/types.tstypescript

typescript

// types.ts
export interface ServerToClientEvents {
  "chat:message": (msg: Message) => void;
  "user:joined": (name: string) => void;
  "ack:noop": () => void;
}

export interface ClientToServerEvents {
  "chat:message": (text: string) => void;
  "room:join": (room: string) => void;
}

export interface InterServerEvents {
  ping: () => void;
}

export interface SocketData {
  user: { id: string; name: string };
}

export interface Message {
  id: string;
  name: string;
  text: string;
  at: number;
}

Typed Server

server.tstypescript

typescript

import { Server } from "socket.io";
import type {
  ClientToServerEvents,
  InterServerEvents,
  ServerToClientEvents,
  SocketData,
} from "./types";

const io = new Server<
  ClientToServerEvents,
  ServerToClientEvents,
  InterServerEvents,
  SocketData
>(httpServer, {
  cors: { origin: "*" },
});

io.on("connection", (socket) => {
  // socket.data typed
  socket.data.user = { id: "1", name: "রহিম" };

  // ✅ সঠিক event + সঠিক type
  socket.on("chat:message", (text) => {
    io.emit("chat:message", {
      id: Date.now().toString(),
      name: socket.data.user.name,
      text,
      at: Date.now(),
    });
  });

  // ❌ ভুল event বা ভুল payload — compile error
  // socket.on("chat:massage", (x) => {});
  // io.emit("chat:message", "plain string");
});

Generic order

Typed Socket (server-side)

typed sockettypescript

typescript

import type { Socket } from "socket.io";
import type {
  ClientToServerEvents,
  ServerToClientEvents,
  InterServerEvents,
  SocketData,
} from "./types";

type TypedSocket = Socket<
  ClientToServerEvents,
  ServerToClientEvents,
  InterServerEvents,
  SocketData
>;

function onJoin(socket: TypedSocket, room: string) {
  socket.data.lastRoom = room; // extended হলে typed
}

Typed Client

client.tstypescript

typescript

import { io, type Socket } from "socket.io-client";
import type {
  ClientToServerEvents,
  ServerToClientEvents,
} from "./types";

const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io();

// ✅
socket.emit("chat:message", "হ্যালো");
socket.on("chat:message", (msg) => {
  console.log(msg.name, ":", msg.text); // msg typed
});

// ❌ args type mismatch — compile error
// socket.emit("chat:message", { unknown: true });

Client generic order is reversed

Typed Acknowledgements

typed acktypescript

typescript

interface ClientToServerEvents {
  "order:create": (
    payload: { item: string },
    ack: (res: { ok: boolean; id?: string }) => void,
  ) => void;
}

socket.on("order:create", (payload, ack) => {
  ack({ ok: true, id: "ORD-1" }); // এখন শুধু সঠিক আকারই accepted
});

socket.data বাড়ানো

extend datatypescript

typescript

interface SocketData {
  user: { id: string; name: string };
  lastRoom?: string;
}

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

client ও server-এ ভিন্ন types — shared types.ts file maintain করুন
generic ক্রম উল্টে যাওয়া — server: CSR → S2C; client: S2C → CSR
any দিয়ে shortcut — type safety হারায়; strict থাকুন
ack ও multiple arg-এ type ভুল — ack-কে শেষ param হিসেবেই type করুন

Practice Task

উপরের types.ts ব্যবহার করে server ও client দুটোই typed করুন
ইচ্ছাকৃত ভুল event নাম লিখে compile error দেখুন
socket.data.user typed করে handler-এ use করুন

সম্পর্কিত অধ্যায়: Events · Building a Real-Time Chat Application · Best Practices

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।