Serving one hardcoded image

2023-03-04 11:45:53 +01:00
parent 10492ad1bc
commit 36580d308f
9 changed files with 70 additions and 21 deletions
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>WebSocket Image Background</title>
+    <style>
+        /* Set margin and padding to zero to fill the entire page with the background */
+        html, body {
+            margin: 0;
+            padding: 0;
+        }
+
+        /* Stretch the background image to cover the entire page */
+        body {
+            background-image: url(http://localhost:8082/image.jpg);
+            background-size: cover;
+            background-repeat: no-repeat;
+        }
+    </style>
+</head>
+<body>
+
+<script>
+    // Create a WebSocket connection to the server
+    const ws = new WebSocket('ws://localhost:8081/ws');
+
+    // When a message is received from the server
+    ws.onmessage = function(event) {
+        // Parse the message as JSON
+        const message = JSON.parse(event.data);
+
+        // Check if the message contains an image URL
+        if (message.type === 'image' && message.url) {
+            // Set the body background to the image URL
+            document.body.style.backgroundImage = `url(${message.url})`;
+        }
+    };
+</script>
+
+</body>
+</html>