Advanced

Master advanced SDK features for production-ready applications

Quick Reference for AI Agents & Developers

// Connection status listener
CometChat.addConnectionListener("CONN_LISTENER", new CometChat.ConnectionListener({
  onConnected: () => console.log("Connected"),
  onDisconnected: () => console.log("Disconnected"),
  onConnecting: () => console.log("Connecting...")
}));

// Manual WebSocket control
CometChat.connect();     // Connect
CometChat.disconnect();  // Disconnect

// Login listener
CometChat.addLoginListener("AUTH_LISTENER", new CometChat.LoginListener({
  loginSuccess: (user) => console.log("Logged in"),
  logoutSuccess: () => console.log("Logged out")
}));

Build robust, production-ready chat applications with advanced SDK capabilities including connection management, real-time listeners, and performance optimization.

Advanced Capabilities

Connection Status

Monitor WebSocket connection state and handle network changes gracefully

Manual WebSocket Management

Take full control of WebSocket connections for advanced use cases

Real-Time Listeners

Comprehensive guide to all event listeners available in the SDK

Login Listener

Handle authentication state changes and session management

When to Use Advanced Features

Feature	Use Case	Benefit
Connection Status	Mobile apps, unstable networks	Graceful offline handling
Manual WebSocket	Background apps, battery optimization	Resource efficiency
Real-Time Listeners	Custom UI updates, analytics	Full event control
Login Listener	Multi-device sync, security	Session management

Connection Management

Understanding connection states is crucial for production applications:

JavaScript

// Monitor connection status
CometChat.addConnectionListener(
  "CONNECTION_LISTENER",
  new CometChat.ConnectionListener({
    onConnected: () => {
      console.log("Connected to CometChat");
      // Enable chat features
    },
    onDisconnected: () => {
      console.log("Disconnected from CometChat");
      // Show offline indicator
    },
    onConnecting: () => {
      console.log("Connecting...");
      // Show loading state
    },
    onFeatureThrottled: () => {
      console.log("Feature throttled");
      // Handle rate limiting
    }
  })
);

TypeScript

// Monitor connection status
CometChat.addConnectionListener(
  "CONNECTION_LISTENER",
  new CometChat.ConnectionListener({
    onConnected: (): void => {
      console.log("Connected to CometChat");
      // Enable chat features
    },
    onDisconnected: (): void => {
      console.log("Disconnected from CometChat");
      // Show offline indicator
    },
    onConnecting: (): void => {
      console.log("Connecting...");
      // Show loading state
    },
    onFeatureThrottled: (): void => {
      console.log("Feature throttled");
      // Handle rate limiting
    }
  })
);

Best Practices

Always Handle Disconnections

Implement reconnection logic and offline indicators to maintain good UX during network issues.

onDisconnected: () => {
  showOfflineIndicator();
  queueOutgoingMessages();
}

Clean Up Listeners

Remove listeners when components unmount to prevent memory leaks.

// On component unmount
CometChat.removeConnectionListener("CONNECTION_LISTENER");

Use Manual WebSocket for Background Apps

Disconnect WebSocket when app goes to background to save battery and resources.

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    CometChat.disconnect();
  } else {
    CometChat.connect();
  }
});

Next Steps

Connection Status

Deep dive into connection state management

Manual WebSocket

Learn manual connection control