| <!doctype html> |
| <html> |
| <head> |
| <script type="text/javascript"> |
| window.buttonEl; |
| window.outputEl; |
| |
| function handleListen() { |
| const socket = new WebSocket("ws://localhost:3000/ws"); |
| window.buttonEl.setAttribute("hidden", "true"); |
| |
| socket.addEventListener("message", (event) => { |
| try { |
| const data = JSON.parse(event.data); |
| |
| if (!data.hasOwnProperty("type")) { |
| window.outputEl.innerHTML += `<p>${data.from} says to ${data.to}: ${data.content}<p></br></br>`; |
| return; |
| } |
| |
| |
| if (data?.type === "WAITING_ON_INPUT") { |
| |
| setTimeout(() => { |
| console.log( |
| "We are waiting for feedback from the socket. Will timeout in 30s..." |
| ); |
| const feedback = window.prompt( |
| "We are waiting for feedback from the socket. Will timeout in 30s..." |
| ); |
| !!feedback |
| ? socket.send( |
| JSON.stringify({ type: "awaitingFeedback", feedback }) |
| ) |
| : socket.send( |
| JSON.stringify({ |
| type: "awaitingFeedback", |
| feedback: "exit", |
| }) |
| ); |
| return; |
| }, 800); |
| } |
| } catch (e) { |
| console.error("Failed to parse data"); |
| } |
| }); |
| |
| socket.addEventListener("close", (event) => { |
| window.outputEl.innerHTML = `<p>Socket connection closed. Test is complete.<p></br></br>`; |
| window.buttonEl.removeAttribute("hidden"); |
| }); |
| } |
| |
| window.addEventListener("load", function () { |
| window.buttonEl = document.getElementById("listen"); |
| window.outputEl = document.getElementById("output"); |
| window.buttonEl.addEventListener("click", handleListen); |
| }); |
| </script> |
| </head> |
|
|
| <body> |
| <button type="button" id="listen">Open websocket connection chat</button> |
| <div id="output"></div> |
| </body> |
| </html> |
|
|
