index.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Hello WebSocket</title>
  5. <meta charset="UTF-8">
  6. <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  7. <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  8. <script src="/node_modules/sockjs-client/dist/sockjs.min.js"></script>
  9. <script src="/node_modules/stomp-websocket/lib/stomp.min.js"></script>
  10. <script src="/app.js"></script>
  11. <style>
  12. #main-content {
  13. margin-top: 2em;
  14. }
  15. button, input {
  16. margin-left: 1em;
  17. }
  18. .row {
  19. padding-bottom: 1em;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
  25. enabled. Please enable
  26. Javascript and reload this page!</h2></noscript>
  27. <div id="main-content" class="container">
  28. <div class="row">
  29. <div class="col-md-6">
  30. <form class="form-inline">
  31. <div class="form-group">
  32. <label for="connect">WebSocket connection:</label>
  33. <button id="connect" class="btn btn-success" type="submit">Connect</button>
  34. <button id="disconnect" class="btn btn-danger" type="submit" disabled="disabled">Disconnect
  35. </button>
  36. </div>
  37. </form>
  38. </div>
  39. <div class="col-md-6">
  40. <form class="form-inline">
  41. <div class="form-group">
  42. <label for="name">What is your name?</label>
  43. <input type="text" id="name" class="form-control" placeholder="Your name here...">
  44. </div>
  45. <button id="send" class="btn btn-primary" type="submit">Send</button>
  46. </form>
  47. </div>
  48. </div>
  49. <div class="row">
  50. <div class="col-md-12">
  51. <table id="conversation" class="table table-striped">
  52. <thead>
  53. <tr>
  54. <th>Greetings</th>
  55. </tr>
  56. </thead>
  57. <tbody id="greetings">
  58. </tbody>
  59. </table>
  60. </div>
  61. </div>
  62. </div>
  63. </body>
  64. </html>