Skip to main content
ChatProvider is the root component for the entire chat system. It establishes and manages the Socket.io connection, fetches initial unread counts, and provides the shared socket instance to all hooks that need it.
ChatProvider must be placed inside SublayProvider and above any component that uses chat hooks.

​
Adding ChatProvider

1

Import and wrap your app

Place ChatProvider inside SublayProvider but outside your conversation UI:
import { SublayProvider, ChatProvider } from "@sublay/react-js";

function App() {
  return (
    <SublayProvider projectId="your-project-id">
      <ChatProvider>
        <YourApp />
      </ChatProvider>
    </SublayProvider>
  );
}
2

Authentication

ChatProvider only connects the socket when a user is authenticated. If no access token is available, no connection is attempted. The socket reconnects automatically when the user signs in and disconnects when they sign out.

​
What ChatProvider Does

When a user is authenticated, ChatProvider:
  1. Opens a Socket.io connection to the Sublay server, authenticated with the user’s access token
  2. Fetches initial unread counts (total unread messages and count of conversations with unread messages) so badges are accurate before the conversation list is loaded
  3. Listens for real-time events — new messages, message edits, deletions, reactions, typing indicators, and conversation updates
  4. Updates Redux state automatically as events arrive, so all components using chat hooks stay in sync

​
Token Rotation

When the access token rotates (e.g. after a refresh), ChatProvider updates the socket’s auth credentials and forces a re-handshake. The socket is not torn down — room memberships are preserved.

​
Checking Connection State

Use useChatSocket to read the connection state in your UI: 
import { useChatSocket } from "@sublay/react-js";

function ConnectionBadge() {
  const { connected } = useChatSocket();
  return <span>{connected ? "Online" : "Connecting..."}</span>;
}

​
Unread Counts

Two hooks expose the unread counts fetched on mount: These are useful for badges in navigation: 
import { useTotalUnreadCount } from "@sublay/react-js";

function NavBadge() {
  const unread = useTotalUnreadCount();
  if (unread === 0) return null;
  return <span className="badge">{unread}</span>;
}

​
Next Steps

Conversations

Create and list conversations

Messages

Send and receive messages