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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
							<!DOCTYPE html>
<html>
<head>

        <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 userName1 = 'user1_' + Math.floor((Math.random()*1000)+1);
                var userName2 = 'user2_' + Math.floor((Math.random()*1000)+1);

		var chat1Socket =  io.connect('http://localhost:9092/chat1');
		var chat2Socket =  io.connect('http://localhost:9092/chat2');

                function connectHandler(parentId) {
			return function() {
                            output('<span class="connect-msg">Client has connected to the server!</span>', parentId);
                        }
                }

                function messageHandler(parentId) {
                        return function(data) {
			     output('<span class="username-msg">' + data.userName + ':</span> ' + data.message, parentId);
		        }
                }

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

		function sendMessageHandler(parentId, userName, chatSocket) {
                        var message = $(parentId + ' .msg').val();
                        $(parentId + ' .msg').val('');

                        var jsonObject = {'@class': 'com.corundumstudio.socketio.demo.ChatObject',
                                          userName: userName,
                                          message: message};
                        chatSocket.json.send(jsonObject);
		}


		chat1Socket.on('connect', connectHandler('#chat1'));
                chat2Socket.on('connect', connectHandler('#chat2'));

		chat1Socket.on('message', messageHandler('#chat1'));
                chat2Socket.on('message', messageHandler('#chat2'));

		chat1Socket.on('disconnect', disconnectHandler('#chat1'));
                chat2Socket.on('disconnect', disconnectHandler('#chat2'));

                function sendDisconnect1() {
                        chat1Socket.disconnect();
                }

                function sendDisconnect2() {
                        chat2Socket.disconnect();
                }

		function sendMessage1() {
                        sendMessageHandler('#chat1', userName1, chat1Socket);
		}

		function sendMessage2() {
                        sendMessageHandler('#chat2', userName2, chat2Socket);
		}


		function output(message, parentId) {
                        var currentTime = "<span class='time'>" +  moment().format('HH:mm:ss.SSS') + "</span>";
                        var element = $("<div>" + currentTime + " " + message + "</div>");
			$(parentId + ' .console').prepend(element);
		}

        $(document).keydown(function(e){
            if(e.keyCode == 13) {
                $('#send').click();
            }
        });
	</script>
</head>

<body>

	<h1>Namespaces demo chat</h1>

	<br/>

        <div id="chat1" style="width: 49%; float: left;">
            <h4>chat1</h4>
            <div class="console well">
            </div>

            <form class="well form-inline" onsubmit="return false;">
               <input class="msg input-xlarge" type="text" placeholder="Type something..."/>
               <button type="button" onClick="sendMessage1()" class="btn" id="send">Send</button>
               <button type="button" onClick="sendDisconnect1()" class="btn">Disconnect</button>
            </form>
        </div>

        <div id="chat2" style="width: 49%; float: right;" >
            <h4>chat2</h4>
            <div class="console well">
            </div>

            <form class="well form-inline" onsubmit="return false;">
               <input class="msg input-xlarge" type="text" placeholder="Type something..."/>
               <button type="button" onClick="sendMessage2()" class="btn" id="send">Send</button>
               <button type="button" onClick="sendDisconnect2()" class="btn">Disconnect</button>
            </form>
        </div>


</body>

</html>