xiaojincai
/
quepass_game


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>大屏首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body,
		p,
		a {
			margin: 0;
			padding: 0;
		}

		body {
			background: #ab0b0b url(img/pbg.jpg) no-repeat center top;
			background-size: 100% auto;
		}

		html,
		body {
			width: 100%;
			height: 100%;
		}

		.full {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.6);
		}

		.p-top {
			width: 80%;
			height: auto;
			display: block;
			margin: 50px auto;
		}

		.text {
			font-size: 20px;
			color: #fff;

			margin: 200px auto 50px;
			width: 900px;
		}

		.btn-box {
			margin: 0 auto;
			width: 900px;
			display: flex;
			justify-content: space-around;
		}

		.btn-box a {
			display: block;
		}
		.btn-box img{
			display: block;
			width:274px;
			height:auto;
		}
	</style>
</head>

<body>
	<div class="full">
		<!-- <img src="img/ptop.png"  class="p-top" alt=""> -->
		<p class="text">当前在线人数：<span id="nowWait">0</span></p>
		<div class="btn-box">
			<a onclick="setStatus(1)" class="btn1"><img src="img/pbtn.png"></a>
			<a onclick="setStatus(2)" class="btn2"><img src="img/pbtn2.png"></a>
		</div>
	</div>
	<script src="js/jquery.js"></script>
	<script>
		var limitConnect = 3;  // 断线重连次数
		var timeConnect = 0;
		var baseUrl = "gj.100t.com";
		var wsWaitUrl = "ws://" + baseUrl + "/ws/quepass/onlinewaiting/1000";
		var startGameUrl="http://"+baseUrl+"/api/quepass/status";
		function webSocketInit(service) {
			var ws = new WebSocket(service);
			var timer = null
			ws.onopen = function () {
				console.log("open success");
				localStorage.removeItem("lockReconnect");
				//定时发送 
				timer = window.setInterval(function () {
					ws.send("hello")
				}, 1000)
			}
			var $nowWait = $("#nowWait");
			ws.onmessage = function (e) {
				var res = JSON.parse(e.data);
				console.log(res)
				var len = res.data?res.data.length:0;
				if (len >= 0) {
					$nowWait.html(len);
				}
			}
			ws.onclose = function () {
				console.log("closed...")
				window.clearInterval(timer)
				reconnect(service)
			}
			ws.onerror = function (err) {
				window.clearInterval(timer)
				reconnect(service);
			};
			return ws
		}

		// 重连
		function reconnect(service) {
			// lockReconnect加锁，防止onclose、onerror两次重连
			if (limitConnect > 0) {
				if (localStorage.getItem('lockReconnect') != true) {
					localStorage.setItem("lockReconnect", 1);
					limitConnect--;
					timeConnect++;
					console.log("第" + timeConnect + "次重连");
					// 进行重连
					setTimeout(function () {
						webSocketInit(service);
						localStorage.removeItem("lockReconnect");
					}, 2000);
				}
			} else {
				console.log("TCP连接已超时");
			}
		}
		// 初始化ws
		var ws = webSocketInit(wsWaitUrl)

		// 开始或结束游戏
		var flag=true;
		function setStatus(num) {
			if(flag){
				flag=false;
				$.post(startGameUrl, JSON.stringify({ action: num }),function(){
					flag=true;
				});
			}
			
		}
	</script>
</body>

</html>