Laravel Echo

Use Laravel Echo with the Pusher broadcaster and Relay as a drop-in Pusher replacement. Browser clients connect to Relay; your Laravel app publishes events and can authorize private/presence channels.

Host and port in the examples match this deployment (server.relayio.dev, wsPort 6001, wssPort 443). Set RELAY_PUBLIC_WS_HOST and RELAY_PUBLIC_WS_PORT in .env so generated config matches production.

cluster: Relay is self-hosted — use any placeholder (e.g. mt1) so Echo / pusher-js initialize; Relay ignores Pusher regions.

Install

npm install --save laravel-echo pusher-js

Vite / import.meta.env

Add variables (.env with the VITE_ prefix so Vite exposes them to the client):

VITE_PUSHER_APP_KEY=your-relay-app-key
VITE_PUSHER_HOST=server.relayio.dev
VITE_PUSHER_PORT=6001
VITE_PUSHER_WSS_PORT=443
VITE_PUSHER_SCHEME=https

Use http and ws when developing locally without TLS.

resources/js/bootstrap.js:

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

window.Pusher = Pusher;

const scheme = import.meta.env.VITE_PUSHER_SCHEME ?? 'https';
const useTls = scheme === 'https';

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ?? 'server.relayio.dev',
    wsPort: Number(import.meta.env.VITE_PUSHER_PORT ?? 6001),
    wssPort: Number(import.meta.env.VITE_PUSHER_WSS_PORT ?? 443),
    forceTLS: useTls,
    encrypted: useTls,
    disableStats: true,
    enabledTransports: ['ws', 'wss'],
    cluster: 'mt1',
});

Subscribe to channels as usual:

window.Echo.channel('orders').listen('OrderShipped', (e) => {
    console.log(e.order);
});

Laravel .env (broadcasting)

Point broadcasting at Relay using Laravel’s usual Pusher variable names (values come from your Relay app / deployment):

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret
PUSHER_HOST=server.relayio.dev
PUSHER_PORT=6001
PUSHER_SCHEME=https

Set PUSHER_SCHEME to http or https to match your app URL. Ensure config/broadcasting.php connections use these env('PUSHER_*') values so server-side broadcasts reach Relay (or your API gateway that fronts Relay).

Private / presence channels

Configure routes/channels.php and authorization as in Laravel’s docs. Relay accepts the same Pusher-style auth signatures your Laravel app generates.

Raw WebSocket URL helper

In the Relay dashboard we expose window.relayPublicWebSocketUrl(key) for non-Echo clients. This docs page includes the same helper — open DevTools and try:

window.relayPublicWebSocketUrl('your-app-key');

See also