{% extends "base.html" %} {% block title %}Real-time Features{% endblock %} {% block content %}

Real-time Features Demo

Demonstrates Live Queries, Presence Tracking, and Real-time Collection Updates

Active Users (Presence)

Tracks who's currently online in real-time

users online
No active users

Live Queries

Subscribe to filtered real-time updates

Supports: field=value, field!=value, field>value, field<value

Filtered Events

No events received

Real-time Events Feed

All events from collections in real-time. Create, update, or delete records to see live updates.

No events yet. Start by creating, updating, or deleting records.

Code Examples

JavaScript (Browser)

// Connect to WebSocket
const ws = new WebSocket('ws://localhost:8000/api/v1/ws/realtime');

ws.onopen = () => {
  // Authenticate (optional, for protected collections)
  ws.send(JSON.stringify({ type: 'auth', token: 'YOUR_JWT_TOKEN' }));
  // Subscribe to all collections
  ws.send(JSON.stringify({ type: 'subscribe', collection: '*' }));
  // Or a specific collection with filter
  ws.send(JSON.stringify({ type: 'subscribe', collection: 'posts', filter: { status: 'published' } }));
};

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  if (msg.type === 'record.created') console.log('New record:', msg.data);
  if (msg.type === 'record.updated') console.log('Updated:', msg.data);
  if (msg.type === 'record.deleted') console.log('Deleted:', msg.data);
};

Python

import asyncio, json, websockets

async def listen():
    uri = "ws://localhost:8000/api/v1/ws/realtime"
    async with websockets.connect(uri) as ws:
        # Authenticate
        await ws.send(json.dumps({"type": "auth", "token": "YOUR_JWT_TOKEN"}))
        # Subscribe to all events
        await ws.send(json.dumps({"type": "subscribe", "collection": "*"}))
        async for message in ws:
            msg = json.loads(message)
            print(f"Event: {msg['type']}, Data: {msg.get('data')}")

asyncio.run(listen())

Connection Stats

# Get connection statistics
curl http://localhost:8000/api/v1/stats

# WebSocket endpoint
ws://localhost:8000/api/v1/ws/realtime
ws://localhost:8000/api/v1/ws/realtime?token=YOUR_JWT_TOKEN

{% endblock %}