# Realtime Console

> Manage realtime channels: create app keys, see live connection stats, and configure webhooks.

The Realtime Console is the ready-made web app for Pusher-compatible realtime
channels on FirstByte. In the console you can create app credentials, connect
stock `pusher-js`, publish events, and see live connection and channel telemetry.
You can also receive signed webhooks. You do not write code for these tasks.
The console works together with the [Data](/modalities/data/details) pub/sub
modality. Data is the typed many-to-many topic bus. Realtime gives the drop-in
Pusher API and channel model for browser and mobile clients.

> **NOTE:**
> Apps, keys, publishing, webhooks, and settings are scoped to your organization.
> You must be signed in. Live channel stats are read-only. They show data only
> when the realtime engine serves traffic for the selected app.

## What's in the console

  - **Get started** — This screen shows a live strip of connections, channels, and messages per
    minute. It also shows the selected app's key and secret, and copy-paste
    `pusher-js` quickstart snippets in several languages.
  - **API keys** — Create apps, rotate the secret, or delete an app. Each app is a
    Pusher-compatible key/secret pair.
  - **Event Creator** — Trigger an event on a channel from the browser. This is the equivalent of
    `pusher.trigger()`. The screen has an inline JSON body field and shows the
    matching cURL.
  - **Stats** — This screen shows live per-app telemetry: connection and channel counts, a
    channels-by-type mix, top channels, and a table of subscribers and
    throughput per channel.
  - **Webhooks** — Register endpoints that receive signed event batches (channel existence,
    presence, client events, cache miss). Pause, resume, or delete each
    endpoint.
  - **Settings** — This screen sets per-app capabilities (client events, authorized-only
    connections) and the allowed origins for CORS. It also has a delete-app
    danger zone.

> **TIP:**
> Most screens act on the **selected app**. Create an app in **API keys**
> first. Then select it in the app switcher. The other screens (Get started,
> Event Creator, Stats, Webhooks, Settings) then target that app.

## Create an app and get your keys

An app is a Pusher-compatible key/secret pair. The key identifies client
connections. The secret authenticates the HTTP API. The server generates the
secret and shows it **only once**.

  1. **Open API keys**
Go to **API keys**. If you have no apps, the screen shows a "Create your
    first app" prompt. If you have apps, use the **Create app** button in the
    header.
  2. **Name and generate**
Enter an **App name** (for example `production · mobile clients`). Click
    **Generate**. The console creates the key and the secret.
  3. **Copy the secret before you dismiss it**
The **App created** panel shows the **App ID**, **Key**, and
    **Secret (shown once)**. Copy the secret. Store it in a safe location. Then
    click **I've stored it**.

    > **WARNING:**
> The secret is sealed at rest. The API never returns it again. If you lose
>     the secret, you must rotate it. Rotation invalidates the old secret. The
>     app list shows only a masked tail of the secret.
  4. **Select the app**
The new app appears in the table with an **active** status. Select it in
    the app switcher. The other screens then target it.

> **TIP:**
> To rotate or remove a key, use the row's overflow (**⋯**) menu in the
> **API keys** table. **Rotate secret** issues a new secret (shown once) and
> immediately invalidates the old secret. **Delete app** immediately disconnects
> all connected clients.

## Connect a client with pusher-js

  1. **Open Getting started**
Select your app. Go to **Getting started**. The **App credentials** card
    shows the app's real **Key** and masked **Secret**. Click the reveal
    control to unmask the secret.
  2. **Copy the connection details**
The **Connection details** card shows a ready `pusher-js` configuration
    with your real key already substituted. Click **Copy**. Paste the
    configuration into your client. You change only the host, not other code.
  3. **Follow the quickstart**
In the **Quickstart** card, select your language tab (browser, and the
    other official Pusher SDKs). The card shows the **Install** command and a
    **Connect & subscribe** snippet with your real key filled in.

> **NOTE:**
> The connection tags show the included features: `forceTLS`, WebTransport/QUIC
> transport, automatic reconnect, and WiFi↔cellular connection migration.

## Publish a test event

Use the **Event Creator** to send an event across the edge mesh from the
browser. This is the console equivalent of `pusher.trigger()`.

  1. **Open Event Creator**
