Panduan Lengkap WebSocket - Komunikasi Real-Time untuk Aplikasi Modern

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Origin: http://example.com

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
|N|V|V|V|       |S|             |   (if payload len==126/127)   |
| |1|2|3|       |K|             |                               |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
|     Extended payload length continued, if payload len == 127  |
+ - - - - - - - - - - - - - - - +-------------------------------+
|                               |Masking-key, if MASK set to 1  |
+-------------------------------+-------------------------------+
| Masking-key (continued)       |          Payload Data         |
+-------------------------------- - - - - - - - - - - - - - - - +
:                     Payload Data continued ...                :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
|                     Payload Data continued ...                |
+---------------------------------------------------------------+

Sec-WebSocket-Protocol: chat, superchat

Sec-WebSocket-Protocol: chat

import {
  WebSocketGateway,
  WebSocketServer,
  SubscribeMessage,
  OnGatewayConnection,
  OnGatewayDisconnect,
  MessageBody,
  ConnectedSocket,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
import { Logger, UseGuards } from '@nestjs/common';
import { WsAuthGuard } from './guards/ws-auth.guard';
 
interface User {
  id: string;
  username: string;
  socketId: string;
}
 
interface Message {
  id: string;
  roomId: string;
  userId: string;
  username: string;
  content: string;
  timestamp: Date;
}
 
@WebSocketGateway({
  cors: {
    origin: '*', // Konfigurasi dengan benar di production
  },
  namespace: '/chat',
})
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer()
  server: Server;
 
  private readonly logger = new Logger(ChatGateway.name);
  private users: Map<string, User> = new Map();
  private rooms: Map<string, Set<string>> = new Map();
 
  async handleConnection(client: Socket) {
    this.logger.log(`Client connected: ${client.id}`);
 
    // Extract user info dari handshake (di production, verify JWT)
    const username = client.handshake.auth.username || `Guest${Math.floor(Math.random() * 1000)}`;
    const userId = client.handshake.auth.userId || client.id;
 
    const user: User = {
      id: userId,
      username,
      socketId: client.id,
    };
 
    this.users.set(client.id, user);
 
    // Notify semua client tentang user baru
    this.server.emit('user:connected', {
      userId: user.id,
      username: user.username,
    });
 
    // Kirim current online users ke client baru
    const onlineUsers = Array.from(this.users.values()).map(u => ({
      id: u.id,
      username: u.username,
    }));
 
    client.emit('users:list', onlineUsers);
 
    this.logger.log(`User ${username} connected with socket ${client.id}`);
  }
 
  async handleDisconnect(client: Socket) {
    const user = this.users.get(client.id);
 
    if (user) {
      // Hapus user dari semua room
      this.rooms.forEach((members, roomId) => {
        if (members.has(client.id)) {
          members.delete(client.id);
          this.server.to(roomId).emit('user:left', {
            roomId,
            userId: user.id,
            username: user.username,
          });
        }
      });
 
      this.users.delete(client.id);
 
      // Notify semua client tentang user disconnect
      this.server.emit('user:disconnected', {
        userId: user.id,
        username: user.username,
      });
 
      this.logger.log(`User ${user.username} disconnected`);
    }
  }
 
  @SubscribeMessage('room:join')
  handleJoinRoom(
    @MessageBody() data: { roomId: string },
    @ConnectedSocket() client: Socket,
  ) {
    const user = this.users.get(client.id);
 
    if (!user) {
      return { error: 'User not found' };
    }
 
    // Join room
    client.join(data.roomId);
 
    // Track room membership
    if (!this.rooms.has(data.roomId)) {
      this.rooms.set(data.roomId, new Set());
    }
    this.rooms.get(data.roomId).add(client.id);
 
    // Notify room members
    this.server.to(data.roomId).emit('user:joined', {
      roomId: data.roomId,
      userId: user.id,
      username: user.username,
    });
 
    this.logger.log(`User ${user.username} joined room ${data.roomId}`);
 
    return {
      success: true,
      roomId: data.roomId,
      message: `Joined room ${data.roomId}`,
    };
  }
 
  @SubscribeMessage('room:leave')
  handleLeaveRoom(
    @MessageBody() data: { roomId: string },
    @ConnectedSocket() client: Socket,
  ) {
    const user = this.users.get(client.id);
 
    if (!user) {
      return { error: 'User not found' };
    }
 
    // Leave room
    client.leave(data.roomId);
 
    // Update room membership
    const room = this.rooms.get(data.roomId);
    if (room) {
      room.delete(client.id);
      if (room.size === 0) {
        this.rooms.delete(data.roomId);
      }
    }
 
    // Notify room members
    this.server.to(data.roomId).emit('user:left', {
      roomId: data.roomId,
      userId: user.id,
      username: user.username,
    });
 
    this.logger.log(`User ${user.username} left room ${data.roomId}`);
 
    return {
      success: true,
      roomId: data.roomId,
      message: `Left room ${data.roomId}`,
    };
  }
 
  @SubscribeMessage('message:send')
  handleMessage(
    @MessageBody() data: { roomId: string; content: string },
    @ConnectedSocket() client: Socket,
  ) {
    const user = this.users.get(client.id);
 
    if (!user) {
      return { error: 'User not found' };
    }
 
    if (!data.content || data.content.trim().length === 0) {
      return { error: 'Message content is required' };
    }
 
    const message: Message = {
      id: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      roomId: data.roomId,
      userId: user.id,
      username: user.username,
      content: data.content.trim(),
      timestamp: new Date(),
    };
 
    // Broadcast message ke room
    this.server.to(data.roomId).emit('message:received', message);
 
    this.logger.log(
      `Message from ${user.username} in room ${data.roomId}: ${message.content.substring(0, 50)}`,
    );
 
    return {
      success: true,
      messageId: message.id,
    };
  }
 
  @SubscribeMessage('message:private')
  handlePrivateMessage(
    @MessageBody() data: { recipientId: string; content: string },
    @ConnectedSocket() client: Socket,
  ) {
    const sender = this.users.get(client.id);
 
    if (!sender) {
      return { error: 'User not found' };
    }
 
    // Cari socket recipient
    const recipient = Array.from(this.users.values()).find(
      u => u.id === data.recipientId,
    );
 
    if (!recipient) {
      return { error: 'Recipient not found' };
    }
 
    const message = {
      id: `pm_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      senderId: sender.id,
      senderUsername: sender.username,
      recipientId: recipient.id,
      content: data.content.trim(),
      timestamp: new Date(),
    };
 
    // Kirim ke recipient
    this.server.to(recipient.socketId).emit('message:private', message);
 
    // Kirim confirmation ke sender
    client.emit('message:private:sent', message);
 
    this.logger.log(
      `Private message from ${sender.username} to ${recipient.username}`,
    );
 
    return {
      success: true,
      messageId: message.id,
    };
  }
 
  @SubscribeMessage('typing:start')
  handleTypingStart(
    @MessageBody() data: { roomId: string },
    @ConnectedSocket() client: Socket,
  ) {
    const user = this.users.get(client.id);
 
    if (user) {
      client.to(data.roomId).emit('typing:start', {
        roomId: data.roomId,
        userId: user.id,
        username: user.username,
      });
    }
  }
 
  @SubscribeMessage('typing:stop')
  handleTypingStop(
    @MessageBody() data: { roomId: string },
    @ConnectedSocket() client: Socket,
  ) {
    const user = this.users.get(client.id);
 
    if (user) {
      client.to(data.roomId).emit('typing:stop', {
        roomId: data.roomId,
        userId: user.id,
        username: user.username,
      });
    }
  }
 
  // Method admin untuk mendapatkan room info
  getRoomInfo(roomId: string) {
    const members = this.rooms.get(roomId);
    if (!members) {
      return null;
    }
 
    const users = Array.from(members)
      .map(socketId => this.users.get(socketId))
      .filter(Boolean);
 
    return {
      roomId,
      memberCount: members.size,
      members: users.map(u => ({ id: u.id, username: u.username })),
    };
  }
 
  // Broadcast ke semua connected client
  broadcastToAll(event: string, data: any) {
    this.server.emit(event, data);
  }
 
  // Broadcast ke specific room
  broadcastToRoom(roomId: string, event: string, data: any) {
    this.server.to(roomId).emit(event, data);
  }
}

import { CanActivate, ExecutionContext, Injectable, Logger } from '@nestjs/common';
import { WsException } from '@nestjs/websockets';
import { Socket } from 'socket.io';
 
@Injectable()
export class WsAuthGuard implements CanActivate {
  private readonly logger = new Logger(WsAuthGuard.name);
 
  canActivate(context: ExecutionContext): boolean {
    const client: Socket = context.switchToWs().getClient();
    const token = client.handshake.auth.token;
 
    if (!token) {
      this.logger.warn(`Connection rejected: No token provided`);
      throw new WsException('Unauthorized');
    }
 
    try {
      // Verify JWT token (simplified untuk demo)
      // Di production, gunakan proper JWT verification
      const decoded = this.verifyToken(token);
      
      // Attach user info ke socket
      client.data.user = decoded;
      
      return true;
    } catch (error) {
      this.logger.warn(`Connection rejected: Invalid token`);
      throw new WsException('Unauthorized');
    }
  }
 
  private verifyToken(token: string): any {
    // Implementasi proper JWT verification
    // Ini adalah contoh simplified
    try {
      const payload = JSON.parse(
        Buffer.from(token.split('.')[1], 'base64').toString()
      );
      return payload;
    } catch {
      throw new Error('Invalid token');
    }
  }
}

@UseGuards(WsAuthGuard)
@SubscribeMessage('message:send')
handleMessage(@MessageBody() data: any, @ConnectedSocket() client: Socket) {
  // Handler code
}

import { Injectable, Logger } from '@nestjs/common';
 
export interface ChatMessage {
  id: string;
  roomId: string;
  userId: string;
  username: string;
  content: string;
  timestamp: Date;
}
 
export interface ChatRoom {
  id: string;
  name: string;
  createdAt: Date;
  createdBy: string;
}
 
@Injectable()
export class ChatService {
  private readonly logger = new Logger(ChatService.name);
  
  // In-memory storage (gunakan Redis atau database di production)
  private messages: Map<string, ChatMessage[]> = new Map();
  private rooms: Map<string, ChatRoom> = new Map();
 
  createRoom(id: string, name: string, createdBy: string): ChatRoom {
    const room: ChatRoom = {
      id,
      name,
      createdAt: new Date(),
      createdBy,
    };
 
    this.rooms.set(id, room);
    this.messages.set(id, []);
 
    this.logger.log(`Room created: ${name} (${id})`);
 
    return room;
  }
 
  getRoom(id: string): ChatRoom | undefined {
    return this.rooms.get(id);
  }
 
  getAllRooms(): ChatRoom[] {
    return Array.from(this.rooms.values());
  }
 
  deleteRoom(id: string): boolean {
    const deleted = this.rooms.delete(id);
    this.messages.delete(id);
 
    if (deleted) {
      this.logger.log(`Room deleted: ${id}`);
    }
 
    return deleted;
  }
 
  saveMessage(message: ChatMessage): void {
    const roomMessages = this.messages.get(message.roomId) || [];
    roomMessages.push(message);
    this.messages.set(message.roomId, roomMessages);
 
    // Simpan hanya 100 pesan terakhir per room
    if (roomMessages.length > 100) {
      this.messages.set(message.roomId, roomMessages.slice(-100));
    }
  }
 
  getMessages(roomId: string, limit: number = 50): ChatMessage[] {
    const messages = this.messages.get(roomId) || [];
    return messages.slice(-limit);
  }
 
  getMessageById(roomId: string, messageId: string): ChatMessage | undefined {
    const messages = this.messages.get(roomId) || [];
    return messages.find(m => m.id === messageId);
  }
 
  deleteMessage(roomId: string, messageId: string): boolean {
    const messages = this.messages.get(roomId);
    
    if (!messages) {
      return false;
    }
 
    const index = messages.findIndex(m => m.id === messageId);
    
    if (index === -1) {
      return false;
    }
 
    messages.splice(index, 1);
    this.logger.log(`Message deleted: ${messageId} from room ${roomId}`);
 
    return true;
  }
 
  searchMessages(roomId: string, query: string): ChatMessage[] {
    const messages = this.messages.get(roomId) || [];
    const lowerQuery = query.toLowerCase();
 
    return messages.filter(m =>
      m.content.toLowerCase().includes(lowerQuery) ||
      m.username.toLowerCase().includes(lowerQuery)
    );
  }
 
  getMessageStats(roomId: string): {
    total: number;
    byUser: Record<string, number>;
    firstMessage: Date | null;
    lastMessage: Date | null;
  } {
    const messages = this.messages.get(roomId) || [];
 
    const byUser: Record<string, number> = {};
    messages.forEach(m => {
      byUser[m.username] = (byUser[m.username] || 0) + 1;
    });
 
    return {
      total: messages.length,
      byUser,
      firstMessage: messages[0]?.timestamp || null,
      lastMessage: messages[messages.length - 1]?.timestamp || null,
    };
  }
}

import {
  Controller,
  Get,
  Post,
  Delete,
  Body,
  Param,
  Query,
  HttpCode,
  HttpStatus,
} from '@nestjs/common';
import { ChatService } from './chat.service';
import { ChatGateway } from './chat.gateway';
 
@Controller('chat')
export class ChatController {
  constructor(
    private readonly chatService: ChatService,
    private readonly chatGateway: ChatGateway,
  ) {}
 
  @Get('rooms')
  getRooms() {
    return {
      rooms: this.chatService.getAllRooms(),
    };
  }
 
  @Get('rooms/:id')
  getRoom(@Param('id') id: string) {
    const room = this.chatService.getRoom(id);
    
    if (!room) {
      return { error: 'Room not found' };
    }
 
    const info = this.chatGateway.getRoomInfo(id);
 
    return {
      room,
      ...info,
    };
  }
 
  @Post('rooms')
  @HttpCode(HttpStatus.CREATED)
  createRoom(
    @Body() body: { id: string; name: string; createdBy: string },
  ) {
    const room = this.chatService.createRoom(
      body.id,
      body.name,
      body.createdBy,
    );
 
    // Notify semua connected client
    this.chatGateway.broadcastToAll('room:created', room);
 
    return { room };
  }
 
  @Delete('rooms/:id')
  @HttpCode(HttpStatus.NO_CONTENT)
  deleteRoom(@Param('id') id: string) {
    const deleted = this.chatService.deleteRoom(id);
 
    if (deleted) {
      // Notify semua connected client
      this.chatGateway.broadcastToAll('room:deleted', { roomId: id });
    }
 
    return { success: deleted };
  }
 
  @Get('rooms/:id/messages')
  getMessages(
    @Param('id') id: string,
    @Query('limit') limit?: string,
  ) {
    const messages = this.chatService.getMessages(
      id,
      limit ? parseInt(limit, 10) : 50,
    );
 
    return { messages };
  }
 
  @Get('rooms/:id/messages/search')
  searchMessages(
    @Param('id') id: string,
    @Query('q') query: string,
  ) {
    if (!query) {
      return { error: 'Query parameter is required' };
    }
 
    const messages = this.chatService.searchMessages(id, query);
 
    return { messages, count: messages.length };
  }
 
  @Get('rooms/:id/stats')
  getRoomStats(@Param('id') id: string) {
    const stats = this.chatService.getMessageStats(id);
    return { stats };
  }
 
  @Post('rooms/:id/broadcast')
  @HttpCode(HttpStatus.OK)
  broadcastToRoom(
    @Param('id') id: string,
    @Body() body: { event: string; data: any },
  ) {
    this.chatGateway.broadcastToRoom(id, body.event, body.data);
 
    return {
      success: true,
      message: `Broadcast sent to room ${id}`,
    };
  }
}

import { Module } from '@nestjs/common';
import { ChatGateway } from './chat.gateway';
import { ChatService } from './chat.service';
import { ChatController } from './chat.controller';
 
@Module({
  controllers: [ChatController],
  providers: [ChatGateway, ChatService],
  exports: [ChatGateway, ChatService],
})
export class ChatModule {}

import { Module } from '@nestjs/common';
import { ChatModule } from './chat/chat.module';
 
@Module({
  imports: [ChatModule],
})
export class AppModule {}

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
 
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
 
  // Enable CORS untuk HTTP
  app.enableCors({
    origin: '*', // Konfigurasi dengan benar di production
    credentials: true,
  });
 
  await app.listen(3000);
  console.log('WebSocket Chat Server running on http://localhost:3000');
  console.log('WebSocket endpoint: ws://localhost:3000/chat');
}
bootstrap();

import { io, Socket } from 'socket.io-client';
 
interface ChatClientOptions {
  url: string;
  username: string;
  token?: string;
}
 
export class ChatClient {
  private socket: Socket;
  private username: string;
 
  constructor(options: ChatClientOptions) {
    this.username = options.username;
 
    this.socket = io(`${options.url}/chat`, {
      auth: {
        username: options.username,
        token: options.token,
      },
      reconnection: true,
      reconnectionDelay: 1000,
      reconnectionAttempts: 5,
    });
 
    this.setupEventHandlers();
  }
 
  private setupEventHandlers() {
    this.socket.on('connect', () => {
      console.log('Connected to chat server');
    });
 
    this.socket.on('disconnect', (reason) => {
      console.log('Disconnected:', reason);
    });
 
    this.socket.on('connect_error', (error) => {
      console.error('Connection error:', error.message);
    });
 
    this.socket.on('reconnect', (attemptNumber) => {
      console.log('Reconnected after', attemptNumber, 'attempts');
    });
  }
 
  // Join room
  joinRoom(roomId: string): Promise<any> {
    return new Promise((resolve, reject) => {
      this.socket.emit('room:join', { roomId }, (response: any) => {
        if (response.error) {
          reject(new Error(response.error));
        } else {
          resolve(response);
        }
      });
    });
  }
 
  // Leave room
  leaveRoom(roomId: string): Promise<any> {
    return new Promise((resolve, reject) => {
      this.socket.emit('room:leave', { roomId }, (response: any) => {
        if (response.error) {
          reject(new Error(response.error));
        } else {
          resolve(response);
        }
      });
    });
  }
 
  // Kirim message ke room
  sendMessage(roomId: string, content: string): Promise<any> {
    return new Promise((resolve, reject) => {
      this.socket.emit(
        'message:send',
        { roomId, content },
        (response: any) => {
          if (response.error) {
            reject(new Error(response.error));
          } else {
            resolve(response);
          }
        }
      );
    });
  }
 
  // Kirim private message
  sendPrivateMessage(recipientId: string, content: string): Promise<any> {
    return new Promise((resolve, reject) => {
      this.socket.emit(
        'message:private',
        { recipientId, content },
        (response: any) => {
          if (response.error) {
            reject(new Error(response.error));
          } else {
            resolve(response);
          }
        }
      );
    });
  }
 
  // Typing indicator
  startTyping(roomId: string) {
    this.socket.emit('typing:start', { roomId });
  }
 
  stopTyping(roomId: string) {
    this.socket.emit('typing:stop', { roomId });
  }
 
  // Event listener
  onMessage(callback: (message: any) => void) {
    this.socket.on('message:received', callback);
  }
 
  onPrivateMessage(callback: (message: any) => void) {
    this.socket.on('message:private', callback);
  }
 
  onUserJoined(callback: (data: any) => void) {
    this.socket.on('user:joined', callback);
  }
 
  onUserLeft(callback: (data: any) => void) {
    this.socket.on('user:left', callback);
  }
 
  onUserConnected(callback: (data: any) => void) {
    this.socket.on('user:connected', callback);
  }
 
  onUserDisconnected(callback: (data: any) => void) {
    this.socket.on('user:disconnected', callback);
  }
 
  onTypingStart(callback: (data: any) => void) {
    this.socket.on('typing:start', callback);
  }
 
  onTypingStop(callback: (data: any) => void) {
    this.socket.on('typing:stop', callback);
  }
 
  onUsersList(callback: (users: any[]) => void) {
    this.socket.on('users:list', callback);
  }
 
  // Disconnect
  disconnect() {
    this.socket.disconnect();
  }
 
  // Dapatkan connection status
  isConnected(): boolean {
    return this.socket.connected;
  }
}
 
// Contoh penggunaan
async function example() {
  const client = new ChatClient({
    url: 'http://localhost:3000',
    username: 'John Doe',
  });
 
  // Listen untuk message
  client.onMessage((message) => {
    console.log(`[${message.username}]: ${message.content}`);
  });
 
  // Listen untuk user event
  client.onUserJoined((data) => {
    console.log(`${data.username} joined ${data.roomId}`);
  });
 
  // Join room
  await client.joinRoom('general');
 
  // Kirim message
  await client.sendMessage('general', 'Hello, everyone!');
 
  // Typing indicator
  client.startTyping('general');
  setTimeout(() => client.stopTyping('general'), 2000);
}

import { useEffect, useState, useRef } from 'react';
import { ChatClient } from '../chat-client';
 
interface Message {
  id: string;
  username: string;
  content: string;
  timestamp: Date;
}
 
export function ChatRoom({ roomId, username }: { roomId: string; username: string }) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [typingUsers, setTypingUsers] = useState<Set<string>>(new Set());
  const [onlineUsers, setOnlineUsers] = useState<string[]>([]);
  const clientRef = useRef<ChatClient | null>(null);
  const typingTimeoutRef = useRef<NodeJS.Timeout>();
 
  useEffect(() => {
    // Initialize client
    const client = new ChatClient({
      url: 'http://localhost:3000',
      username,
    });
 
    clientRef.current = client;
 
    // Setup event listener
    client.onMessage((message) => {
      setMessages((prev) => [...prev, message]);
    });
 
    client.onUserJoined((data) => {
      console.log(`${data.username} joined`);
    });
 
    client.onUserLeft((data) => {
      console.log(`${data.username} left`);
    });
 
    client.onTypingStart((data) => {
      setTypingUsers((prev) => new Set(prev).add(data.username));
    });
 
    client.onTypingStop((data) => {
      setTypingUsers((prev) => {
        const next = new Set(prev);
        next.delete(data.username);
        return next;
      });
    });
 
    client.onUsersList((users) => {
      setOnlineUsers(users.map((u: any) => u.username));
    });
 
    // Join room
    client.joinRoom(roomId);
 
    // Cleanup
    return () => {
      client.leaveRoom(roomId);
      client.disconnect();
    };
  }, [roomId, username]);
 
  const handleSendMessage = async () => {
    if (!inputValue.trim() || !clientRef.current) return;
 
    await clientRef.current.sendMessage(roomId, inputValue);
    setInputValue('');
 
    // Stop typing indicator
    if (typingTimeoutRef.current) {
      clearTimeout(typingTimeoutRef.current);
    }
    clientRef.current.stopTyping(roomId);
  };
 
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
 
    if (!clientRef.current) return;
 
    // Start typing indicator
    clientRef.current.startTyping(roomId);
 
    // Clear existing timeout
    if (typingTimeoutRef.current) {
      clearTimeout(typingTimeoutRef.current);
    }
 
    // Stop typing setelah 2 detik inactivity
    typingTimeoutRef.current = setTimeout(() => {
      clientRef.current?.stopTyping(roomId);
    }, 2000);
  };
 
  return (
    <div className="chat-room">
      <div className="sidebar">
        <h3>Online Users ({onlineUsers.length})</h3>
        <ul>
          {onlineUsers.map((user) => (
            <li key={user}>{user}</li>
          ))}
        </ul>
      </div>
 
      <div className="main">
        <div className="messages">
          {messages.map((message) => (
            <div key={message.id} className="message">
              <strong>{message.username}:</strong> {message.content}
              <span className="timestamp">
                {new Date(message.timestamp).toLocaleTimeString()}
              </span>
            </div>
          ))}
        </div>
 
        {typingUsers.size > 0 && (
          <div className="typing-indicator">
            {Array.from(typingUsers).join(', ')} {typingUsers.size === 1 ? 'is' : 'are'} typing...
          </div>
        )}
 
        <div className="input-area">
          <input
            type="text"
            value={inputValue}
            onChange={handleInputChange}
            onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
            placeholder="Type a message..."
          />
          <button onClick={handleSendMessage}>Send</button>
        </div>
      </div>
    </div>
  );
}

@WebSocketGateway({ namespace: '/chat' })
export class ChatGateway {
  // Fungsionalitas chat
}
 
@WebSocketGateway({ namespace: '/notifications' })
export class NotificationsGateway {
  // Fungsionalitas notification
}
 
@WebSocketGateway({ namespace: '/admin' })
export class AdminGateway {
  // Fungsionalitas admin
}

const chatSocket = io('http://localhost:3000/chat');
const notifSocket = io('http://localhost:3000/notifications');

// Join multiple room
client.join('room1');
client.join('room2');
client.join(`user:${userId}`); // User-specific room
 
// Broadcast ke specific room
this.server.to('room1').emit('event', data);
 
// Broadcast ke multiple room
this.server.to(['room1', 'room2']).emit('event', data);
 
// Broadcast ke semua kecuali sender
client.broadcast.emit('event', data);
 
// Broadcast ke room kecuali sender
client.to('room1').broadcast.emit('event', data);

@SubscribeMessage('message:send')
handleMessage(
  @MessageBody() data: any,
  @ConnectedSocket() client: Socket,
) {
  // Process message
  const messageId = this.saveMessage(data);
 
  // Return acknowledgment
  return {
    success: true,
    messageId,
    timestamp: new Date(),
  };
}

socket.emit('message:send', { content: 'Hello' }, (ack) => {
  console.log('Message delivered:', ack.messageId);
});

@SubscribeMessage('file:upload')
handleFileUpload(
  @MessageBody() data: { filename: string; buffer: Buffer },
  @ConnectedSocket() client: Socket,
) {
  // Process binary data
  const fileId = this.saveFile(data.filename, data.buffer);
 
  return {
    success: true,
    fileId,
    size: data.buffer.length,
  };
}

const fileBuffer = await file.arrayBuffer();
socket.emit('file:upload', {
  filename: file.name,
  buffer: Buffer.from(fileBuffer),
});

import { Socket } from 'socket.io';
import { Logger } from '@nestjs/common';
 
export const wsLogger = (socket: Socket, next: (err?: Error) => void) => {
  const logger = new Logger('WebSocket');
  
  logger.log(`Client connecting: ${socket.id} from ${socket.handshake.address}`);
  
  // Log semua event
  socket.onAny((event, ...args) => {
    logger.debug(`Event: ${event} from ${socket.id}`);
  });
 
  next();
};
 
export const wsRateLimit = (socket: Socket, next: (err?: Error) => void) => {
  const requests = new Map<string, number[]>();
  const WINDOW_MS = 60000; // 1 menit
  const MAX_REQUESTS = 100;
 
  const clientId = socket.handshake.address;
  const now = Date.now();
  
  const clientRequests = requests.get(clientId) || [];
  const recentRequests = clientRequests.filter(time => now - time < WINDOW_MS);
 
  if (recentRequests.length >= MAX_REQUESTS) {
    return next(new Error('Rate limit exceeded'));
  }
 
  recentRequests.push(now);
  requests.set(clientId, recentRequests);
 
  next();
};

@WebSocketGateway({
  namespace: '/chat',
  middlewares: [wsLogger, wsRateLimit],
})
export class ChatGateway {
  // Gateway code
}

socket.on('connect', () => {
  // Hanya berjalan pada initial connect
  loadInitialData();
});

socket.on('connect', () => {
  loadInitialData();
});
 
socket.on('reconnect', () => {
  // Resync state setelah reconnection
  resyncData();
  rejoinRooms();
});

useEffect(() => {
  socket.on('message', handleMessage);
  // Missing cleanup!
}, []);

useEffect(() => {
  socket.on('message', handleMessage);
  
  return () => {
    socket.off('message', handleMessage);
  };
}, []);

socket.emit('data', {
  users: allUsers, // 10,000 users
  messages: allMessages, // 100,000 messages
});

socket.emit('data', {
  users: recentUsers.slice(0, 50),
  hasMore: true,
});
 
// Atau gunakan compression
socket.emit('data', compressData(largeObject));