1
Fork 0

Update lib, remove SSL toggle

Move Ready state down
This commit is contained in:
Tobias Berger 2022-01-08 16:37:12 +01:00
parent 331120b937
commit 0cf665997a
3 changed files with 17 additions and 27 deletions

View file

@ -1,5 +1,5 @@
import { FunctionComponent } from "react";
import { TextMessage } from "src/lib/types/ServerMessage";
import { TextMessage } from "src/lib/ServerMessage";
type Props = {
message: TextMessage;

@ -1 +1 @@
Subproject commit 9fc4e8f80d335abc3ab02bfc24d64afcc91f3567
Subproject commit f7cfeb92bd3b6f7387e712595ec16ed02776e0cf

View file

@ -4,16 +4,17 @@ import useWebSocket, {
ReadyState as WebSocketReadyState,
} from "react-use-websocket";
import MessageComponent from "src/components/Message";
import { MessageType, TextMessage } from "src/lib/types/ServerMessage";
import { isServerMessage, isTextMessage } from "src/lib/types/ServerMessage";
import type { TextMessage } from "src/lib/ServerMessage";
import {
isServerMessage,
isTextMessage,
MessageType,
} from "src/lib/ServerMessage";
export default function Index(): JSX.Element {
const [enableSSL, setEnableSSL] = useState(true);
const protocol = enableSSL ? "wss" : "ws";
const [count, setCount] = useState(0);
const [messageHistory, setMessageHistory] = useState<TextMessage[]>([]);
const [socketUrl, setSocketUrl] = useState("localhost:8989/");
const [socketUrl, setSocketUrl] = useState("wss.tobot.tk:8085/");
function onMessage(event: MessageEvent<string>): void {
const message = JSON.parse(event.data);
@ -29,7 +30,7 @@ export default function Index(): JSX.Element {
}
let keepAliveInterval: NodeJS.Timeout;
const websocket = useWebSocket(protocol + ":" + socketUrl, {
const websocket = useWebSocket("wss://" + socketUrl, {
onMessage,
onOpen() {
keepAliveInterval = setInterval(() => {
@ -47,7 +48,7 @@ export default function Index(): JSX.Element {
const handleClickSendMessage = useCallback(() => {
setCount(count + 1);
const message: TextMessage = {
author: "AUTHOR NOT IMPLEMENTED YET",
author: -1,
type: MessageType.TEXT,
date: Date.now(),
content: `Hello, world! ${count}`,
@ -58,7 +59,7 @@ export default function Index(): JSX.Element {
const trySetSocketUrl = useCallback(
(url: string) => {
try {
console.log(new URL(protocol + ":" + url), url);
console.log(new URL("wss://" + url), url);
setSocketUrl(url);
} catch (e) {
console.debug("Invalid URL");
@ -69,19 +70,11 @@ export default function Index(): JSX.Element {
}
}
},
[websocket, protocol]
[websocket]
);
const toggleSSL = useCallback(() => {
setEnableSSL(!enableSSL);
trySetSocketUrl(socketUrl.replace(/^wss?/, protocol));
}, [enableSSL, socketUrl, trySetSocketUrl, protocol]);
return (
<>
<span>
Ready state: {ReadyState[websocket.readyState]} ({websocket.readyState})
</span>
<main>
<div id="messages-container">
{messageHistory.map((message, idx) => {
@ -89,6 +82,10 @@ export default function Index(): JSX.Element {
})}
</div>
<div id="message-writing-area">
<span>Ready state: </span>
<span style={{ fontWeight: "bold" }}>
{ReadyState[websocket.readyState]} ({websocket.readyState})
</span>
<label htmlFor="ws-url">WebSocket URL:</label>
<input
id="ws-url"
@ -96,13 +93,6 @@ export default function Index(): JSX.Element {
value={socketUrl}
onChange={(e) => trySetSocketUrl(e.target.value)}
/>
<label htmlFor="wss">Enable SSL:</label>
<input
id="wss"
type="checkbox"
checked={enableSSL}
onChange={toggleSSL}
/>
<button
disabled={websocket.readyState !== WebSocketReadyState.OPEN}
onClick={handleClickSendMessage}