chat_client.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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>