1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8" /> 5 <title>Boost.Beast WebSocket Chat Client</title> 6</head> 7<body> 8 <h1>Boost.Beast WebSocket Chat Client</h1> 9 <p> 10 <a href="http://www.boost.org/libs/beast">Boost.Beast</a> 11 <a href="http://www.boost.org/libs/beast/example/websocket/server/chat-multi">Source Code</a> 12 </p> 13 Server URI: <input class="draw-border" id="uri" size="47" value="ws://localhost:8080" style="margin-bottom: 5px;"> 14 <button class="echo-button" id="connect">Connect</button> 15 <button class="echo-button" id="disconnect">Disconnect</button><br> 16 Your Name: <input class="draw-border" id="userName" size=47 style="margin-bottom: 5px;"><br> 17 <pre id="messages" style="width: 600px; height: 400px; white-space: normal; overflow: auto; border: solid 1px #cccccc; margin-bottom: 5px;"></pre> 18 <div style="margin-bottom: 5px;"> 19 Message<br> 20 <input class="draw-border" id="sendMessage" size="74" value=""> 21 <button class="echo-button" id="send">Send</button> 22 </div> 23 <script> 24 var ws = null; 25 function showMessage(msg) { 26 messages.innerText += msg + "\n"; 27 messages.scrollTop = messages.scrollHeight - messages.clientHeight; 28 }; 29 connect.onclick = function() { 30 ws = new WebSocket(uri.value); 31 ws.onopen = function(ev) { 32 showMessage("[connection opened]"); 33 }; 34 ws.onclose = function(ev) { 35 showMessage("[connection closed]"); 36 }; 37 ws.onmessage = function(ev) { 38 showMessage(ev.data); 39 }; 40 ws.onerror = function(ev) { 41 showMessage("[error]"); 42 console.log(ev); 43 }; 44 }; 45 disconnect.onclick = function() { 46 ws.close(); 47 }; 48 send.onclick = function() { 49 ws.send(userName.value + ": " + sendMessage.value); 50 sendMessage.value = ""; 51 }; 52 sendMessage.onkeyup = function(ev) { 53 ev.preventDefault(); 54 if (ev.keyCode === 13) { 55 send.click(); 56 } 57 } 58 </script> 59</body> 60</html> 61