deduplicate connection logic

tank-frontend/src/ClientScreen.tsx

@@ -1,7 +1,8 @@
-import {useEffect, useRef} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import './ClientScreen.css';
 import {hslToString, Theme} from './theme.ts';
 import {makeApiUrl, useMyWebSocket} from './serverCalls.tsx';
+import {ReadyState} from 'react-use-websocket';
 
 const pixelsPerRow = 352;
 const pixelsPerCol = 160;
@@ -101,6 +102,7 @@ export default function ClientScreen({theme, player}: {
     player: string | null
 }) {
     const canvasRef = useRef<HTMLCanvasElement>(null);
+    const [shouldSendMessage, setShouldSendMessage] = useState(false);
 
     const url = makeApiUrl('/screen', 'ws');
     if (player && player !== '')
@@ -109,13 +111,24 @@ export default function ClientScreen({theme, player}: {
     const {
         lastMessage,
         sendMessage,
-        getWebSocket
-    } = useMyWebSocket(url.toString(), {});
+        getWebSocket,
+        readyState
+    } = useMyWebSocket(url.toString(), {
+        onOpen: _ => setShouldSendMessage(true)
+    });
 
     const socket = getWebSocket();
     if (socket)
         (socket as WebSocket).binaryType = 'arraybuffer';
 
+    useEffect(() => {
+        if (!shouldSendMessage || readyState !== ReadyState.OPEN)
+            return;
+        setShouldSendMessage(false);
+        sendMessage('');
+    }, [readyState, shouldSendMessage]);
+
+
     useEffect(() => {
         if (lastMessage === null)
             return;
@@ -155,7 +168,7 @@ export default function ClientScreen({theme, player}: {
             if (ignore)
                 return;
 
-            sendMessage('');
+            setShouldSendMessage(true);
         };
 
         start();

tank-frontend/src/PlayerInfo.tsx

@@ -28,7 +28,6 @@ type TankInfo = {
     readonly moving: boolean;
 }
 
-
 type PlayerInfoMessage = {
     readonly name: string;
     readonly scores: Scores;
@@ -48,7 +47,8 @@ export default function PlayerInfo({player}: { player: string }) {
         readyState,
         sendMessage
     } = useMyWebSocket<PlayerInfoMessage>(url.toString(), {
-        onMessage: () => setShouldSendMessage(true)
+        onMessage: () => setShouldSendMessage(true),
+        onOpen: _ => setShouldSendMessage(true)
     });
 
     useEffect(() => {

tank-frontend/src/serverCalls.tsx

@@ -19,10 +19,10 @@ export type Player = {
     readonly scores: Scores;
 };
 
-export function useMyWebSocket<T = unknown>(url: string, options: Options) {
+export function useMyWebSocket<T = unknown>(url: string, options: Options = {}) {
     return useWebSocket<T>(url, {
         shouldReconnect: () => true,
-        reconnectAttempts: 5,
+        reconnectAttempts: 2,
         onReconnectStop: () => alert('server connection failed. please reload.'),
         ...options
     });