12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Demo Chat</title>
- <link href="bootstrap.css" rel="stylesheet">
- <style>
- body {
- padding:20px;
- }
- #console {
- height: 400px;
- overflow: auto;
- }
- .username-msg {color:orange;}
- .connect-msg {color:green;}
- .disconnect-msg {color:red;}
- .send-msg {color:#888}
- </style>
- <script src="js/socket.io/socket.io.js"></script>
- <script src="js/moment.min.js"></script>
- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
- <script>
- var userName = 'user' + Math.floor((Math.random()*1000)+1);
- var socket = io.connect('http://localhost:9092');
- socket.on('connect', function() {
- output('<span class="connect-msg">Client has connected to the server!</span>');
- });
- socket.on('chatevent', function(data) {
- output('<span class="username-msg">' + data.userName + ':</span> ' + data.message);
- });
- socket.on('disconnect', function() {
- output('<span class="disconnect-msg">The client has disconnected!</span>');
- });
- function sendDisconnect() {
- socket.disconnect();
- }
- function sendMessage() {
- var message = $('#msg').val();
- $('#msg').val('');
- var jsonObject = {userName: userName,
- message: message};
- socket.emit('chatevent', jsonObject);
- }
- function output(message) {
- var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
- var element = $("<div>" + currentTime + " " + message + "</div>");
- $('#console').prepend(element);
- }
- $(document).keydown(function(e){
- if(e.keyCode == 13) {
- $('#send').click();
- }
- });
- </script>
- </head>
- <body>
- <h1>Netty-socketio Demo Chat</h1>
- <br/>
- <div id="console" class="well">
- </div>
- <form class="well form-inline" onsubmit="return false;">
- <input id="msg" class="input-xlarge" type="text" placeholder="Type something..."/>
- <button type="button" onClick="sendMessage()" class="btn" id="send">Send</button>
- <button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
- </form>
- </body>
- </html>
|