index.html 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  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="http://code.jquery.com/jquery-1.10.1.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('chatevent', function(data) {
  30. output('<span class="username-msg">' + data.userName + ':</span> ' + data.message);
  31. });
  32. socket.on('disconnect', function() {
  33. output('<span class="disconnect-msg">The client has disconnected!</span>');
  34. });
  35. function sendDisconnect() {
  36. socket.disconnect();
  37. }
  38. function sendMessage() {
  39. var message = $('#msg').val();
  40. $('#msg').val('');
  41. var jsonObject = {userName: userName,
  42. message: message};
  43. socket.emit('chatevent', jsonObject);
  44. }
  45. function output(message) {
  46. var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
  47. var element = $("<div>" + currentTime + " " + message + "</div>");
  48. $('#console').prepend(element);
  49. }
  50. $(document).keydown(function(e){
  51. if(e.keyCode == 13) {
  52. $('#send').click();
  53. }
  54. });
  55. </script>
  56. </head>
  57. <body>
  58. <h1>Netty-socketio Demo Chat</h1>
  59. <br/>
  60. <div id="console" class="well">
  61. </div>
  62. <form class="well form-inline" onsubmit="return false;">
  63. <input id="msg" class="input-xlarge" type="text" placeholder="Type something..."/>
  64. <button type="button" onClick="sendMessage()" class="btn" id="send">Send</button>
  65. <button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
  66. </form>
  67. </body>
  68. </html>