The Realtime Console is the ready-made web app for Pusher-compatible realtime channels on ClutchCall. 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 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.
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

Getting 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.

Apps & 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.
Most screens act on the selected app. Create an app in Apps & keys first. Then select it in the app switcher. The other screens (Getting 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 Apps & keys

Go to Apps & 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.
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.
To rotate or remove a key, use the row’s overflow (⋯) menu in the Apps & 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.
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.
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.
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 ClutchCall 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.
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.
You cannot undo an app deletion. The deletion permanently removes all keys, channels, and webhooks. It immediately disconnects connected clients.

​
Next steps