index.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!doctype html>
  2. <html><head>
  3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  4. <script src="http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"></script>
  5. <style>
  6. .box {
  7. width: 300px;
  8. float: left;
  9. margin: 0 20px 0 20px;
  10. }
  11. .box div, .box input {
  12. border: 1px solid;
  13. -moz-border-radius: 4px;
  14. border-radius: 4px;
  15. width: 100%;
  16. padding: 0px;
  17. margin: 5px;
  18. }
  19. .box div {
  20. border-color: grey;
  21. height: 300px;
  22. overflow: auto;
  23. }
  24. .box input {
  25. height: 30px;
  26. }
  27. h1 {
  28. margin-left: 30px;
  29. }
  30. body {
  31. background-color: #F0F0F0;
  32. font-family: "Arial";
  33. }
  34. </style>
  35. </head><body lang="en">
  36. <h1>SockJS Echo example</h1>
  37. <div id="first" class="box">
  38. <div></div>
  39. <form><input autocomplete="off" value="Type here..."></input></form>
  40. </div>
  41. <script>
  42. var sockjs_url = '/echo';
  43. var sockjs = new SockJS(sockjs_url);
  44. $('#first input').focus();
  45. var div = $('#first div');
  46. var inp = $('#first input');
  47. var form = $('#first form');
  48. var print = function(m, p) {
  49. p = (p === undefined) ? '' : JSON.stringify(p);
  50. div.append($("<code>").text(m + ' ' + p));
  51. div.append($("<br>"));
  52. div.scrollTop(div.scrollTop()+10000);
  53. };
  54. sockjs.onopen = function() {print('[*] open', sockjs.protocol);};
  55. sockjs.onmessage = function(e) {print('[.] message', e.data);};
  56. sockjs.onclose = function() {print('[*] close');};
  57. form.submit(function() {
  58. print('[ ] sending', inp.val());
  59. sockjs.send(inp.val());
  60. inp.val('');
  61. return false;
  62. });
  63. </script>
  64. </body></html>