> ## Documentation Index
> Fetch the complete documentation index at: https://sippet.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Realtime telephony patterns

> Use Sippet realtime events to keep your call UI synchronized.

## Event model

The `events` channel is your realtime stream for call state updates.

Core events:

* `incoming_call`
* `call_answered`
* `call_ended`
* `call_participant_joined`
* `call_participant_left`
* `call_transcript_delta`
* `call_transcript_completed`
* `call_ai_audit_event`

## Authentication model

Use short-lived `session_token` values minted by your backend.

Do not connect browser sockets with publishable keys.

## Recommended state shape

Use `callUuid` as your primary key in client state.

```ts theme={null}
type CallMap = Record<string, {
  callUuid: string;
  status: string | null;
  fromNumber: string;
  toNumber: string;
  startedAt: string | null;
  endedAt: string | null;
}>;
```

## Bootstrap + realtime merge

1. Load initial call rows from your backend.
2. Subscribe to realtime events with `joinEventsChannel()`.
3. Apply event deltas to local cache by `callUuid`.
4. Re-fetch on important transitions.

## Minimal reducer pattern

```ts theme={null}
function onIncoming(callUuid: string, state: CallMap) {
  const prev = state[callUuid];
  state[callUuid] = {
    callUuid,
    status: "ringing",
    fromNumber: prev?.fromNumber ?? "",
    toNumber: prev?.toNumber ?? "",
    startedAt: prev?.startedAt ?? null,
    endedAt: null,
  };
}

function onAnswered(callUuid: string, state: CallMap) {
  if (!state[callUuid]) return;
  state[callUuid].status = "answered";
}

function onEnded(callUuid: string, state: CallMap, endedAt: string) {
  if (!state[callUuid]) return;
  state[callUuid].status = "completed";
  state[callUuid].endedAt = endedAt;
}
```

## Practical tips

* Keep event handlers idempotent.
* Re-mint session tokens on reconnect failures.
* Handle socket setup failures gracefully and keep UI usable.

## Related pages

* Session token flow: `/guides/realtime-session-tokens`
* Getting started flow: `/guides/getting-started-classic`
* RPC action details: `/sdk-js/rpc-actions`