Realtime Events

PocketBase pushes realtime messages to browsers over server-sent events. In PocketPages, page code sends, and browsers receive.

Sending from a page

Turn on the realtime plugin and call ctx.realtime.send():

// pb_pages/+config.js
module.exports = { plugins: ['realtime'] }

// pb_pages/rooms/[id]/+api.js
module.exports = {
  post(ctx) {
    ctx.realtime.send(`rooms/${ctx.params.id}/delta`, ctx.req.body())
    return ctx.res.json({ ok: true })
  },
}

Limit recipients with a filter:

ctx.realtime.send('alerts', 'Hi', { filter: (client) => !!client.get('auth') })

Page code can't subscribe to realtime topics itself; it only sends.

Receiving in the browser

Use the PocketBase JS SDK:

const pb = new PocketBase(location.origin)

const unsubscribe = await pb.realtime.subscribe(`rooms/${ROOM_ID}/delta`, (e) => {
  console.log('Received delta:', e)
})

// Later
unsubscribe()

The SDK reconnects on its own and resubscribes to its topics after a reconnect.

Hypermedia

To push HTML instead of data, see HTMX Integration and the Datastar plugin.