41 lines
1.1 KiB
HTML
41 lines
1.1 KiB
HTML
<!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>
|