websockets work

2025-10-21 17:12:59 -07:00
parent 7ed8b12c4e
commit 079c47962a
5 changed files with 206 additions and 142 deletions
@@ -9,11 +9,17 @@
    <div class="content">
        <h1 class="content-title">WFC Demo</h1>

+        <ul>
+            <li>
+                <a href="/ws-test-echo.html">Websocket Echo Test</a>
+            </li>
+        </ul>
+
        <div class="content-body">
            <textarea id="wfc-output"
                      disabled
            ></textarea>
-            <input autofocus id="wfc-input"></textarea>
+            <input autofocus id="wfc-input"></input>

            <h2>Settings</h2>
            <input type="checkbox" checked id="auto-resize-output">Auto-resize output</input> <br>
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Websockets echo test</title>
+    <link rel="stylesheet" href="./default.css">
+</head>
+<body>
+    <div class="content">
+        <h1 class="content-title">Websockets echo test</h1>
+
+        <div class="content-body">
+            <textarea id="wfc-output"
+                      disabled></textarea>
+            <input autofocus id="wfc-input"></input>
+        </div>
+    </div>
+
+    <script>
+        let ielt = document.getElementById('wfc-input');
+        let oelt = document.getElementById('wfc-output');
+        let ws   = new WebSocket("/ws/echo");
+
+        // when user hits any key while typing in ielt
+        function on_input_key(evt) {
+            if (evt.key === 'Enter') {
+                // don't do default thing
+                evt.preventDefault();
+                // grab contents
+                let contents = ielt.value;
+                let trimmed = contents.trim();
+                // if contents are nonempty
+                let nonempty_contents = trimmed.length > 0;
+                if (nonempty_contents) {
+                    console.log('message to server:', contents.trim());
+                    // query backend for result
+                    ws.send(contents.trim());
+
+                    // clear input
+                    ielt.value = '';
+
+                    // add to output
+                    oelt.value += '> ';
+                    oelt.value += trimmed;
+                    oelt.value += '\n';
+                }
+            }
+        }
+
+        function main() {
+            ielt.addEventListener('keydown', on_input_key);
+            ws.onmessage =
+                function (msg_evt) {
+                    console.log('message from server:', msg_evt);
+                    let msg_str = msg_evt.data;
+                    oelt.value += '< ';
+                    oelt.value += msg_str;
+                    oelt.value += '\n';
+                };
+        }
+
+        main();
+    </script>
+</body>
+</html>