xiaojincai
/
quepass_game


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
							<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>大屏首页</title>
	<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: 50%;
		}

		.btn-box {
			margin: 0 auto;
			width: 50%;

			display: flex;
			justify-content: space-around;
		}

		.btn-box a {
			display: block;
		}
	</style>
</head>

<body>
	<div class="full">
		<!-- <img src="img/ptop.png"  class="p-top" alt=""> -->
		<p class="text">当前在线人数：<span id="nowWait"></span></p>
		<div class="btn-box">
			<a onclick="setStatus(1)" class="btn1"><img src="img/pbtn.png"></a>
			<a onclick="setStatus(0)" 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 = "47.108.130.28:9000";
		var wsWaitUrl = "ws://" + baseUrl + "/ws/quepass/onlinewaiting";

		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);
				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)

		// 开始或结束游戏
		function setStatus(num) {
			$.post("http://47.108.130.28:9000/api/quepass/status", JSON.stringify({ action: num }));
		}
	</script>
</body>

</html>