टाइपस्क्रिप्ट वेबसॉकेट: टाइप सुरक्षा के साथ रीयल-टाइम संचार को बेहतर बनाना

            \n// types.ts\n\n// Interface for sending a text message\nexport interface SendMessagePayload {\n  roomId: string;\n  message: string;\n}\n\n// Interface for joining a room\nexport interface JoinRoomPayload {\n  roomId: string;\n  userId: string;\n}\n\n// Union type for all possible client-to-server messages\nexport type ClientToServerEvent = \n  | { type: 'SEND_MESSAGE', payload: SendMessagePayload }\n  | { type: 'JOIN_ROOM', payload: JoinRoomPayload };\n
            

              
                Copy
              
            
          

            \n// types.ts (continued)\n\n// Interface for a received message in a chat room\nexport interface ChatMessage {\n  id: string;\n  roomId: string;\n  senderId: string;\n  content: string;\n  timestamp: number;\n}\n\n// Interface for a user joining a room notification\nexport interface UserJoinedRoomPayload {\n  userId: string;\n  roomId: string;\n  timestamp: number;\n}\n\n// Union type for all possible server-to-client messages\nexport type ServerToClientEvent = \n  | { type: 'NEW_MESSAGE', payload: ChatMessage }\n  | { type: 'USER_JOINED', payload: UserJoinedRoomPayload }\n  | { type: 'ERROR', payload: { message: string } };\n
            

              
                Copy
              
            
          

            \n// server.ts\n\nimport WebSocket, { WebSocketServer } from 'ws';\nimport { ClientToServerEvent, ServerToClientEvent, ChatMessage, JoinRoomPayload, SendMessagePayload } from './types'; // Assuming types.ts is in the same directory\n\nconst wss = new WebSocketServer({ port: 8080 });\n\nconsole.log('WebSocket server started on port 8080');\n\nwss.on('connection', (ws: WebSocket) => {\n  console.log('Client connected');\n\n  ws.on('message', (message: string) => {\n    try {\n      const parsedMessage: ClientToServerEvent = JSON.parse(message);\n\n      switch (parsedMessage.type) {\n        case 'SEND_MESSAGE':\n          handleSendMessage(ws, parsedMessage.payload);\n          break;\n        case 'JOIN_ROOM':\n          handleJoinRoom(ws, parsedMessage.payload);\n          break;\n        default:\n          console.warn('Received unknown message type:', parsedMessage);\n          sendError(ws, 'Unknown message type');\n      }\n    } catch (error) {\n      console.error('Failed to parse message:', error);\n      sendError(ws, 'Invalid JSON received');\n    }\n  });\n\n  ws.on('close', () => {\n    console.log('Client disconnected');\n  });\n\n  ws.on('error', (error) => {\n    console.error('WebSocket error:', error);\n  });\n\n  // Send a welcome message to the client\n  sendServerMessage(ws, { type: 'SYSTEM_INFO', payload: { message: 'Welcome to the real-time server!' } });\n});\n\n// Helper function to send messages from server to client\nfunction sendServerMessage(ws: WebSocket, message: ServerToClientEvent): void {\n  ws.send(JSON.stringify(message));\n}\n\n// Helper function to send errors to client\nfunction sendError(ws: WebSocket, errorMessage: string): void {\n  sendServerMessage(ws, { type: 'ERROR', payload: { message: errorMessage } });\n}\n\n// Specific message handlers\nfunction handleSendMessage(ws: WebSocket, payload: SendMessagePayload): void {\n  console.log(`Received message in room ${payload.roomId}: ${payload.message}`);\n  // In a real app, you'd broadcast this to other users in the room\n  const newMessage: ChatMessage = {\n    id: Date.now().toString(), // Simple ID generation\n    roomId: payload.roomId,\n    senderId: 'anonymous', // In a real app, this would come from authentication\n    content: payload.message,\n    timestamp: Date.now()\n  };\n  // Example: Broadcast to all clients (replace with room-specific broadcast)\n  wss.clients.forEach(client => {\n    if (client !== ws && client.readyState === WebSocket.OPEN) {\n      sendServerMessage(client, { type: 'NEW_MESSAGE', payload: newMessage });\n    }\n  });\n  // Optionally send a confirmation back to the sender\n  sendServerMessage(ws, { type: 'MESSAGE_SENT', payload: { messageId: newMessage.id } });\n}\n\nfunction handleJoinRoom(ws: WebSocket, payload: JoinRoomPayload): void {\n  console.log(`User ${payload.userId} joining room ${payload.roomId}`);\n  // In a real app, you'd manage room subscriptions and potentially broadcast to others\n  const userJoinedNotification: UserJoinedRoomPayload = {\n    userId: payload.userId,\n    roomId: payload.roomId,\n    timestamp: Date.now()\n  };\n  // Broadcast to others in the room (example)\n  wss.clients.forEach(client => {\n    // This requires logic to know which client is in which room\n    // For simplicity, we'll just send to everyone here as an example\n    if (client.readyState === WebSocket.OPEN) {\n      sendServerMessage(client, { type: 'USER_JOINED', payload: userJoinedNotification });\n    }\n  });\n}\n\n// Add a handler for a hypothetical SYSTEM_INFO message type for completeness\n// This is an example of how the server might send structured info\n// Note: In the above \`sendServerMessage\` call, we already added a type 'SYSTEM_INFO'\n// We'll define it here for clarity, although it's not part of the initial \`ServerToClientEvent\` union\n// In a real app, you'd ensure all defined types are part of the union\ninterface SystemInfoPayload {\n  message: string;\n}\n\n// To make the above code compile, we need to add SYSTEM_INFO to ServerToClientEvent\n// For this example, let's assume it was added:\n// export type ServerToClientEvent = ... | { type: 'SYSTEM_INFO', payload: SystemInfoPayload };\n\n// This demonstrates the need for consistent type definitions.\n
            

              
                Copy
              
            
          

            \n// client.ts\n\nimport { ClientToServerEvent, ServerToClientEvent, ChatMessage, UserJoinedRoomPayload } from './types'; // Assuming types.ts is in the same directory\n\nconst socket = new WebSocket('ws://localhost:8080');\n\n// Event handlers for the WebSocket connection\n\nsocket.onopen = () => {\n  console.log('WebSocket connection established');\n  // Example: Join a room after connecting\n  const joinRoomMessage: ClientToServerEvent = {\n    type: 'JOIN_ROOM',\n    payload: { roomId: 'general', userId: 'user123' }\n  };\n  sendMessage(joinRoomMessage);\n};\n\nsocket.onmessage = (event) => {\n  try {\n    const message: ServerToClientEvent = JSON.parse(event.data as string);\n\n    switch (message.type) {\n      case 'NEW_MESSAGE':\n        handleNewMessage(message.payload);\n        break;\n      case 'USER_JOINED':\n        handleUserJoined(message.payload);\n        break;\n      case 'ERROR':\n        console.error('Server error:', message.payload.message);\n        break;\n      case 'SYSTEM_INFO':\n        console.log('System:', message.payload.message);\n        break;\n      case 'MESSAGE_SENT':\n        console.log('Message sent successfully, ID:', message.payload.messageId);\n        break;\n      default:\n        console.warn('Received unknown server message type:', message);\n    }\n  } catch (error) {\n    console.error('Failed to parse server message:', error);\n  }\n};\n\nsocket.onclose = (event) => {\n  if (event.wasClean) {\n    console.log(`Connection closed cleanly, code=${event.code} reason=${event.reason}`);\n  } else {\n    console.error('Connection died');\n  }\n};\n\nsocket.onerror = (error) => {\n  console.error('WebSocket error:', error);\n};\n\n// Function to send messages from client to server\nfunction sendMessage(message: ClientToServerEvent): void {\n  if (socket.readyState === WebSocket.OPEN) {\n    socket.send(JSON.stringify(message));\n  } else {\n    console.warn('WebSocket is not open. Cannot send message.');\n  }\n}\n\n// Example of sending a chat message after connection\nfunction sendChatMessage(room: string, text: string) {\n  const message: ClientToServerEvent = {\n    type: 'SEND_MESSAGE',\n    payload: { roomId: room, message: text }\n  };\n  sendMessage(message);\n}\n\n// Message handlers on the client\nfunction handleNewMessage(message: ChatMessage): void {\n  console.log(`\n--- New Message in Room ${message.roomId} ---\nFrom: ${message.senderId}\nTime: ${new Date(message.timestamp).toLocaleTimeString()}\nContent: ${message.content}\n---------------------------\n`);\n  // Update UI with the new message\n}\n\nfunction handleUserJoined(payload: UserJoinedRoomPayload): void {\n  console.log(`User ${payload.userId} joined room ${payload.roomId} at ${new Date(payload.timestamp).toLocaleTimeString()}`);\n  // Update UI to show new user in room\n}\n\n// Example usage:\n// setTimeout(() => {\n//   sendChatMessage('general', 'Hello, world!');\n// }, 3000);\n
            

              
                Copy
              
            
          

            \n// types.ts (extended)\n\n// Generic interface for any server-to-client event\nexport interface ServerEvent<T = any> {\n  type: string;\n  payload: T;\n}\n\n// Updated ServerToClientEvent using generics implicitly\nexport type ServerToClientEvent = \n  | ServerEvent<ChatMessage> & { type: 'NEW_MESSAGE' }\n  | ServerEvent<UserJoinedRoomPayload> & { type: 'USER_JOINED' }\n  | ServerEvent<{ message: string }> & { type: 'ERROR' }\n  | ServerEvent<{ message: string }> & { type: 'SYSTEM_INFO' }\n  | ServerEvent<{ messageId: string }> & { type: 'MESSAGE_SENT' };\n\n// Example client-side receiver function using generics\nfunction handleServerMessage<T>(event: MessageEvent, expectedType: string, handler: (payload: T) => void): void {\n  try {\n    const rawMessage = JSON.parse(event.data as string) as ServerEvent;\n    if (rawMessage.type === expectedType) {\n      handler(rawMessage.payload as T);\n    }\n  } catch (error) {\n    console.error(`Error handling message of type ${expectedType}:`, error);\n  }\n}\n\n// Usage in client.ts:\n// socket.onmessage = (event) => {\n//   handleServerMessage<ChatMessage>(event, 'NEW_MESSAGE', handleNewMessage);\n//   handleServerMessage<UserJoinedRoomPayload>(event, 'USER_JOINED', handleUserJoined);\n//   handleServerMessage<{ message: string }>(event, 'ERROR', (payload) => {\n//     console.error('Server error:', payload.message);\n//   });\n//   // ... and so on\n// };\n
            

              
                Copy
              
            
          

            \n// WebSocketService.ts\n\nimport { EventEmitter } from 'events';\nimport { ClientToServerEvent, ServerToClientEvent } from './types';\n\ninterface WebSocketServiceOptions {\n  url: string;\n  reconnectInterval?: number;\n  maxReconnectAttempts?: number;\n}\n\nexport class WebSocketService extends EventEmitter {\n  private socket: WebSocket | null = null;\n  private url: string;\n  private reconnectInterval: number;\n  private maxReconnectAttempts: number;\n  private reconnectAttempts: number = 0;\n  private isConnecting: boolean = false;\n\n  constructor(options: WebSocketServiceOptions) {\n    super();\n    this.url = options.url;\n    this.reconnectInterval = options.reconnectInterval || 5000;\n    this.maxReconnectAttempts = options.maxReconnectAttempts || 10;\n  }\n\n  connect(): void {\n    if (this.socket && this.socket.readyState === WebSocket.OPEN) {\n      console.log('Already connected.');\n      return;\n    }\n    if (this.isConnecting) {\n        console.log('Connection in progress...');\n        return;\n    }\n\n    this.isConnecting = true;\n    console.log(`Attempting to connect to ${this.url}...`);\n    this.socket = new WebSocket(this.url);\n\n    this.socket.onopen = this.onOpen;\n    this.socket.onmessage = this.onMessage;\n    this.socket.onclose = this.onClose;\n    this.socket.onerror = this.onError;\n  }\n\n  private onOpen = (): void => {\n    console.log('WebSocket connection established.');\n    this.reconnectAttempts = 0; // Reset reconnect attempts on successful connection\n    this.isConnecting = false;\n    this.emit('open');\n  };\n\n  private onMessage = (event: MessageEvent): void => {\n    try {\n      const message = JSON.parse(event.data as string) as ServerToClientEvent;\n      this.emit('message', message);\n    } catch (error) {\n      console.error('Failed to parse message:', error);\n      this.emit('error', new Error('Invalid JSON received'));\n    }\n  };