Select an app. Go to **Event Creator**. The screen publishes over the
    realtime HTTP API for that app.
  2. **Fill in the event**
Set the **Channel** (for example `private-orders`). Set the **Event name**
    (for example `order.created`). Enter a JSON **Data** body. The field
    validates your JSON as you type and shows **valid JSON** or **invalid**.
  3. **Send it**
Click **Send event**. On success, the **API response** card shows
    **Event published**. On error, it shows the HTTP status and body.
    **Reset** clears the body.
  4. **Reuse the cURL**
The **Equivalent cURL** card shows your inputs as a
    `POST /apps/{app_id}/events` request. Copy it to run the same publish from
    a script or server.

> **WARNING:**
> `private-*` and `presence-*` channels require an authorized publisher. If the
> console shows **Publishing isn't enabled on this deployment**, the realtime HTTP
> publish API is not configured for that deployment. The form is disabled and
> stays read-only until the API is configured.

## Monitor live channel activity

The **Stats** screen streams live telemetry for the selected app. It refreshes
every 5 seconds. There is no historical time series. The screen shows only the
current state.

  1. **Open Stats**
Select an app. Go to **Stats**. The header shows an **engine
    connected** / **engine not connected** pill.

    > **NOTE:**
> If the engine does not serve traffic for this app, the screen shows
>     **Engine not connected** instead of counters. Live connection, channel, and
>     message counts appear when a node handles traffic.
  2. **Read the live counters**
Three tiles show current **Connections**, **Active channels**, and
    **Messages / min** (last 60s).
  3. **Break down channel usage**
**Channels by type** is a donut chart of public / private / presence /
    cache channels. **Top channels** ranks channels by subscriber count.
  4. **Inspect per-channel detail**
The **Channels** table lists each active channel with its type, subscriber
    count, and messages per minute.

## Wire and manage webhooks

Webhooks let FirstByte POST signed event batches to your endpoints for the
selected app. Check the signature before you trust a payload.

  1. **Open Webhooks**
Select an app. Go to **Webhooks**.
  2. **Add an endpoint**
In **Add webhook**, enter your **Endpoint URL** (for example
    `https://your.app/hooks/realtime`). Then select the **Event groups** to
    receive:

    - **Channel existence** — `channel_occupied`, `channel_vacated`
    - **Presence** — `member_added`, `member_removed`
    - **Client events** — `client-*` events from subscribers
    - **Cache miss** — `cache_miss` on `cache-*` channels

    Click **Add webhook**.
  3. **Save the signing secret**
The **Webhook created** panel shows the **Signing secret (shown once)**. Copy
    it now.

    > **WARNING:**
> The signing secret is sealed at rest and shown only once. Use it to check
>     the `X-Pusher-Signature` HMAC on every delivery.
  4. **Verify deliveries**
Each request carries an `X-Pusher-Signature` header (Pusher-compatible).
    The **Signature verification** card shows the check. Compute
    `hmac_sha256(body, signing_key)`. Compare the result to the header before
    you trust the payload.
  5. **Pause, resume, or delete**
Use the **Configured webhooks** table. **Pause** stops deliveries to an
    endpoint and shows a **paused** pill. **Resume** enables the endpoint
    again. The trash action deletes the endpoint after a confirmation.

## Configure app settings

The **Settings** screen sets options for the selected app. Capability toggles
save immediately. A brief **Saving…** indicator appears.

  1. **Set app capabilities**
Under **App capabilities**:

    - **Enable client events** — allow subscribers to publish `client-*` events
      to channels.
    - **Authorized connections only** — require auth for `private-*` and
      `presence-*` channels.
  2. **Restrict browser origins**
Under **CORS / allowed origins**, add the browser origins that may open a
    connection (for example `https://*.example.com`). An empty list allows any
    origin. Click an origin's **x** to remove it.
  3. **Delete the app (danger zone)**
To remove an app, type its exact name into the confirm field. Then click
    **Delete app**.

    > **WARNING:**
> You cannot undo an app deletion. The deletion permanently removes all keys,
>     channels, and webhooks. It immediately disconnects connected clients.

## Next steps

- [Data — Details](/modalities/data/details) — the pub/sub modality that works
  together with this console.
- [Data — SDK Methods](/modalities/data/sdk-methods) — the typed client surface
  that you build on.