Live Collaboration WireFlow

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

window.Pusher = Pusher;
window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 8080,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

import AlpineFlow from '@getartisanflow/alpineflow';
import AlpineFlowCollab, {
    ReverbProvider,
} from '@getartisanflow/alpineflow/collab';

// Expose on window so WireFlow::js() can reference it in Blade
window.ReverbProvider = ReverbProvider;

document.addEventListener('alpine:init', () => {
    window.Alpine.plugin(AlpineFlow);
    window.Alpine.plugin(AlpineFlowCollab);
});

:config="[
    'collab' => [
        'provider' => WireFlow::js('new window.ReverbProvider({
            roomId: \'' . \$roomId . '\',
            channel: \'collab-room.' . \$roomId . '\',
            user: { name: \'' . \$identity[\'name\'] . '\',
                    color: \'' . \$identity[\'color\'] . '\' },
            stateUrl: \'/api/collab/{roomId}/state\',
        })'),
        'user' => \$identity,
        'cursors' => true,
        'selections' => true,
    ],
]"

// routes/web.php
Route::post('broadcasting/auth', function (Request $request) {
    $identity = session('collab_identity');
    if (! $identity) {
        return response()->json(['error' => 'No identity'], 403);
    }

    $channelName = str_replace('private-', '', $request->input('channel_name'));
    $socketId = $request->input('socket_id');

    if (! str_starts_with($channelName, 'collab-room.')) {
        return response()->json(['error' => 'Unauthorized'], 403);
    }

    $key = config('broadcasting.connections.reverb.key');
    $secret = config('broadcasting.connections.reverb.secret');
    $signature = hash_hmac('sha256',
        $socketId . ':' . $request->input('channel_name'), $secret);

    return response()->json(['auth' => $key . ':' . $signature]);
});

// routes/channels.php

Broadcast::channel('collab-room.{roomId}', function ($user, $roomId) {
    $identity = session('collab_identity');

    if (! $identity) {
        return false;
    }

    // Return user info — this becomes the awareness data
    // other clients see (name label, cursor color)
    return [
        'id' => $identity['id'],
        'name' => $identity['name'],
        'color' => $identity['color'],
    ];
});

// app/Services/CollabRoomManager.php

public function findOrCreateRoom(): ?string
{
    $rooms = Cache::get('collab:rooms', []);
    $totalUsers = 0;

    foreach ($rooms as $roomId) {
        // Stale room? Cache expired — clean it up
        if (! Cache::has("collab:room:{$roomId}:count")) {
            continue;
        }

        $count = Cache::get("collab:room:{$roomId}:count", 0);
        $totalUsers += $count;

        if ($count < config('collab.max_per_room')) {
            $this->refreshTtl($roomId); // Keep it alive
            return $roomId;
        }
    }

    if ($totalUsers >= config('collab.max_total')) {
        return null; // All rooms full
    }

    // Create new room with 5-minute TTL
    $roomId = 'room-' . Str::random(8);
    Cache::put("collab:room:{$roomId}:count", 0,
        now()->addMinutes(10));
    return $roomId;
}

// config/reverb.php → apps

// Allow whispers (client events) from private channels
// Valid values: 'all' or 'members' (presence only)
// Default 'members' silently drops whispers on private channels
'accept_client_events_from' => 'all',

// Yjs updates can be large — default 10KB is too small
'max_message_size' => 500_000, // 500KB
'max_request_size' => 500_000, // 500KB

/* theme-artisanflow.css */
.flow-node.flow-node-laravel {
    --flow-node-border-top: 2.5px solid #FF2D20;
    border-color: #FF2D20;
}
.flow-node.flow-node-alpine {
    --flow-node-border-top: 2.5px solid #77C1D2;
    border-color: #77C1D2;
}
/* ... reverb, horizon, forge, vapor, nova,
       pulse, pennant, sanctum, breeze, pint */

/* Usage — pass class on node creation */
$this->nodes[] = [
    'id' => 'reverb-123',
    'class' => 'flow-node-reverb',
    'data' => ['type' => 'reverb', 'label' => 'Reverb'],
];

<div x-data="{ awareness: 0, updates: 0, echoState: 'loading' }"
     x-init="
        setInterval(() => {
            // Poll Echo connection state
            echoState = Echo?.connector?.pusher?.connection?.state;

            // Bind to whisper events (once)
            const ch = Object.values(
                Echo?.connector?.pusher?.channels?.channels || {}
            )[0];
            if (ch && !ch.__debugBound) {
                ch.bind('client-yjs-awareness', () => awareness++);
                ch.bind('client-yjs-update', () => updates++);
                ch.__debugBound = true;
            }
        }, 500);
     ">
    <span>Echo: <span x-text="echoState"></span></span>
    <span>Aware: <span x-text="awareness"></span></span>
    <span>Sync: <span x-text="updates"></span></span>
</div>

// app/Http/Controllers/CollabStateController.php

// Pre-encoded Yjs state for the starter graph
private const INITIAL_STATE = 'ARyQ+IphACcB...'; // base64

public function show(string $roomId): JsonResponse
{
    // Return saved state if room has been edited, otherwise initial
    $saved = Cache::get("collab:room:{$roomId}:yjs_state");
    return response()->json([
        'state' => $saved ?? self::INITIAL_STATE,
    ]);
}

public function store(string $roomId): JsonResponse
{
    // ReverbProvider POSTs here every 5 seconds (debounced)
    Cache::put(
        "collab:room:{$roomId}:yjs_state",
        request()->input('state'),
        now()->addMinutes(5)
    );
    return response()->json(['ok' => true]);
}

<!-- WireFlow: cursor element must move into the viewport -->
<div x-flow-cursors x-init="$nextTick(() => {
    const viewport = $el.closest('.flow-container')
        ?.querySelector('.flow-viewport');
    if (viewport && !viewport.contains($el))
        viewport.appendChild($el);
})"></div>

<!-- AlpineFlow: no issue — you place it directly -->
<div x-flow-viewport>
    <div x-flow-cursors></div>
    <!-- nodes... -->
</div>

// Starter node — locked
['id' => 'laravel', 'draggable' => false, ...]

// Prevent deletion
public function deleteNode(string $nodeId): void
{
    if ($nodeId === 'laravel') return;
    // ...
}

// Particles (client-side, in x-init)
x-init="$nextTick(() => {
    const fire = () => {
        edges.filter(e => e.source === 'laravel').forEach(e => {
            $flow.sendParticle(e.id, {
                color: '#FF2D20', size: 4, duration: '1s'
            });
        });
    };
    fire();
    setInterval(fire, 1500);
})"