Socket.io

// Architecture Pattern
// ┌──────────────┐      WebSocket       ┌──────────────────┐
// │   Frontend   │ ◄──────────────────► │     Backend      │
// │              │                      │                  │
// │  useSocket() │  emit/on events      │  Gateway (thin)  │
// │  hook        │ ◄──────────────────► │    ↓             │
// │              │                      │  Service (logic) │
// └──────────────┘                      └──────────────────┘
//
// Frontend: useSocket hook → connect namespace → emit/listen events
// Backend:  Gateway (receive events) → Service (business logic) → emit back

import { useSocket } from '@/hooks/useSocket';
import { SOCKET_NAMESPACE } from '@/constants/socket.constant';

function MyComponent() {
  const { getSocket, isConnected } = useSocket(SOCKET_NAMESPACE.CHAT);

  useEffect(() => {
    const socket = getSocket();
    if (!socket) return;

    // Listen for events
    socket.on('chat:message', (data) => {
      console.log('New message:', data);
    });

    // Emit events
    socket.emit('chat:send_message', {
      roomId: 'test-room',
      content: 'Hello!',
    });

    return () => {
      socket.off('chat:message');
    };
  }, [getSocket, isConnected]);
}

// NestJS Gateway (thin layer — like Controller)
@WebSocketGateway({ namespace: '/chat' })
export class ChatGateway {
  @SubscribeMessage('chat:send_message')
  handleSendMessage(
    @MessageBody() payload: SendMessagePayload,
    @ConnectedSocket() client: Socket,
  ) {
    // Delegate to service
    const message = this.chatService.createMessage(...);
    // Broadcast to room
    this.server.to(roomId).emit('chat:message', message);
  }
}