diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte index 0564e8ba..0d0517f4 100644 --- a/src/routes/options-flow/+page.svelte +++ b/src/routes/options-flow/+page.svelte @@ -380,52 +380,66 @@ function handleViewData(optionData) { } - async function websocketRealtimeData() { - +function sendMessage(message) { + if (socket && socket.readyState === WebSocket.OPEN) { + socket.send(message); + } else { + console.error("WebSocket is not open. Unable to send message."); + } +} +async function websocketRealtimeData() { try { - socket = new WebSocket(data?.wsURL+"/options-flow-reader"); - - - socket.addEventListener('message', (event) => { - previousCallVolume = displayCallVolume ?? 0; - if(mode === true) { + socket = new WebSocket(data?.wsURL + "/options-flow-reader"); + + socket.addEventListener("open", () => { + const ids = rawData.map(item => item.id); + + sendMessage(JSON.stringify({ ids })); + }); + + socket.addEventListener('message', (event) => { + previousCallVolume = displayCallVolume ?? 0; + if (mode === true) { try { - const newData = JSON.parse(event.data); - if(rawData?.length !== newData?.length) { - newIncomingData = true; - } + const newData = JSON.parse(event.data); + if (rawData?.length !== newData?.length) { + newIncomingData = true; + } - rawData = [...newData]; - - rawData?.forEach((item) => { - item.dte = daysLeft(item?.date_expiration); - }); - - if(ruleOfList?.length !== 0 || filterQuery?.length !== 0) { - shouldLoadWorker.set(true) - } - - if (previousCallVolume !== displayCallVolume && !muted) { - audio?.play(); - } + rawData = [...newData, ...rawData]; + // Update dte for each item + rawData.forEach((item) => { + item.dte = daysLeft(item?.date_expiration); + }); + if (ruleOfList?.length !== 0 || filterQuery?.length !== 0) { + shouldLoadWorker.set(true); + } + if (previousCallVolume !== displayCallVolume && !muted && audio) { + audio.play(); + } + } catch (e) { + console.error('Error processing WebSocket message:', e); } - catch(e) { - console.log(e) - } - } -}); - - - socket.addEventListener('close', (event) => { + } + }); + + socket.addEventListener('close', (event) => { console.log('WebSocket connection closed:', event.reason); // Handle disconnection, you might want to attempt to reconnect here + setTimeout(() => websocketRealtimeData(), 5000); // Attempt to reconnect after 5 seconds }); + + socket.addEventListener('error', (error) => { + console.error('WebSocket error:', error); + // Handle WebSocket errors here + }); + } catch (error) { console.error('WebSocket connection error:', error); // Handle connection errors here + setTimeout(() => websocketRealtimeData(), 5000); // Attempt to reconnect after 5 seconds } - } - +} function daysLeft(targetDate) { const targetTime = new Date(targetDate).getTime(); @@ -1180,7 +1194,7 @@ $: { {:else} -
+
Looks like your taste is one-of-a-kind! No matches found... yet!