Socket Events

The bundled Socket.IO client connects to socketUrl at the /connection namespace after ChatMain completes client-user login. Incoming events update the Zustand store; components that select from useChatStore re-render automatically.

In typical integrations you do not register socket listeners yourself. Use store actions (for example emitDmSend) and let the package reconcile optimistic UI with server acknowledgments.

1. ChatMain performs client-user login and receives a JWT used for subsequent API and socket auth.
2. The socket client connects to socketUrl (or apiUrl with /api/v1 stripped) at the /connection namespace.
3. onSocketConnected fires once the handshake succeeds.
4. onSocketError fires if the connection cannot be established or drops unexpectedly.
5. ChatSocketStatus (a replaceable component slot) reflects the live connection state in the UI.

1. The composer calls a store send action (for example emitDmSend).
2. The message is inserted into the store immediately and rendered — this is the optimistic step.
3. The socket emits the send event to the backend.
4. On server acknowledgment, the optimistic message reconciles with the persisted message (id, timestamps, status).
5. Read receipts (sent / delivered / read) update status as further socket events arrive.

Exact event names are owned by the RealtimeX backend and may evolve. Treat the categories below as the mental model for what the client listens for and emits through the store layer.

For REST endpoint coverage that complements these realtime flows, see API Integration and the full API documentation.

Prefer store selectors and actions. Reach for low-level socket helpers only when diagnosing connection issues.

import {
  socketService,
  getSocketConfig,
  useChatStore,
} from "@realtimexsco/live-chat";

// Store actions that emit socket events
const emitDmSend = useChatStore((s) => s.emitDmSend);

// Low-level access — advanced diagnostics only
const config = getSocketConfig();