import { Head } from '@inertiajs/react'; import { useCallback, useEffect, useState } from 'react'; import { AppNavbar } from '@/components/app-navbar'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { csrfToken } from '@/lib/csrf'; import { useTeamChannel } from '@/lib/use-team-channel'; import type { V5DashboardProps } from '@/types'; type RealtimeTestProps = V5DashboardProps & { currentTeam: { id: number; } | null; }; type RealtimeTestEvent = { message: string; teamId: number; sentAt: string; }; function formatLogPayload(payload: unknown): string { if (typeof payload === 'string') { return payload; } return JSON.stringify(payload, null, 2); } export default function RealtimeTest({ currentTeam, flux, projects = [], selectedProjectUuid = null, selectedEnvironmentUuid = null }: RealtimeTestProps) { const [message, setMessage] = useState('Hello from v5 realtime test'); const [isBroadcasting, setIsBroadcasting] = useState(false); const [logs, setLogs] = useState([]); const addLog = useCallback((label: string, payload?: unknown): void => { const timestamp = new Date().toLocaleTimeString(); setLogs((currentLogs) => [ `[${timestamp}] ${label}${payload === undefined ? '' : `\n${formatLogPayload(payload)}`}`, ...currentLogs, ]); }, []); useEffect(() => { if (!currentTeam) { addLog('No current team was provided to the page.'); } }, [currentTeam, addLog]); useTeamChannel( currentTeam?.id ?? null, '.v5.realtime.test', (payload) => { const event = payload as RealtimeTestEvent; addLog('Received .v5.realtime.test', event); }, { onDebug: addLog, onError: addLog }, ); async function broadcastTestEvent(): Promise { setIsBroadcasting(true); addLog('Sending POST /v5/realtime-test'); const response = await fetch('/v5/realtime-test', { method: 'POST', credentials: 'same-origin', headers: { Accept: 'application/json', 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken(), }, body: JSON.stringify({ message }), }); const payload = await response.json().catch(() => null); addLog(`POST /v5/realtime-test responded ${response.status}`, payload); setIsBroadcasting(false); } return ( <>

RealtimeTest

v5 realtime websocket test

Opens a private team channel subscription and broadcasts a manual backend event named{' '} v5.realtime.test.

Runtime state

Team ID
{currentTeam?.id ?? 'Missing'}
Echo
{typeof window !== 'undefined' && window.Echo ? 'Available' : 'Missing'}
Channel
{currentTeam ? `private-team.${currentTeam.id}` : 'Missing'}

Send test event

setMessage(event.target.value)} />

Event log

                            {logs.length === 0 ? 'No logs yet.' : logs.join('\n\n')}
); }