\n  private onClose = (event: CloseEvent): void => {\n    console.log(`WebSocket connection closed. Code: ${event.code}, Reason: ${event.reason}`);\n    this.isConnecting = false;\n    this.emit('close', event);\n    if (event.code !== 1000) { // 1000 is normal closure\n      this.reconnect();\n    }\n  };\n\n  private onError = (error: Event): void => {\n    console.error('WebSocket error:', error);\n    this.isConnecting = false;\n    this.emit('error', error);\n    // Do not auto-reconnect on all errors, depends on the error type if possible\n  };
\n  private reconnect(): void {\n    if (this.reconnectAttempts >= this.maxReconnectAttempts) {\n      console.error('Max reconnect attempts reached. Giving up.');\n      this.emit('maxReconnects');\n      return;\n    }\n\n    this.reconnectAttempts++;\n    console.log(`Attempting to reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts}) in ${this.reconnectInterval}ms...`);\n    setTimeout(() => {\n      this.connect();\n    }, this.reconnectInterval);\n  }\n\n  send(message: ClientToServerEvent): void {\n    if (this.socket && this.socket.readyState === WebSocket.OPEN) {\n      this.socket.send(JSON.stringify(message));\n    } else {\n      console.warn('WebSocket is not open. Message not sent.');\n      // Optionally queue messages or emit an error\n    }\n  }\n\n  close(): void {\n    if (this.socket) {\n      this.socket.close();\n    }\n  }\n}\n\n// Example Usage in your application component/module:\n// import { WebSocketService } from './WebSocketService';\n// \n// const wsService = new WebSocketService({ url: 'ws://localhost:8080', reconnectInterval: 3000 });\n// \n// wsService.on('open', () => {\n//   console.log('Connected!');\n//   wsService.send({ type: 'SEND_MESSAGE', payload: { roomId: 'general', message: 'Hello from service!' } });\n// });\n// \n// wsService.on('message', (message: ServerToClientEvent) => {\n//   console.log('Received via service:', message);\n//   if (message.type === 'NEW_MESSAGE') {\n//     // handleNewMessage(message.payload);\n//   }\n// });\n// \n// wsService.on('error', (error) => {\n//   console.error('Service encountered an error:', error);\n// });\n// \n// wsService.on('close', () => {\n//   console.log('Service disconnected.');\n// });\n// \n// wsService.connect();\n
            

              
                Copy
              
            
          

            \n// types.ts (extended)\n\n// Interface for a generic message\ninterface GenericMessage {\n  type: string;\n  payload: any;\n}\n\n// Type guard to check if a message is of a specific type\nfunction isSendMessagePayload(payload: any): payload is SendMessagePayload {\n  return (\n    payload &&\n    typeof payload.roomId === 'string' &&\n    typeof payload.message === 'string'\n  );\n}\n\n// Using the type guard in server logic\n// ... inside wss.on('message') handler ...\n\n// const parsedMessage: any = JSON.parse(message);\n// \n// if (parsedMessage && typeof parsedMessage.type === 'string') {\n//   switch (parsedMessage.type) {\n//     case 'SEND_MESSAGE':\n//       if (isSendMessagePayload(parsedMessage.payload)) {\n//         handleSendMessage(ws, parsedMessage.payload);\n//       } else {\n//         sendError(ws, 'Invalid payload for SEND_MESSAGE');\n//       }\n//       break;\n//     // ... other cases\n//   }\n// } else {\n//   sendError(ws, 'Invalid message format');\n// }\n
            

              
                Copy