ws-client.html (1290B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <body> 4 <h1>Controls</h1> 5 <label for="msg">Message:</label> 6 <input id="msg" type="text" /> 7 <input id="sendbtn" type="button" value="Send" /> 8 <input id="closebtn" type="button" value="Close" /> 9 10 <h1>History</h1> 11 <div id="log"> 12 </div> 13 </body> 14 <script> 15 let input = document.getElementById("msg"); 16 let sendbtn = document.getElementById("sendbtn"); 17 let closebtn = document.getElementById("closebtn"); 18 let log = document.getElementById("log"); 19 20 let ws = new WebSocket("ws://localhost:8080"); 21 22 sendbtn.onclick = (e) => { 23 console.log("sendbtn.click"); 24 console.log(e); 25 ws.send(input.value); 26 log.innerHTML += `<p><span>Sent: ${input.value}</span></p>\n`; 27 }; 28 29 closebtn.onclick = (e) => { 30 console.log("closebtn.click"); 31 console.log(e); 32 ws.close(); 33 log.innerHTML += `<p><span>Closed websocket</span></p>\n`; 34 }; 35 36 ws.onopen = (e) => { 37 console.log("ws.onopen:"); 38 console.log(e); 39 log.innerHTML += `<p><span>Websocket connected</span></p>\n`; 40 }; 41 42 ws.onmessage = (e) => { 43 console.log("ws.onmessage:"); 44 console.log(e); 45 log.innerHTML += `<p><span>Received: ${e.data}</span></p>\n`; 46 }; 47 </script> 48 </html>