david
/
Zheng
mirror of https://github.com/shuzheng/zheng.git


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
							<!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('');
                        socket.emit('chatevent', {userName: userName, message: message});
		}

		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>