Socket.io के साथ Real-time App
In this page:
interface ServerToClientEvents {
eventName: (payload: PayloadType) => void;
}
interface ClientToServerEvents {
eventName: (arg: ArgType) => void;
}Core Concept
एक Socket.IO app को type करने का मतलब है हर event name और payload का exact shape declare करना, ताकि गलत argument type के साथ एक event emit करना — client या server दोनों में से किसी पर — compile time पर पकड़ा जाए runtime पर silently fail होने के बजाय।
उदाहरण: Core Concept
interface ServerToClientEvents {
message: (payload: { user: string; text: string }) => void;
}
// socket.emit("message", { user: "Ravi", text: "hi" }) is now type-checked
console.log("Event names and payloads are typed, not stringly-typed");Basic Setup
एक basic setup Socket.IO के generic Server<ClientToServerEvents, ServerToClientEvents> और Socket types उपयोग करता है, हर event को एक shared events interface में एक method signature के रूप में define करते हुए।
उदाहरण: Basic Setup
interface ClientToServerEvents {
join: (room: string) => void;
}
interface ServerToClientEvents {
message: (payload: { user: string; text: string }) => void;
}
// const io: Server<ClientToServerEvents, ServerToClientEvents> = new Server();
console.log("Server<ClientToServerEvents, ServerToClientEvents> types every event");Typed Example
एक typed example: interface ServerToClientEvents { message: (payload: { user: string; text: string }) => void } का मतलब है कि socket.emit(message, { user, text }) call करना उस exact payload shape के against check होता है, और एक missing field एक compile error है।
उदाहरण: Typed Example
interface ServerToClientEvents {
message: (payload: { user: string; text: string }) => void;
}
function emitMessage(payload: { user: string; text: string }) {
console.log("emit('message', ", payload, ")");
}
emitMessage({ user: "Ravi", text: "Hello" });Project Usage
एक असली project में, Node server और browser client के बीच events interface share करना (एक shared-types package के through) दोनों sides को अपने आप sync में रखता है जब भी कोई नया real-time event जोड़ा या बदला जाए।
उदाहरण: Project Usage
// shared/events.ts
export interface ServerToClientEvents {
message: (payload: { user: string; text: string }) => void;
}
console.log("Shared events interface keeps server and client in sync");Best Practices
Event names को एक single shared union type के रूप में रखें जो emit और listen calls दोनों उपयोग करें, ताकि एक event rename करना हर जगह एक compile-time-checked change हो बजाय manually grep करने की ज़रूरत वाली एक string के।
उदाहरण: Best Practices
type EventName = "message" | "join" | "leave";
function emit(event: EventName, payload: unknown) {
console.log(event, payload);
}
emit("message", { text: "hi" });- एक event name emit करना जो events interface में नहीं है, जैसे
"mesage", जिसे generic types सिर्फ तभी पकड़ते हैं अगर आपने उन्हें add किया हो। - Events interface को server और client पर अलग-अलग define करना ताकि वे match न करें।
- यह भूल जाना कि event payload types runtime पर check नहीं होते, इसलिए एक client अब भी गलत data भेज सकता है।
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first:
- Todo App with TypeScript
- REST API with Express + TypeScript
- React Dashboard with TypeScript
- CLI Tool with TypeScript
- Library with TypeScript
- Full Stack TypeScript App
- TypeScript Design System
- TypeScript Monorepo Project
- Authentication System
- Real-time App with Socket.io
- GraphQL API with TypeScript
- Microservices with TypeScript
- TypeScript Best Practices Review
- What to Learn Next