fix(frontend): ws replacement

This commit is contained in:
h
2026-01-21 02:07:44 +01:00
parent 4cb1585f53
commit 9d579d9b9f
2 changed files with 29 additions and 5 deletions

View File

@@ -12,13 +12,17 @@ type PollingContext = {
export function hasWebSocketSupport(): boolean { export function hasWebSocketSupport(): boolean {
if (typeof window === 'undefined') return true; if (typeof window === 'undefined') return true;
try { try {
return 'WebSocket' in window && typeof WebSocket !== 'undefined'; const hasWs = 'WebSocket' in window && typeof WebSocket !== 'undefined';
} catch { console.log('[convex-polling] WebSocket check:', hasWs);
return hasWs;
} catch (e) {
console.log('[convex-polling] WebSocket check error:', e);
return false; return false;
} }
} }
export function setupPollingConvex(url: string): void { export function setupPollingConvex(url: string): void {
console.log('[convex-polling] Setting up polling client with URL:', url);
const client = new ConvexHttpClient(url); const client = new ConvexHttpClient(url);
setContext<PollingContext>(POLLING_CONTEXT_KEY, { client }); setContext<PollingContext>(POLLING_CONTEXT_KEY, { client });
} }
@@ -63,22 +67,27 @@ export function usePollingQuery<Query extends FunctionReference<'query'>>(
async function poll() { async function poll() {
const args = argsGetter(); const args = argsGetter();
if (args === 'skip') { if (args === 'skip') {
console.log('[convex-polling] Skipping query (args=skip)');
state.isLoading = false; state.isLoading = false;
return; return;
} }
const argsJson = JSON.stringify(args); const argsJson = JSON.stringify(args);
if (argsJson !== lastArgsJson) { if (argsJson !== lastArgsJson) {
console.log('[convex-polling] Args changed, setting loading');
state.isLoading = true; state.isLoading = true;
lastArgsJson = argsJson; lastArgsJson = argsJson;
} }
try { try {
console.log('[convex-polling] Polling query with args:', args);
const result = await client.query(query, args); const result = await client.query(query, args);
console.log('[convex-polling] Query result:', result);
state.data = result; state.data = result;
state.error = null; state.error = null;
state.isLoading = false; state.isLoading = false;
} catch (err) { } catch (err) {
console.error('[convex-polling] Query error:', err);
state.error = err instanceof Error ? err : new Error(String(err)); state.error = err instanceof Error ? err : new Error(String(err));
state.isLoading = false; state.isLoading = false;
} }

View File

@@ -10,6 +10,7 @@
const usePolling = getContext<boolean>('convex-use-polling') ?? false; const usePolling = getContext<boolean>('convex-use-polling') ?? false;
let mnemonic = $derived(page.params.mnemonic); let mnemonic = $derived(page.params.mnemonic);
let debugInfo = $state('');
const chatDataWs = usePolling const chatDataWs = usePolling
? null ? null
@@ -97,11 +98,25 @@
</svelte:head> </svelte:head>
<div class="min-h-dvh bg-black text-white"> <div class="min-h-dvh bg-black text-white">
<div
class="fixed top-1 right-1 z-50 max-w-[200px] rounded bg-neutral-900 p-1 text-[8px] break-all text-neutral-500"
>
mode: {usePolling ? 'polling' : 'websocket'}<br />
mnemonic: {mnemonic}<br />
loading: {chatData.isLoading}<br />
error: {chatData.error?.message ?? 'none'}<br />
data: {chatData.data ? 'yes' : 'no'}
</div>
{#if chatData.isLoading} {#if chatData.isLoading}
<div class="flex min-h-dvh items-center justify-center text-neutral-500">Loading...</div> <div class="flex min-h-dvh items-center justify-center text-neutral-500">
Loading... ({usePolling ? 'polling' : 'ws'})
</div>
{:else if chatData.error} {:else if chatData.error}
<div class="flex min-h-dvh items-center justify-center text-red-500"> <div class="flex min-h-dvh flex-col items-center justify-center gap-2 p-4 text-red-500">
Error: {chatData.error.toString()} <div>Error:</div>
<div class="max-w-full text-xs break-all">{chatData.error.message}</div>
<div class="text-[10px] text-neutral-500">Mode: {usePolling ? 'polling' : 'websocket'}</div>
</div> </div>
{:else if !chatData.data} {:else if !chatData.data}
<div class="flex min-h-dvh items-center justify-center text-neutral-500">Chat not found</div> <div class="flex min-h-dvh items-center justify-center text-neutral-500">Chat not found</div>