ack-index.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Demo Chat</title>
  6. <link href="bootstrap.css" rel="stylesheet">
  7. <style>
  8. body {
  9. padding:20px;
  10. }
  11. #console {
  12. height: 400px;
  13. overflow: auto;
  14. }
  15. .username-msg {color:orange;}
  16. .connect-msg {color:green;}
  17. .disconnect-msg {color:red;}
  18. .send-msg {color:#888}
  19. </style>
  20. <script src="js/socket.io/socket.io.js"></script>
  21. <script src="js/moment.min.js"></script>
  22. <script src="js/jquery-1.7.2.min.js"></script>
  23. <script>
  24. var userName = 'user' + Math.floor((Math.random()*1000)+1);
  25. var socket = io.connect('http://localhost:9092');
  26. socket.on('connect', function() {
  27. output('<span class="connect-msg">Client has connected to the server!</span>');
  28. });
  29. socket.on('message', function(data, ackServerCallback) {
  30. output('<span class="username-msg">' + data.userName + ':</span> ' + data.message);
  31. if (ackServerCallback) {
  32. // send ack data to server
  33. ackServerCallback('server message was delivered to client!');
  34. }
  35. });
  36. socket.on('disconnect', function() {
  37. output('<span class="disconnect-msg">The client has disconnected!</span>');
  38. });
  39. socket.on('ackevent2', function(data, ackServerCallback, arg1) {
  40. output('<span class="username-msg">' + data.userName + ':</span> ' + data.message);
  41. if (ackServerCallback) {
  42. ackServerCallback('server message was delivered to client!');
  43. }
  44. });
  45. socket.on('ackevent3', function(data, ackServerCallback) {
  46. output('<span class="username-msg">' + data.userName + ':</span> ' + data.message);
  47. if (ackServerCallback) {
  48. ackServerCallback();
  49. }
  50. });
  51. function sendDisconnect() {
  52. socket.disconnect();
  53. }
  54. function sendMessage() {
  55. var message = $('#msg').val();
  56. $('#msg').val('');
  57. var jsonObject = {'@class': 'com.corundumstudio.socketio.demo.ChatObject',
  58. userName: userName,
  59. message: message};
  60. socket.emit('ackevent1', jsonObject, function(arg1, arg2) {
  61. alert("ack from server! arg1: " + arg1 + ", arg2: " + arg2);
  62. });
  63. }
  64. function output(message) {
  65. var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
  66. var element = $("<div>" + currentTime + " " + message + "</div>");
  67. $('#console').prepend(element);
  68. }
  69. $(document).keydown(function(e){
  70. if(e.keyCode == 13) {
  71. $('#send').click();
  72. }
  73. });
  74. </script>
  75. </head>
  76. <body>
  77. <h1>Netty-socketio Demo Chat</h1>
  78. <br/>
  79. <div id="console" class="well">
  80. </div>
  81. <form class="well form-inline" onsubmit="return false;">
  82. <input id="msg" class="input-xlarge" type="text" placeholder="Type something..."/>
  83. <button type="button" onClick="sendMessage()" class="btn" id="send">Send</button>
  84. <button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
  85. </form>
  86. </body>
  87. </html>