demo/09.chatRoom.html

$belong[layout.html]
<link rel="stylesheet" href="css/chat.style.css">
<div id="convo" data-from="shy2850">  
	<ul class="chat-thread" id="chat">
		
	</ul>
	<fieldset >
		<legend>输入面板</legend>
		<form action="#" id="form">
			<input type="text" name="msg" id="msg" style="width:300px;margin-right:20px;" placeholder="输入信息" required >
			我的名字：<input type="text" name="name" id="name" placeholder="[昵称]" required > <br><br>
			<input type="submit" value="发送">
		</form>
	</fieldset>
</div>
<script>
(function($) {
	var root = "http://webfuture.cn:8973";
	//var root = "http://localhost:8973";
	var time = "", chat = $("#chat"), name;

	while( !(name = window.prompt("请输入你的昵称进入聊天室!")) || name.match(/\s+/) );
	$("#name").val(name);

	$("#form").on("submit",function(e){
		e.preventDefault();
		var data = {
			name: $("#name").val(),
			method:"push",
			msg: $("#msg").val()
		};
		$("#msg").val("");
		$.jsonp(root,data,function(d){
			console.log( '发送成功！' );
			$("#msg").trigger("focus");
		});
	});

	window.get = function(){
		$.jsonp(root,{
			name:$("#name").val(),
			method:"pop",
			time: time
		},function(d){
			time = d.time
			d.msgList.forEach(function(m){
				chat.prepend( $('<li></li>').text(m.name+":"+m.msg) );
			});
			window.get();
		});
	}

	window.get();

	window.onbeforeunload = function(){
		$.jsonp(root,{
			name:$("#name").val(),
			method:"exit",
			time: time
		});
	};
})(wfQuery)
</script>