Live Dashboards

import { NoLagApi } from '@nolag/js-sdk'

const api = new NoLagApi(process.env.NOLAG_API_KEY) // nlg_live_...

// 1. Create the app and declare the topics it allows. The slug that comes back
//    has a random suffix, so read it from the response.
const app = await api.apps.create({
  name: 'Analytics',
  slug: 'analytics',
  topics: ['page-views', 'active-users', 'sales', 'bookings'],
})
console.log(app.slug) // e.g. "analytics-a3f9": this is your APP_SLUG

// 2. Create the rooms. Room slugs are kept exactly as you supply them.
await api.rooms.create(app.appId, { name: 'Live metrics', slug: 'live' })
await api.rooms.create(app.appId, { name: 'Operations', slug: 'ops' })

// 3. One actor per role. Each access token is shown once; keep both.
const publisher = await api.actors.create({ name: 'metrics-service', actorType: 'service' })
const dashboard = await api.actors.create({ name: 'dashboard', actorType: 'user' })
console.log(publisher.accessToken, dashboard.accessToken)

import { NoLag } from '@nolag/js-sdk'

const APP_SLUG = 'analytics-a3f9' // the slug returned when you created the app

interface Metric {
  count: number
  timestamp: number
}

interface Sale {
  amount: number
  timestamp: number
}

const client = NoLag('dashboard_access_token')
client.on('error', (err) => console.error(err)) // unknown_topic etc. arrive here
await client.connect()

const dashboard = client.setApp(APP_SLUG).setRoom('live')

// Subscribe to real-time metrics
dashboard.subscribe('page-views')
dashboard.subscribe('active-users')
dashboard.subscribe('sales')

// Update charts in real-time. Payloads arrive as `unknown`; name the shape you expect.
dashboard.on<Metric>('page-views', (data) => {
  pageViewsChart.update(data.count, data.timestamp)
})

dashboard.on<Metric>('active-users', (data) => {
  activeUsersGauge.setValue(data.count)
})

dashboard.on<Sale>('sales', (data) => {
  salesChart.addDataPoint(data.amount, data.timestamp)
  totalSales.increment(data.amount)
})

import { NoLag } from '@nolag/js-sdk'

const APP_SLUG = 'analytics-a3f9' // the slug returned when you created the app

interface BookingUpdate {
  status: string
  guest?: string
  reason?: string
}

const client = NoLag('dashboard_access_token')
await client.connect()

// The ops room carries booking updates
const ops = client.setApp(APP_SLUG).setRoom('ops')

// User is viewing 3 specific bookings on their dashboard
const visibleBookings = ['booking_42', 'booking_87', 'booking_153']

// Subscribe with filters: only receive updates for these bookings
ops.subscribe('bookings', {
  filters: visibleBookings
})

ops.on<BookingUpdate>('bookings', (data, meta) => {
  // meta.filter tells you which booking was updated
  updateBookingCard(meta.filter, data)
})

// User navigates to a different page, swap filters instantly
function onPageChange(newBookingIds: string[]) {
  ops.setFilters('bookings', newBookingIds)
}

// User opens a booking detail, add it to filters
function onBookingOpen(bookingId: string) {
  ops.addFilters('bookings', [bookingId])
}

// User closes a booking detail, remove it
function onBookingClose(bookingId: string) {
  ops.removeFilters('bookings', [bookingId])
}

import { NoLag } from '@nolag/js-sdk'

const APP_SLUG = 'analytics-a3f9' // the slug returned when you created the app

// Backend service: its own actor, so the dashboard actor receives what it publishes
const publisher = NoLag('metrics_service_access_token')
await publisher.connect()

const ops = publisher.setApp(APP_SLUG).setRoom('ops')

// Only dashboard users watching booking_42 receive this
ops.emit('bookings', {
  status: 'confirmed',
  guest: 'John Smith',
  checkIn: '2026-03-15'
}, {
  filter: 'booking_42' // the routing key
})

// Publish a different booking update
ops.emit('bookings', {
  status: 'cancelled',
  reason: 'Guest request'
}, {
  filter: 'booking_87'
})