1
Fork 0

Better name change handling

This commit is contained in:
Tobias Berger 2022-02-04 11:14:55 +00:00 committed by GitHub
parent 60021f9f4d
commit c3e79ef0c7
2 changed files with 47 additions and 23 deletions

View file

@ -1,4 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { ReadyState as WebSocketReadyState } from "react-use-websocket";
export type ConnectionOptions = { export type ConnectionOptions = {
desiredName?: string; desiredName?: string;
url: string; url: string;
@ -6,10 +8,12 @@ export type ConnectionOptions = {
export type ConnectComponentProps = { export type ConnectComponentProps = {
tryConnect(opts: ConnectionOptions): void; tryConnect(opts: ConnectionOptions): void;
webSocketReadyState: WebSocketReadyState;
}; };
export default function Connect({ export default function Connect({
tryConnect, tryConnect,
webSocketReadyState,
}: ConnectComponentProps): JSX.Element { }: ConnectComponentProps): JSX.Element {
const [socketUrl, setSocketUrl] = useState("wss.tobot.tk:8085/"); const [socketUrl, setSocketUrl] = useState("wss.tobot.tk:8085/");
const [desiredName, setDesiredName] = useState<string | undefined>(undefined); const [desiredName, setDesiredName] = useState<string | undefined>(undefined);
@ -32,14 +36,23 @@ export default function Connect({
onChange={(e) => setDesiredName(e.target.value)} onChange={(e) => setDesiredName(e.target.value)}
/> />
<button <button
onClick={() => onClick={() => {
console.debug("CLICK");
tryConnect({ tryConnect({
url: socketUrl, url: socketUrl,
desiredName: desiredName === "" ? undefined : desiredName, desiredName: desiredName === "" ? undefined : desiredName,
}) });
} }}
> >
Connect {webSocketReadyState === WebSocketReadyState.CONNECTING
? "Connecting..."
: webSocketReadyState === WebSocketReadyState.OPEN
? "Change nickname"
: webSocketReadyState === WebSocketReadyState.CLOSING
? "Disconnecting..."
: webSocketReadyState === WebSocketReadyState.CLOSED
? "Connect"
: "UNEXPECTED STATE"}
</button> </button>
</> </>
); );

View file

@ -96,32 +96,40 @@ export default function Index(): JSX.Element {
(interval) => interval !== keepAliveInterval (interval) => interval !== keepAliveInterval
); );
}, },
onError(e) {
console.error(2, e);
},
}); });
const tryConnect = useCallback( const tryConnect = useCallback(
(opts: ConnectionOptions) => { (opts: ConnectionOptions) => {
// Don't reconnect, just send new desiredName // Don't reconnect, just send new desiredName
if (opts.desiredName === desiredName) { switch (webSocket.readyState) {
setDesiredName(opts.desiredName); case WebSocketReadyState.UNINSTANTIATED:
webSocket.sendJsonMessage({ throw new Error("socket is not instantiated. This should not happen");
type: MessageType.DESIRED_NAME, case WebSocketReadyState.CLOSED:
date: Date.now(), setConnectedUsers([]);
desiredName: opts.desiredName, setMessageHistory([]);
} as DesiredNameMessage); setAuthorId("");
} else {
webSocket.getWebSocket()?.close();
setConnectedUsers([]);
setMessageHistory([]);
setAuthorId("");
setDesiredName(opts.desiredName); setDesiredName(opts.desiredName);
setSocketUrl(opts.url); setSocketUrl(opts.url);
return;
case WebSocketReadyState.CLOSING:
case WebSocketReadyState.CONNECTING:
console.debug("WebSocket is already connecting or closing");
return;
case WebSocketReadyState.OPEN:
if (opts.desiredName === desiredName) {
return;
}
setDesiredName(opts.desiredName);
webSocket.sendJsonMessage({
type: MessageType.DESIRED_NAME,
date: Date.now(),
desiredName: opts.desiredName,
} as DesiredNameMessage);
return;
} }
}, },
[desiredName, webSocket] [webSocket, desiredName]
); );
const trySendMessage = useCallback(() => { const trySendMessage = useCallback(() => {
@ -208,7 +216,10 @@ export default function Index(): JSX.Element {
Your ID: <span style={{ fontWeight: "bold" }}>{authorId}</span> Your ID: <span style={{ fontWeight: "bold" }}>{authorId}</span>
</> </>
)}{" "} )}{" "}
<Connect tryConnect={tryConnect} /> <Connect
tryConnect={tryConnect}
webSocketReadyState={webSocket.readyState}
/>
<span>Ready state: </span> <span>Ready state: </span>
<span style={{ fontWeight: "bold" }}> <span style={{ fontWeight: "bold" }}>
{WebSocketReadyState[webSocket.readyState]} ({webSocket.readyState}) {WebSocketReadyState[webSocket.readyState]} ({webSocket.readyState})