Realtime (WebSockets)

Realtime gives your app WebSockets for broadcasting: live notifications, dashboards, chat, and presence. It speaks the Pusher protocol, which is what Laravel Reverb speaks, so Laravel Echo, pusher-js, and any Pusher server SDK work unchanged. dply runs the socket server for you. Browsers connect to it, your app publishes to it over HTTPS, and your app still authorises private and presence channels itself.

Create a Realtime app#

1. In your app, open Overview.
2. Choose Add resource, then Realtime.
3. Optionally enter a Name. It is only shown in dply.
4. Pick Max connections: the most sockets that may be open at once. Past this, new connections are refused.
5. Optionally list Allowed origins, one per line, such as https://example.com. Empty allows any site to connect.
6. Choose Create, then deploy the app.

An app has one Realtime connection. Realtime works with container apps and with SSR or hybrid apps.

Each Realtime app gets its own host, shown under Credentials. Copy the host from there rather than building it yourself.

What the app receives#

The next deploy sets these. For a Laravel app it also sets BROADCAST_CONNECTION=reverb. Values you save in Environment variables win.

BROADCAST_CONNECTION=reverb
REVERB_APP_ID=...
REVERB_APP_KEY=rtk_...
REVERB_APP_SECRET=rts_...
REVERB_HOST=<your realtime host>
REVERB_PORT=443
REVERB_SCHEME=https
PUSHER_APP_ID=...
PUSHER_APP_KEY=rtk_...
PUSHER_APP_SECRET=rts_...
PUSHER_HOST=<your realtime host>
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1
VITE_REVERB_APP_KEY=rtk_...
VITE_REVERB_HOST=<your realtime host>
VITE_REVERB_PORT=443
VITE_REVERB_SCHEME=https
VITE_PUSHER_APP_KEY=rtk_...
VITE_PUSHER_HOST=<your realtime host>
VITE_PUSHER_PORT=443
VITE_PUSHER_SCHEME=https
VITE_PUSHER_APP_CLUSTER=mt1

The VITE_* values are also passed to the build, because Vite bakes them into your JavaScript. On an SSR or hybrid app they arrive as Worker bindings (env.REVERB_APP_KEY and so on), with the secret bound as a secret.

Laravel#

Run php artisan install:broadcasting --reverb in your project if you have not already. It adds the reverb connection, resources/js/echo.js, and routes/channels.php. The stock files from Laravel 11 and 12 work unchanged.

config/broadcasting.php:

'reverb' => [
    'driver' => 'reverb',
    'key' => env('REVERB_APP_KEY'),
    'secret' => env('REVERB_APP_SECRET'),
    'app_id' => env('REVERB_APP_ID'),
    'options' => [
        'host' => env('REVERB_HOST'),
        'port' => env('REVERB_PORT', 443),
        'scheme' => env('REVERB_SCHEME', 'https'),
        'useTLS' => env('REVERB_SCHEME', 'https') === 'https',
    ],
],

resources/js/echo.js:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

Channels and authorisation#

Public channels need no setup. Private and presence channels are authorised by your own app at POST /broadcasting/auth (added by Broadcast::routes()), signed with the app secret. The socket server never sees your users.

// routes/channels.php
use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('orders.{order}', function ($user, App\Models\Order $order) {
    return $user->id === $order->user_id;
});

// Anywhere in the app
broadcast(new App\Events\OrderShipped($order));

Echo.private(`orders.${orderId}`).listen('OrderShipped', (e) => console.log(e));

For a step-by-step walkthrough, see Laravel broadcasting with Realtime.

Node and other stacks#

Any Pusher client and server SDK works.

In the browser:

import Pusher from 'pusher-js';

const pusher = new Pusher('rtk_...', {
  wsHost: '<your realtime host>',
  wssPort: 443,
  forceTLS: true,
  enabledTransports: ['ws', 'wss'],
  cluster: 'mt1',
});

pusher.subscribe('orders').bind('order.shipped', (data) => console.log(data));

On the server, with the pusher npm package:

import Pusher from 'pusher';

const pusher = new Pusher({
  appId: process.env.PUSHER_APP_ID,
  key: process.env.PUSHER_APP_KEY,
  secret: process.env.PUSHER_APP_SECRET,
  host: process.env.PUSHER_HOST,
  port: '443',
  useTLS: true,
});

await pusher.trigger('orders', 'order.shipped', { id: 42 });

In a Worker, read the same values from env instead of process.env. The pusher package signs with Node crypto, so the Worker needs the nodejs_compat flag.

Client events#

Client events let browsers send client-* events to each other on private and presence channels, such as Echo's whisper. They are off by default. To turn them on, open the Realtime card, go to Settings, turn on Client events, and choose Save. The sender does not receive its own event.

Try it#

The Try it tab connects the dashboard to your Realtime app on a throwaway public channel. Choose Connect, then Send test event. When the event shows up in the log, Realtime works end to end. The latency shown includes the trip through dply.

Sleep and wake#

Choose Sleep on the Realtime card to stop it. Open sockets are closed, and new connections and publishes are refused until you choose Wake. The app keeps its keys, so waking takes effect without a redeploy.

Rotate the secret#

Open Credentials and choose Rotate secret. A new secret is made at once. Browsers keep working because the key does not change, but the running app keeps signing with the old secret, so its broadcasts are refused until you redeploy.

The key is public: browsers use it to connect. The secret is only given to the app and is never shown in the dashboard.

Change settings#

On the Settings tab you can change Max connections, Allowed origins, and Client events, then choose Save. No redeploy is needed. Open sockets keep their old limits until they reconnect.

Limits#

Error codes a client may see:

Apps with more than 10,000 connections are spread across several servers automatically. Presence and client events work across them.

Pricing#

Realtime is billed on connection-minutes (one socket open for one minute) and messages (each publish; delivering it to sockets is free, so a broadcast to 1,000 listeners is one message), every unit from the first:

This bills at the invoice line Realtime. Connections per app are capped by plan:

The Overview tab shows open connections, the peak, this month's messages, and this month's cost. Usage is collected every hour.

Delete Realtime#

Open the Realtime card and choose Delete Realtime, then Delete resource. Every browser is disconnected, usage up to that moment is billed, and the app loses its Realtime keys on the next deploy. This cannot be undone.

Related#

• Laravel broadcasting with Realtime
• Environment variables
• Usage & metering