feat(ws-tutorial): add web page used by the echo client

falconry · Jul 25, 2024 · 8ca7ba2 · 8ca7ba2
1 parent 4226ddd
commit 8ca7ba2
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 0 deletions.
diff --git a/docs/user/tutorial-websockets.rst b/docs/user/tutorial-websockets.rst
@@ -461,6 +461,7 @@ Things we've changed:
 - Added a new middleware class `AuthMiddleware` that will check the token on the first message.
 - Opening a websocket connection is now handled by the middleware.
 - The client now sends a token as the first message, if required for that route.
+- Falcon was configured to server a simple html page to use the echo websocket client for a browser.
 
 If you try to query the reports endpoint now, everything works as expected on an
 authenticated route.

diff --git a/examples/wslook/wslook/app.py b/examples/wslook/wslook/app.py
@@ -1,5 +1,6 @@
 from datetime import datetime
 import logging
+import pathlib
 
 import uvicorn
 
@@ -115,5 +116,10 @@ async def on_websocket(self, req: Request, ws: WebSocket):
 app.add_middleware(LoggerMiddleware())
 app.add_middleware(AuthMiddleware(['/reports']))
 
+# usually a web server, like Nginx or Caddy, should server static assets, but
+# for the purpose of this example we use falcon.
+static_path = pathlib.Path(__file__).parent / 'static'
+app.add_static_route('/', static_path, fallback_filename='index.html')
+
 if __name__ == '__main__':
     uvicorn.run(app, host='localhost', port=8000)  # pragma: no cover
diff --git a/examples/wslook/wslook/static/index.html b/examples/wslook/wslook/static/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>WebSocket Echo</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 100vh;
+            background-color: #f0f0f0;
+        }
+
+        #messageForm {
+            margin-bottom: 1em;
+        }
+
+        #history {
+            width: 500px;
+            height: 200px;
+            border: 1px solid #ccc;
+            padding: 1em;
+            overflow-y: scroll;
+            background-color: #fff;
+        }
+    </style>
+    <script type="text/javascript">
+        window.onload = () => {
+            const historyEl = document.getElementById('history');
+            const messageEl = document.getElementById('message')
+            // Create a new WebSocket.
+            const socket = new WebSocket('echo');
+
+            // Connection opened
+            socket.addEventListener('open', event => {
+                historyEl.textContent += 'Connected to server\n';
+            });
+
+            // Listen for messages
+            socket.addEventListener('message', event => {
+                historyEl.textContent += 'Server: ' + event.data + '\n';
+            });
+
+            // Connection closed
+            socket.addEventListener('close', event => {
+                historyEl.textContent += 'Server connection closed\n';
+            });
+
+            // Connection error
+            socket.addEventListener('error', event => {
+                console.log('Error: ', event);
+            });
+
+            // Send message to server on form submit
+            const form = document.getElementById('messageForm');
+            form.addEventListener('submit', event => {
+                event.preventDefault();
+                const message = messageEl.value
+                if (!message) {
+                    return;
+                }
+                socket.send(message);
+                historyEl.textContent += `You: ${message}\n`;
+                messageEl.value = '';
+            });
+        };
+    </script>
+</head>
+
+<body>
+    <h1>WebSocket Echo Test</h1>
+    <form id="messageForm">
+        <input type="text" id="message" placeholder="Type your message here">
+        <input type="submit" value="Send">
+    </form>
+    <pre id="history"></pre>
+</body>
+
+</html>