From 76c243c5f1720fac89549b3310022d9f1f7b987c Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Tue, 15 Mar 2022 22:39:14 -0700 Subject: [PATCH] Looks like it is working with correct socket setting from App to children Signed-off-by: James Ketrenos --- client/src/App.js | 21 +++++++++++++-------- client/src/Board.js | 25 ++++++++++++++++--------- client/src/PlayerList.js | 2 +- 3 files changed, 30 insertions(+), 18 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index b0bb211..399f623 100755 --- a/client/src/App.js +++ b/client/src/App.js @@ -34,13 +34,15 @@ import equal from "fast-deep-equal"; const Table = () => { const params = useParams(); const [ gameId, setGameId ] = useState(params.gameId ? params.gameId : undefined); - const [ ws, setWs ] = useState(); + const [ ws, setWs ] = useState(); /* tracks full websocket lifetime */ + const [connection, setConnection] = useState(undefined); /* set after ws is in OPEN */ + const [retryConnection, setRetryConnection] = useState(true); /* set when connection should be re-established */ const [ name, setName ] = useState(""); const [ error, setError ] = useState(undefined); const [ warning, setWarning ] = useState(undefined); const [ peers, setPeers ] = useState({}); const [loaded, setLoaded] = useState(false); - const [connection, setConnection] = useState(undefined); + const [state, setState] = useState(undefined); const [color, setColor] = useState(undefined); const [priv, setPriv] = useState(undefined); @@ -145,7 +147,7 @@ const Table = () => { let timer = 0; function reset() { timer = 0; - setConnection(undefined); + setRetryConnection(true); }; return _ => { if (timer) { @@ -153,7 +155,7 @@ const Table = () => { } timer = setTimeout(reset, 5000); }; - }, [setConnection]); + }, [setRetryConnection]); const resetConnection = cbResetConnection(); @@ -162,7 +164,8 @@ const Table = () => { const error = `Connection to Ketr Ketran game server failed! ` + `Connection attempt will be retried every 5 seconds.`; setError(error); - setWs(undefined); + setWs(undefined); /* clear the socket */ + setConnection(undefined); /* clear the connection */ resetConnection(); }; @@ -171,7 +174,8 @@ const Table = () => { `Attempting to reconnect...`; console.warn(`ws: close`); setError(error); - setWs(undefined); + setWs(undefined); /* clear the socket */ + setConnection(undefined); /* clear the connection */ resetConnection(); }; @@ -247,7 +251,7 @@ const Table = () => { console.log(`table - bind`); - if (!ws && !connection) { + if (!ws && !connection && retryConnection) { let loc = window.location, new_uri; if (loc.protocol === "https:") { new_uri = "wss"; @@ -258,6 +262,7 @@ const Table = () => { console.log(`Attempting WebSocket connection to ${new_uri}`); setWs(new WebSocket(new_uri)); setConnection(undefined); + setRetryConnection(false); return unbind; } @@ -282,7 +287,7 @@ const Table = () => { ws.removeEventListener('error', cbError); ws.removeEventListener('message', cbMessage); } - }, [ setWs, connection, setConnection, gameId, ws, refWsOpen, refWsMessage, refWsClose, refWsError ]); + }, [ setWs, connection, setConnection, retryConnection, setRetryConnection, gameId, ws, refWsOpen, refWsMessage, refWsClose, refWsError ]); return diff --git a/client/src/Board.js b/client/src/Board.js index af6ef8c..54c01a2 100644 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -59,13 +59,13 @@ const Board = () => { console.log(`board - render ws is ${!ws ? 'NULL' : (ws.readyState === ws.OPEN ? 'OPEN' : '!OPEN')}`); const onWsMessage = (event) => { - if (ws !== event.target) { - console.error(`Disconnect occur?`); - } if (hack !== ws) { console.error(`Setting hack`) hack = ws; } + if (ws && ws !== event.target) { + console.error(`Disconnect occur?`); + } const data = JSON.parse(event.data); switch (data.type) { case 'game-update': @@ -148,6 +148,9 @@ const Board = () => { if (!ws) { return; } refWs.current = ws; console.log('board - bind'); + if (hack !== ws) { + console.log(`board - ws and hack are different`); + } const cbMessage = e => refWsMessage.current(e); ws.addEventListener('message', cbMessage); return () => { @@ -156,7 +159,12 @@ const Board = () => { } }, [ws, refWsMessage]); useEffect(() => { - if (!ws) { return; } + console.log(`board - initial get`); + if (!ws) { + console.log(`board - initial get - no ws`); + return; + } + console.log(`board - ws is set`); ws.send(JSON.stringify({ type: 'get', fields @@ -196,7 +204,6 @@ const Board = () => { const refOnResize = useRef(onResize); useEffect(() => { refOnResize.current = onResize; }); - useEffect(() => { const cbOnResize = e => refOnResize.current(e); window.addEventListener('resize', cbOnResize); @@ -248,15 +255,15 @@ useRef didn't work... */ const sendPlacement = useCallback((type, index) => { console.log(`board - sendPlacement - ws is ${!ws ? 'NULL' : (ws.readyState === ws.OPEN ? 'OPEN' : '!OPEN')}`); - if (ws.readyState !== ws.OPEN) { - console.error(`ws is not OPEN in sendPlacement`); - } if (ws !== hack) { console.error(`hack and ws are different!`); if (refWs.current === hack) { console.log(`refWs is correct!`); + } else { + refWs.current = hack; } } + refWs.current.send(JSON.stringify({ type, index })); @@ -494,7 +501,7 @@ useRef didn't work... useEffect(() => { setCornerElements(generateCorners()); setRoadElements(generateRoads()); - }, []); + }, [setCornerElements, setRoadElements, generateCorners, generateRoads]); console.log(`board - Generate board - ${signature}`); console.log(`board - tileOrder - `, tileOrder); diff --git a/client/src/PlayerList.js b/client/src/PlayerList.js index fef7662..ab9447f 100644 --- a/client/src/PlayerList.js +++ b/client/src/PlayerList.js @@ -95,7 +95,7 @@ const PlayerList = () => { if (B.color === color) { return +1; } - return A.name.localeCompare(B.name); + return A.color.localeCompare(B.color); }); sortedPlayers.forEach(item => {