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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
							<!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="js/jquery-1.7.2.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('message', function(data, ackServerCallback) {
			output('<span class="username-msg">' + data.userName + ':</span> ' + data.message);
			if (ackServerCallback) {
                                // send ack data to server
                        	ackServerCallback('server message was delivered to client!');
                        }
		});

		socket.on('disconnect', function() {
			output('<span class="disconnect-msg">The client has disconnected!</span>');
		});

		socket.on('ackevent2', function(data, ackServerCallback, arg1) {
			output('<span class="username-msg">' + data.userName + ':</span> ' + data.message);
                        if (ackServerCallback) {
                           ackServerCallback('server message was delivered to client!');
                        }
		});

		socket.on('ackevent3', function(data, ackServerCallback) {
			output('<span class="username-msg">' + data.userName + ':</span> ' + data.message);
                        if (ackServerCallback) {
                           ackServerCallback();
                        }
		});

                function sendDisconnect() {
                        socket.disconnect();
                }

		function sendMessage() {
                        var message = $('#msg').val();
                        $('#msg').val('');

                        var jsonObject = {'@class': 'com.corundumstudio.socketio.demo.ChatObject',
                                          userName: userName,
                                          message: message};

                        socket.emit('ackevent1', jsonObject, function(arg1, arg2) {
                            alert("ack from server! arg1: " + arg1 + ", arg2: " + arg2);
                        });
		}

		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>