diff --git a/polylan_submitter/src/composables/useSubmissionsWebSocket.ts b/polylan_submitter/src/composables/useSubmissionsWebSocket.ts index 2697d9e..5f5711d 100644 --- a/polylan_submitter/src/composables/useSubmissionsWebSocket.ts +++ b/polylan_submitter/src/composables/useSubmissionsWebSocket.ts @@ -1,4 +1,4 @@ -import { ref, computed, onBeforeUnmount } from 'vue' +import { ref, computed } from 'vue' import { useWebSocket } from '@vueuse/core' interface SubmissionUpdate { @@ -37,9 +37,6 @@ type WebSocketData = SubmissionUpdate | SubmissionFileUpdate | ImageCropUpdate export function useSubmissionsWebSocket(userSubmissions: any) { const isConnected = ref(false) - const reconnectAttempts = ref(0) - const maxReconnectAttempts = 10 - const reconnectDelay = ref(3000) const wsUrl = computed(() => { const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:' @@ -53,14 +50,11 @@ export function useSubmissionsWebSocket(userSubmissions: any) { } = useWebSocket(wsUrl.value, { onConnected: () => { isConnected.value = true - reconnectAttempts.value = 0 - reconnectDelay.value = 3000 console.log('✓ Connected to submissions WebSocket') }, onDisconnected: () => { isConnected.value = false - console.log('✗ Disconnected from submissions WebSocket, attempting to reconnect...') - attemptReconnect() + console.log('✗ Disconnected from submissions WebSocket') }, onError: (event) => { console.error('WebSocket error:', event) @@ -82,24 +76,16 @@ export function useSubmissionsWebSocket(userSubmissions: any) { } }, immediate: true, + // vueuse's own reconnect stops once close() is called (it also closes + // on unmount), unlike a hand-rolled setTimeout(open) that would reopen + // the socket after leaving the page. + autoReconnect: { + retries: 10, + delay: 3000, + onFailed: () => console.error('Max reconnection attempts reached'), + }, }) - const attemptReconnect = () => { - if (reconnectAttempts.value >= maxReconnectAttempts) { - console.error('Max reconnection attempts reached') - return - } - - reconnectAttempts.value++ - const delay = reconnectDelay.value * Math.pow(1.5, reconnectAttempts.value - 1) - - console.log(`Reconnecting (attempt ${reconnectAttempts.value}/${maxReconnectAttempts}) in ${Math.round(delay / 1000)}s...`) - - setTimeout(() => { - open() - }, delay) - } - const handleSubmissionUpdate = (submission: SubmissionUpdate) => { const existingIndex = userSubmissions.value.findIndex((s: any) => s.id === submission.id) @@ -143,10 +129,6 @@ export function useSubmissionsWebSocket(userSubmissions: any) { }) } - onBeforeUnmount(() => { - close() - }) - return { isConnected, status,