Real-Time

Broadcasting

Broadcast your server-side events to your frontend via WebSockets. Supported drivers include Pusher, Ably, and a local log driver for debugging.

Configuration

Setup your broadcaster credentials in config/app.ts.

src/config/app.ts

1// src/config/app.ts
2export const config = {
3  // ...
4  broadcasting: {
5    default: 'pusher',
6    connections: {
7      pusher: {
8        driver: 'pusher',
9        key: process.env.PUSHER_APP_KEY,
10        secret: process.env.PUSHER_APP_SECRET,
11        appId: process.env.PUSHER_APP_ID,
12        options: {
13          host: 'api.pusherapp.com',
14          encrypted: true,
15        }
16      },
17      ably: {
18        driver: 'ably',
19        key: process.env.ABLY_KEY,
20      },
21      log: {
22        driver: 'log', // Useful for debugging
23      }
24    }
25  }
26};

Server-Side Events

Implement the Broadcasts interface on your event classes to make them broadcastable.

events/OrderUpdated.ts

1import { Dispatchable, Broadcasts } from 'canxjs';
2
3export class OrderUnpdated implements Dispatchable, Broadcasts {
4  constructor(public order: Order) {}
5
6  // The channel to broadcast on
7  broadcastOn() {
8    return ['orders.' + this.order.id];
9  }
10
11  // The event name (optional, defaults to class name)
12  broadcastAs() {
13    return 'order.updated';
14  }
15  
16  // Data to send
17  broadcastWith() {
18    return {
19      status: this.order.status,
20      updated_at: new Date()
21    };
22  }
23}
24
25// Dispatch
26await new OrderUpdated(order).dispatch();

Client-Side Consumption

CanxJS events are compatible with Laravel Echo. You can use the standard Echo client to listen for events.

frontend/app.js

1import Echo from 'laravel-echo';
2import Pusher from 'pusher-js';
3
4window.Pusher = Pusher;
5
6const echo = new Echo({
7    broadcaster: 'pusher',
8    key: 'your-pusher-key',
9    cluster: 'mt1',
10    forceTLS: true
11});
12
13echo.channel('orders.1')
14    .listen('order.updated', (e) => {
15        console.log('Order Updated:', e.status);
16    });

Need Two-Way Communication?

For interactive features like chat, check out WebSockets (Gateways).