mirror of
https://gitlab.freedesktop.org/dabrain34/GstPipelineStudio.git
synced 2024-11-27 19:41:00 +00:00
61 lines
2 KiB
HTML
61 lines
2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>WebSocket JSON Example</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>WebSocket JSON Example</h1>
|
||
|
|
<button id="refresh-button">Refresh</button>
|
||
|
|
<div id="json-data">
|
||
|
|
<!-- The JSON data will be displayed here -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Create a WebSocket instance by connecting to the WebSocket server
|
||
|
|
const socket = new WebSocket("ws://127.0.0.1:8444");
|
||
|
|
|
||
|
|
// Array to store received JSON data
|
||
|
|
const jsonDataArray = [];
|
||
|
|
|
||
|
|
// Function to display JSON data
|
||
|
|
function displayData() {
|
||
|
|
const jsonDataDiv = document.getElementById("json-data");
|
||
|
|
jsonDataDiv.innerHTML = "";
|
||
|
|
|
||
|
|
// Loop through the JSON data and display it
|
||
|
|
jsonDataArray.forEach(function (data) {
|
||
|
|
const jsonElement = document.createElement("pre");
|
||
|
|
jsonElement.textContent = JSON.stringify(data, null, 2);
|
||
|
|
jsonDataDiv.appendChild(jsonElement);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Handle the message event when data is received from the WebSocket server
|
||
|
|
socket.addEventListener("message", function (event) {
|
||
|
|
// Parse the received JSON data
|
||
|
|
const jsonData = JSON.parse(event.data);
|
||
|
|
|
||
|
|
// Add the JSON data to the array
|
||
|
|
jsonDataArray.push(jsonData);
|
||
|
|
|
||
|
|
// Display the JSON data
|
||
|
|
displayData();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Attach a click event listener to the "Refresh" button
|
||
|
|
const refreshButton = document.getElementById("refresh-button");
|
||
|
|
refreshButton.addEventListener("click", function () {
|
||
|
|
// Clear the JSON data array
|
||
|
|
jsonDataArray.length = 0;
|
||
|
|
|
||
|
|
// Request new data from the WebSocket server if needed
|
||
|
|
// This could involve sending a specific message to the server
|
||
|
|
// or simply waiting for new data to arrive
|
||
|
|
|
||
|
|
// You can also add logic here to send a message to the server
|
||
|
|
// to request fresh data, if applicable
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|