diff --git a/server/worldanalysis/src/ETSI.ARF.OpenAPI.WorldAnalysis/wwwroot/ws.html b/server/worldanalysis/src/ETSI.ARF.OpenAPI.WorldAnalysis/wwwroot/ws.html new file mode 100644 index 0000000000000000000000000000000000000000..bf3da4b51bc53cc4b3425f72d4da5860b2b24f25 --- /dev/null +++ b/server/worldanalysis/src/ETSI.ARF.OpenAPI.WorldAnalysis/wwwroot/ws.html @@ -0,0 +1,173 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8" /> + <title></title> + <style> + table { + border: 0 + } + + .commslog-data { + font-family: Consolas, Courier New, Courier, monospace; + } + + .commslog-server { + background-color: red; + color: white + } + + .commslog-client { + background-color: green; + color: white + } + </style> +</head> +<body> + <h1>ETSI ARF - WebSocket Sample Application</h1> + <h2>Developped for ISG STF 669</h2> + <p id="stateLabel">(C) ETSI 2024</p> + + <h2>Test Connection</h2> + + <p id="stateLabel">Ready to connect...</p> + <div> + <label for="connectionUrl">WebSocket Server URL:</label> + <input id="connectionUrl" /> + <button id="connectButton" type="submit">Connect</button> + </div> + <p></p> + <div> + <label for="sendMessage">Message to send:</label> + <input id="sendMessage" disabled /> + <button id="sendButton" type="submit" disabled>Send</button> + <button id="closeButton" disabled>Close Socket</button> + </div> + + <h2>Communication Log</h2> + <table style="width: 800px"> + <thead> + <tr> + <td style="width: 100px">From</td> + <td style="width: 100px">To</td> + <td>Data</td> + </tr> + </thead> + <tbody id="commsLog"> + </tbody> + </table> + + <script> + var connectionUrl = document.getElementById("connectionUrl"); + var connectButton = document.getElementById("connectButton"); + var stateLabel = document.getElementById("stateLabel"); + var sendMessage = document.getElementById("sendMessage"); + var sendButton = document.getElementById("sendButton"); + var commsLog = document.getElementById("commsLog"); + var closeButton = document.getElementById("closeButton"); + var socket; + + var scheme = document.location.protocol === "https:" ? "wss" : "ws"; + var port = document.location.port ? (":" + document.location.port) : ""; + + connectionUrl.value = scheme + "://" + document.location.hostname + port + "/ws" ; + + function updateState() { + function disable() { + sendMessage.disabled = true; + sendButton.disabled = true; + closeButton.disabled = true; + } + function enable() { + sendMessage.disabled = false; + sendButton.disabled = false; + closeButton.disabled = false; + } + + connectionUrl.disabled = true; + connectButton.disabled = true; + + if (!socket) { + disable(); + } else { + switch (socket.readyState) { + case WebSocket.CLOSED: + stateLabel.innerHTML = "Closed"; + disable(); + connectionUrl.disabled = false; + connectButton.disabled = false; + break; + case WebSocket.CLOSING: + stateLabel.innerHTML = "Closing..."; + disable(); + break; + case WebSocket.CONNECTING: + stateLabel.innerHTML = "Connecting..."; + disable(); + break; + case WebSocket.OPEN: + stateLabel.innerHTML = "Open"; + enable(); + break; + default: + stateLabel.innerHTML = "Unknown WebSocket State: " + htmlEscape(socket.readyState); + disable(); + break; + } + } + } + + closeButton.onclick = function () { + if (!socket || socket.readyState !== WebSocket.OPEN) { + alert("socket not connected"); + } + socket.close(1000, "Closing from client"); + }; + + sendButton.onclick = function () { + if (!socket || socket.readyState !== WebSocket.OPEN) { + alert("socket not connected"); + } + var data = sendMessage.value; + socket.send(data); + commsLog.innerHTML += '<tr>' + + '<td class="commslog-client">Client</td>' + + '<td class="commslog-server">Server</td>' + + '<td class="commslog-data">' + htmlEscape(data) + '</td></tr>'; + }; + + connectButton.onclick = function() { + stateLabel.innerHTML = "Connecting"; + socket = new WebSocket(connectionUrl.value); + socket.onopen = function (event) { + updateState(); + commsLog.innerHTML += '<tr>' + + '<td colspan="3" class="commslog-data">Connection opened</td>' + + '</tr>'; + }; + socket.onclose = function (event) { + updateState(); + commsLog.innerHTML += '<tr>' + + '<td colspan="3" class="commslog-data">Connection closed. Code: ' + htmlEscape(event.code) + '. Reason: ' + htmlEscape(event.reason) + '</td>' + + '</tr>'; + }; + socket.onerror = updateState; + socket.onmessage = function (event) { + commsLog.innerHTML += '<tr>' + + '<td class="commslog-server">Server</td>' + + '<td class="commslog-client">Client</td>' + + '<td class="commslog-data">' + htmlEscape(event.data) + '</td></tr>'; + }; + }; + + function htmlEscape(str) { + return str.toString() + .replace(/&/g, '&') + .replace(/"/g, '"') + .replace(/'/g, ''') + .replace(/</g, '<') + .replace(/>/g, '>'); + } + </script> +</body> +</html> \ No newline at end of file