From b9508173b893e1ba9fafea2ddb4007000a54425d Mon Sep 17 00:00:00 2001 From: Vinzenz Schroeter Date: Tue, 30 Apr 2024 10:52:29 +0200 Subject: [PATCH] stop reconnecting at some point so firefox does not block reconnection after reload --- tank-frontend/src/ClientScreen.tsx | 11 ++++------- tank-frontend/src/Controls.tsx | 8 +++----- tank-frontend/src/PlayerInfo.tsx | 13 ++++++++----- tank-frontend/src/serverCalls.tsx | 11 +++++++++++ 4 files changed, 26 insertions(+), 17 deletions(-) diff --git a/tank-frontend/src/ClientScreen.tsx b/tank-frontend/src/ClientScreen.tsx index 9ad4c2d..3f117b0 100644 --- a/tank-frontend/src/ClientScreen.tsx +++ b/tank-frontend/src/ClientScreen.tsx @@ -1,8 +1,7 @@ -import useWebSocket from 'react-use-websocket'; import {useEffect, useRef} from 'react'; import './ClientScreen.css'; -import {hslToString, Theme} from "./theme.ts"; -import {makeApiUrl} from './serverCalls.tsx'; +import {hslToString, Theme} from './theme.ts'; +import {makeApiUrl, useMyWebSocket} from './serverCalls.tsx'; const pixelsPerRow = 352; const pixelsPerCol = 160; @@ -77,7 +76,7 @@ function drawPixelsToCanvas( return otherTanksColor; return foreground; - } + }; const imageData = context.getImageData(0, 0, width, height, {colorSpace: 'srgb'}); const data = imageData.data; @@ -111,9 +110,7 @@ export default function ClientScreen({theme, player}: { lastMessage, sendMessage, getWebSocket - } = useWebSocket(url.toString(), { - shouldReconnect: () => true, - }); + } = useMyWebSocket(url.toString(), {}); const socket = getWebSocket(); if (socket) diff --git a/tank-frontend/src/Controls.tsx b/tank-frontend/src/Controls.tsx index 3613ddf..c709bab 100644 --- a/tank-frontend/src/Controls.tsx +++ b/tank-frontend/src/Controls.tsx @@ -1,7 +1,7 @@ import './Controls.css'; -import useWebSocket, {ReadyState} from 'react-use-websocket'; +import {ReadyState} from 'react-use-websocket'; import {useEffect} from 'react'; -import {makeApiUrl} from './serverCalls.tsx'; +import {makeApiUrl, useMyWebSocket} from './serverCalls.tsx'; export default function Controls({player}: { player: string }) { const url = makeApiUrl('/controls', 'ws'); @@ -11,9 +11,7 @@ export default function Controls({player}: { player: string }) { sendMessage, getWebSocket, readyState - } = useWebSocket(url.toString(), { - shouldReconnect: () => true, - }); + } = useMyWebSocket(url.toString(), {}); const socket = getWebSocket(); if (socket) diff --git a/tank-frontend/src/PlayerInfo.tsx b/tank-frontend/src/PlayerInfo.tsx index 8a3cfad..d53b730 100644 --- a/tank-frontend/src/PlayerInfo.tsx +++ b/tank-frontend/src/PlayerInfo.tsx @@ -1,6 +1,6 @@ -import {makeApiUrl, Scores} from './serverCalls'; +import {makeApiUrl, Scores, useMyWebSocket} from './serverCalls'; import Column from './components/Column.tsx'; -import useWebSocket, {ReadyState} from 'react-use-websocket'; +import {ReadyState} from 'react-use-websocket'; import {useEffect, useState} from 'react'; function ScoreRow({name, value}: { @@ -42,9 +42,12 @@ export default function PlayerInfo({player}: { player: string }) { const url = makeApiUrl('/player'); url.searchParams.set('name', player); - const {lastJsonMessage, readyState, sendMessage} = useWebSocket(url.toString(), { - onMessage: () => setShouldSendMessage(true), - shouldReconnect: () => true, + const { + lastJsonMessage, + readyState, + sendMessage + } = useMyWebSocket(url.toString(), { + onMessage: () => setShouldSendMessage(true) }); useEffect(() => { diff --git a/tank-frontend/src/serverCalls.tsx b/tank-frontend/src/serverCalls.tsx index d50fe87..d2cc9f5 100644 --- a/tank-frontend/src/serverCalls.tsx +++ b/tank-frontend/src/serverCalls.tsx @@ -1,3 +1,5 @@ +import useWebSocket, {Options} from 'react-use-websocket'; + export function makeApiUrl(path: string, protocol: 'http' | 'ws' = 'http') { return new URL(`${protocol}://${window.location.hostname}${path}`); } @@ -16,3 +18,12 @@ export type Player = { readonly name: string; readonly scores: Scores; }; + +export function useMyWebSocket(url: string, options: Options) { + return useWebSocket(url, { + shouldReconnect: () => true, + reconnectAttempts: 5, + onReconnectStop: () => alert('server connection failed. please reload.'), + ...options + }); +}