start playing with websockets

src/client/GamePage.tsx

@@ -1,8 +1,9 @@
-import { Link, useParams } from "react-router-dom"
+import { Link, useParams, useSearchParams } from "react-router-dom"
 import { Pico8Console } from "./pico8-client/Pico8Console";
 import { useEffect, useState } from "react";
 import { DbRelease } from "../server/dbal/dbal";
 import { css } from "@emotion/css";
+import { useWebsocket } from "./hooks/useWebsocket";
 
 type Info = {
     release: DbRelease | null;
@@ -11,7 +12,15 @@ type Info = {
 
 export const GamePage = () => {
 	const {author, slug} = useParams();
-	// const [searchParams, setSearchParams] = useSearchParams();
+	const [searchParams, setSearchParams] = useSearchParams();
+	const room = searchParams.get('room');
+	const socket = useWebsocket({
+		url: `/api/ws/room?room=${room}`,
+		// url: "wss://echo.websocket.org",
+		onMessage({message}) {
+			console.log('message', message);
+		}
+	})
 	// const version = searchParams.get('v');
 	const [v, setVersion] = useState<string | null>(null);
 	const [info, setInfo] = useState<Info | null>(null);
@@ -87,6 +96,11 @@ export const GamePage = () => {
 					</select>
 				</div>
 			</div>
+			<div>
+				<button onClick={() => {
+					room && socket.sendMessage({room, type: "hello", name: "world"});
+				}}>Websocket</button>
+			</div>
 			{/* <div>
 				<p>This is a paragraph about this game. It is a cool game. And a cool website to play it on. It automagically connects from GitHub.</p>
 			</div> */}