Connection Status

Monitor WebSocket connection status in real-time

Quick Reference for AI Agents & Developers

// Get current connection status
const status = CometChat.getConnectionStatus();
// Returns: "connecting", "connected", or "disconnected"

// Listen for connection changes
CometChat.addConnectionListener("CONNECTION_LISTENER", new CometChat.ConnectionListener({
  onConnected: () => console.log("Connected"),
  inConnecting: () => console.log("Connecting..."),
  onDisconnected: () => console.log("Disconnected")
}));

// Remove listener
CometChat.removeConnectionListener("CONNECTION_LISTENER");

// SDK auto-reconnects when connection is lost

Track the connection status to CometChat servers to handle network changes gracefully.

Availability: SDK

The SDK automatically reconnects when the connection is lost.

---

Connection States

State	Description
connecting	SDK is attempting to connect
connected	Connection established and active
disconnected	Connection lost (SDK will auto-reconnect)

---

Listen for Connection Changes

JavaScript

const listenerID = "CONNECTION_LISTENER";

CometChat.addConnectionListener(
  listenerID,
  new CometChat.ConnectionListener({
    onConnected: () => {
      console.log("Connected to CometChat");
      // Resume normal operations
    },
    inConnecting: () => {
      console.log("Connecting...");
      // Show connecting indicator
    },
    onDisconnected: () => {
      console.log("Disconnected from CometChat");
      // Show offline indicator
    }
  })
);

TypeScript

const listenerID: string = "CONNECTION_LISTENER";

CometChat.addConnectionListener(
  listenerID,
  new CometChat.ConnectionListener({
    onConnected: () => {
      console.log("Connected to CometChat");
    },
    inConnecting: () => {
      console.log("Connecting...");
    },
    onDisconnected: () => {
      console.log("Disconnected from CometChat");
    }
  })
);

Remove Listener

CometChat.removeConnectionListener("CONNECTION_LISTENER");

---

Get Current Status

Check the current connection status at any time:

const status = CometChat.getConnectionStatus();
console.log("Current status:", status);
// Returns: "connecting", "connected", or "disconnected"

---

Implementation Example

class ConnectionManager {
  constructor() {
    this.status = "disconnected";
    this.listeners = [];
  }

  initialize() {
    CometChat.addConnectionListener(
      "connection-manager",
      new CometChat.ConnectionListener({
        onConnected: () => this.handleConnected(),
        inConnecting: () => this.handleConnecting(),
        onDisconnected: () => this.handleDisconnected()
      })
    );
  }

  handleConnected() {
    this.status = "connected";
    this.notifyListeners();
    // Hide offline banner, enable send button
  }

  handleConnecting() {
    this.status = "connecting";
    this.notifyListeners();
    // Show "Reconnecting..." indicator
  }

  handleDisconnected() {
    this.status = "disconnected";
    this.notifyListeners();
    // Show offline banner, disable send button
  }

  onStatusChange(callback) {
    this.listeners.push(callback);
  }

  notifyListeners() {
    this.listeners.forEach((cb) => cb(this.status));
  }

  isConnected() {
    return this.status === "connected";
  }

  cleanup() {
    CometChat.removeConnectionListener("connection-manager");
  }
}

// Usage
const connectionManager = new ConnectionManager();
connectionManager.initialize();

connectionManager.onStatusChange((status) => {
  updateConnectionUI(status);
});

---

Best Practices

Add Listener Early

Add the connection listener after initializing CometChat, preferably in your app’s entry point.

UI Feedback

Show clear visual feedback when disconnected (e.g., banner, disabled send button).

Queue Messages

Consider queuing messages when disconnected and sending them when reconnected.

---

Next Steps

WebSocket Management

Manual WebSocket control

Setup SDK

SDK configuration options