Minimal websocket conection to backend

src/assets/error.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
+    style="shape-rendering: auto; display: block;" width="50" height="50">
+    <circle stroke-linecap="round" fill="none" stroke="#dc2626"
+        stroke-width="8" r="32" cy="50" cx="50" data-idx="2">
+    </circle>
+</svg>

src/assets/loading.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
+    style="shape-rendering: auto; display: block;" width="50" height="50">
+    <circle stroke-linecap="round" fill="none" stroke-dasharray="50.26548245743669 50.26548245743669" stroke="#16a34a"
+        stroke-width="8" r="32" cy="50" cx="50" data-idx="2">
+    </circle>
+</svg>

src/index.tsx

@@ -4,6 +4,7 @@ import {HashRouter, Route} from "@solidjs/router";
 
 import "./index.css";
 import {Index} from "./pages/Index";
+import {Lobby} from "./pages/Lobby";
 
 const root = document.getElementById("root");
 
@@ -15,6 +16,7 @@ render(
     () => (
         <HashRouter>
             <Route path="/" component={Index} />
+            <Route path="/lobby/:id" component={Lobby} />
         </HashRouter>
     ),
     root!,

src/pages/Lobby.tsx

@@ -0,0 +1,77 @@
+import { Show, createSignal, onMount } from "solid-js";
+import LoadingIcon from "../assets/loading.svg";
+import ErrorIcon from "../assets/error.svg";
+
+enum LobbyStatus {
+    Connecting,
+    Connected,
+    Disconnected,
+    Error,
+}
+
+export function Lobby() {
+    const [status, setStatus] = createSignal(LobbyStatus.Connecting);
+    let ws: WebSocket|null = null;
+
+    const lobbyConnect = async() => {
+        ws = new WebSocket(`${import.meta.env.VITE_WS_URL}/lobby/connect`);
+
+        ws.addEventListener("open", () => {
+            console.log("Connection open!");
+            setStatus(LobbyStatus.Connected);
+        });
+
+        ws.addEventListener("message", (ev) => {
+            console.log("message from ws!");
+            console.log(ev);
+        });
+
+        ws.addEventListener("error", (ev) => {
+            console.error(ev);
+            setStatus(LobbyStatus.Error);
+        });
+
+        ws.addEventListener("close", () => {
+            console.log("connection closed");
+        });
+    };
+
+    const send = () => {
+        if (ws === null) {
+            setStatus(LobbyStatus.Disconnected);
+            return;
+        }
+
+        const message = "hello SEKAI";
+        ws.send(message);
+    };
+
+    onMount(lobbyConnect);
+
+    return (
+        <div class="w-[40rem] mx-auto bg-c-bg-2 my-4 p-4 rounded shadow-md">
+            <h1 class="text-c-on-bg text-3xl font-black pb-4">
+                Lobby
+            </h1>
+
+            <Show when={status() === LobbyStatus.Connecting}>
+                <p>
+                    <img class="inline-block h-6 animate-spin" src={LoadingIcon} alt="..." />
+                    Connecting to the lobby
+                </p>
+            </Show>
+
+            <Show when={status() === LobbyStatus.Error}>
+                <p>
+                    <img class="inline-block h-6" src={ErrorIcon} alt="..." />
+                    Error connecting to the lobby
+                </p>
+            </Show>
+
+            <Show when={status() === LobbyStatus.Connected}>
+                <button class="bg-cyan-500 p-2 rounded text-white" onClick={send}>Send message</button>
+            </Show>
+
+        </div>
+    );
+}

src/utils.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 export let backend = axios.create({
-    baseURL: `${import.meta.env.VITE_BACKEND_URL}/api`,
+    baseURL: `${import.meta.env.VITE_BACKEND_URL}`,
     headers: {
         "Authorization": `Bearer ${localStorage.getItem("UserId") ?? ""}`,
     },
@@ -9,7 +9,7 @@ export let backend = axios.create({
 
 export function set_auth_token(token: string) {
     backend = axios.create({
-        baseURL: `${import.meta.env.VITE_BACKEND_URL}/api`,
+        baseURL: `${import.meta.env.VITE_BACKEND_URL}`,
         headers: {
             "Authorization": `Bearer ${token}`,
         },