Spaces:

PierreRouanet
/

reachy-mini-web-api-test

Running

App Files Files Community

PierreRouanet commited on 18 days ago

Commit

ec33ac6

1 Parent(s): d25dd0d

Update.

Browse files

Files changed (3) hide show

index.html +25 -21
reachy-client.js +59 -35
style.css +9 -0

index.html CHANGED Viewed

@@ -9,31 +9,35 @@
 </head>
 <body>
-    <div class="container">
-        <h1>Reachy Mini HTTP</h1>
-        <div class="status" id="connection-status">
-            <span class="dot disconnected" id="status-dot"></span>
-            <span id="status-text">Disconnected</span>
         </div>
-        <form id="ip-form-http" style="margin-bottom: 20px;">
-            <label for="ip-input-http">Reachy IP:</label>
-            <input type="text" id="ip-input-http" name="ip" placeholder="Enter IP address" style="margin-left: 8px;">
-            <button type="submit">Connect</button>
-        </form>
-    </div>
-    <div class="container">
-        <h1>Reachy Mini WS</h1>
-        <div class="status" id="connection-status-ws">
-            <span class="dot disconnected" id="status-dot-ws"></span>
-            <span id="status-text-ws">Disconnected</span>
         </div>
-        <form id="ip-form-ws" style="margin-bottom: 20px;">
-            <label for="ip-input-ws">Reachy IP:</label>
-            <input type="text" id="ip-input-ws" name="ip" placeholder="Enter IP address" style="margin-left: 8px;">
-            <button type="submit">Connect</button>
-        </form>
     </div>
     <script src="reachy-client.js"></script>
 </body>

 </head>
 <body>
+    <div class="flex-row justify-center align-center" style="margin-top: 32px;">
+        <h3>Start Reachy Mini daemon before testing connections!</h3>
+        <div class="flex-col-2">
+            <div class="container">
+                <h1>Reachy Mini HTTP</h1>
+                <div class="status" id="connection-status">
+                    <span class="dot disconnected" id="status-dot-http"></span>
+                    <span id="status-text-http">Disconnected</span>
+                </div>
+            </div>
+            <div class="container">
+                <h1>Reachy Mini WS</h1>
+                <div class="status" id="connection-status-ws">
+                    <span class="dot disconnected" id="status-dot-ws"></span>
+                    <span id="status-text-ws">Disconnected</span>
+                </div>
+            </div>
         </div>
+        <div class="container align-center">
+            <form id="ip-form">
+                <label for="ip-input">Reachy IP:</label>
+                <input type="text" id="ip-input" name="ip" placeholder="localhost" style="margin-left: 8px;">
+                <button type="submit" onclick="event.preventDefault(); tryConnect();">Connect</button>
+            </form>
         </div>
     </div>
     <script src="reachy-client.js"></script>
 </body>

reachy-client.js CHANGED Viewed

@@ -1,51 +1,75 @@
-let serverIp = 'localhost';
-function setServerIp(ip) {
-    serverIp = ip;
-    reachyClient.reachyServer = `${serverIp}:8000`;
-}
-document.addEventListener('DOMContentLoaded', () => {
-    const form = document.getElementById('server-ip-form');
-    const input = document.getElementById('server-ip-input');
-    if (form && input) {
-        form.addEventListener('submit', (e) => {
-            e.preventDefault();
-            setServerIp(input.value);
-        });
-    }
-});
 const reachyClient = {
-    getStatus: async () => {
-        const response = await fetch(`http://${reachyClient.reachyServer}/api/daemon/status`, { mode: 'cors' });
-        return response.json();
-    },
     getWsStatus: async () => {
-        const ws = new WebSocket(`ws://${reachyClient.reachyServer}/api/state/ws/full`);
-        ws.onopen = () => {
-            const statusDiv = document.getElementById('status-text-ws');
-            statusDiv.innerText = 'Connected via WebSocket';
-            ws.close();
-        };
-        ws.onerror = () => {
-            const statusDiv = document.getElementById('status-text-ws');
             statusDiv.innerText = 'WebSocket Connection Error';
-        };
     },
 };
-document.addEventListener('DOMContentLoaded', async () => {
-    const status = await reachyClient.getStatus();
-    const statusDiv = document.getElementById('status-text');
-    statusDiv.innerText = status.state;
-});
-document.addEventListener('DOMContentLoaded', async () => {
     await reachyClient.getWsStatus();
 });

+let reachyIp = 'localhost';
+let reachyPort = 8000;
 const reachyClient = {
+    getHTTPStatus: async () => {
+        const statusDiv = document.getElementById('status-text-http');
+        const statusDot = document.getElementById('status-dot-http');
+        try {
+            const resp = await fetch(`http://${reachyIp}:${reachyPort}/api/daemon/status`, { mode: 'cors' });
+            if (resp.ok) {
+                const status = await resp.json();
+                statusDiv.innerText = `Connected: ${status.state}`;
+                statusDot.classList.remove('disconnected');
+                statusDot.classList.add('connected');
+                console.log("HTTP OK");
+            } else {
+                statusDiv.innerText = 'HTTP Connection Error';
+                statusDot.classList.remove('connected');
+                statusDot.classList.add('disconnected');
+                console.log("HTTP ERROR");
+            }
+        } catch (error) {
+            statusDiv.innerText = 'HTTP Connection Error';
+            console.log("HTTP ERROR");
+        }
+    },
     getWsStatus: async () => {
+        const statusDiv = document.getElementById('status-text-ws');
+        const statusDot = document.getElementById('status-dot-ws');
+        try {
+            const ws = new WebSocket(`ws://localhost:8000/api/state/ws/full`);
+            ws.onmessage = (msg) => {
+                statusDiv.innerText = 'Connected: running';
+                statusDot.classList.remove('disconnected');
+                statusDot.classList.add('connected');
+                ws.close();
+                console.log("WS OK");
+            };
+            ws.onerror = () => {
+                const statusDiv = document.getElementById('status-text-ws');
+                statusDiv.innerText = 'WebSocket Connection Error';
+                console.log("WS ERROR");
+            };
+        } catch (error) {
             statusDiv.innerText = 'WebSocket Connection Error';
+            statusDot.classList.remove('connected');
+            statusDot.classList.add('disconnected');
+            console.log("WS ERROR");
+        }
     },
 };
+const tryConnect = async () => {
+    const ipInput = document.getElementById('ip-input');
+    reachyIp = ipInput.value || 'localhost';
+    console.log(`Trying to connect to Reachy at ${reachyIp}...`);
+    await reachyClient.getHTTPStatus();
     await reachyClient.getWsStatus();
+};
+document.addEventListener('DOMContentLoaded', () => {
+    tryConnect();
 });

style.css CHANGED Viewed

@@ -1,3 +1,12 @@
 body {
     background: #f6f8fa;
     font-family: 'Segoe UI', Arial, sans-serif;

+/* Flex row for two containers side by side */
+.flex-col-2 {
+    display: flex;
+    flex-direction: row;
+    gap: 32px;
+    justify-content: center;
+    align-items: flex-start;
+    margin-bottom: 32px;
+}
 body {
     background: #f6f8fa;
     font-family: 'Segoe UI', Arial, sans-serif;