WebContent/WEB-INF/jsp/pc/game1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>客户发消息</title>
<style type="text/css">
#connect-container {
	float: left;
	width: 400px
}

#connect-container div {
	padding: 5px;
}

#console-container {
	float: left;
	margin-left: 15px;
	width: 400px;
}

#console {
	border: 1px solid #CCCCCC;
	border-right-color: #999999;
	border-bottom-color: #999999;
	height: 170px;
	overflow-y: scroll;
	padding: 5px;
	width: 100%;
}

#console p {
	padding: 0;
	margin: 0;
}
</style>

<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>

<script type="text/javascript">
	var ws = null;
	var url = null;
	var transports = [];

	connect();
	function connect() {

		if (ws != null && (ws.readyState == 1 || ws.readyState == 2))
			return;//判断是否已成功连接,已成功连接不在执行
		if (ws != null)
			ws.close();

		ws = new WebSocket('ws://mini.weiyisz.com/zzhnc/web/socket/77/1');

		ws.onopen = function() {
			console.log("连接服务器成功");
		};

		ws.onmessage = function(event) {
			log('Received: ' + event.data);
		};

		ws.onclose = function() {
		};
	}

	function disconnect() {
		if (ws != null) {
			ws.close();
			ws = null;
		}
	}

	//查询数据条件
	function getSearchJson() {
		var id = Math.ceil(Math.random() * 10);
		var message = document.getElementById('message').value;
		var askfrom = document.getElementById('askfrom').value;
		var salesid = document.getElementById('salesid').value;
		var json = {
			"fansid" : 77,
			"ask" : message,
			"reply" : "",
			"askfrom" : askfrom,
			"salesid":salesid,
			"readed" : false
		};
		json = JSON.stringify(json);
		return json;
	}

	window.setInterval("connect()", 5000);
	function echo() {
		if (ws != null) {

			if (ws.readyState == 1) {
				var json = getSearchJson();
				ws.send(json);
			} else {
				//connect();
			}

		} else {
			alert('connection not established, please connect.');
		}
	}

	function updateUrl(urlPath) {
		if (urlPath.indexOf('sockjs') != -1) {
			url = urlPath;
			document.getElementById('sockJsTransportSelect').style.visibility = 'visible';
		} else {
			if (window.location.protocol == 'http:') {
				url = 'ws://' + window.location.host + urlPath;
			} else {
				url = 'wss://' + window.location.host + urlPath;
			}
			document.getElementById('sockJsTransportSelect').style.visibility = 'hidden';
		}
	}

	function updateTransport(transport) {
		transports = (transport == 'all') ? [] : [ transport ];
	}

	function log(message) {
		var console = document.getElementById('console');
		var p = document.createElement('p');
		p.style.wordWrap = 'break-word';
		p.appendChild(document.createTextNode(message));
		console.appendChild(p);
		while (console.childNodes.length > 25) {
			console.removeChild(console.firstChild);
		}
		console.scrollTop = console.scrollHeight;
	}
</script>
</head>
<body>

	<noscript>
		<h2 style="color: #ff0000">Seems your browser doesn't support
			Javascript! Websockets rely on Javascript being enabled. Please
			enable Javascript and reload this page!</h2>
	</noscript>
	<div>
		<div id="connect-container">

			<div>
				<textarea id="message" style="width: 350px">Here is a message!</textarea>
			</div>
			<div>
				万小二  :<textarea id="askfrom" style="width: 350px; height: 10">1</textarea>
			</div>
			<div>
				销售id:<textarea id="salesid" style="width: 350px; height: 10">1</textarea>
			</div>
			<div>
				<button id="echo" onclick="echo();">Echo message</button>
			</div>
		</div>
		<div id="console-container">
			<div id="console"></div>
		</div>
	</div>
</body>
</html>