nhalstead/SocketLive.html

## SocketLive.html
<html>
	<head>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
		<meta charset="UTF-8">
		<style>
			html {
				font: 12px/1.2em sans-serif;
			}

			ul {
			  list-style: none;
			}

			li {
			  margin-left: 5px;
			}

			div.column {
			  display: table-cell;
			}

			.ball {
			  position: relative;
			  height: 5px;
			  width: 10px;
			  margin-right: 3px;
			}

			.bachi {
			  display:inline-block;
			  height: 6px;
			  width: 6px;
			  margin-right: 3px;
			  border-style: solid;
			  border-radius: 50%;
			  border-width: 2px;
			}

			.boch {
			  display:inline-block;
			  height: 10px;
			  width: 10px;
			  margin-right: 3px;
			  border-radius: 50%;
			}

			.bloch {
			  display:inline-block;
			  height: 10px;
			  width: 5px;
			}

			.topball {
			  height: 5px;
			  border-radius: 90px 90px 0 0;
			}

			.botball {
			  height: 5px;
			  border-radius: 0 0 90px 90px;
			}

			.rightball {
			  width: 5px;
			  border-radius: 0 90px 90px 0;
			}

			.leftball {
			  margin-right: 0;
			  width: 5px;
			  border-radius: 90px 0 0 90px;
			}


			.good {background: green;}
			.problem {background: gold;}
			.bad {background: red;}


			.good-data {border-color: green;}
			.problem-data {border-color: gold;}
			.bad-data {border-color: red;}
		</style>
	</head>
	<body>
		<h3>Websocket Connection</h3>
		<ul>
			<li>
				<span id="con_status" class='bachi bad bad-data'></span> Connection Status to Server
			</li>
			<li>
				<span id="channel_status" class='bachi bad bad-data'></span> Channel Connect Status (Delayed for 1 sec. on connect)
			</li>
			<li>
				<span id="data_read" class='bachi bad-data'></span> Ping Back (Delayed by the Network's pingInterval on connect)
			</li>
			<li>
				<div id="error" style="font-size: 14px;padding-left:  20px;padding-top:  20px;"></div>
			</li>
		</ul>

		<script>
			var colors = {
				"gray": "font-weight: bold; color: #979797;",
				"red": "font-weight: bold; color: #DC2020;",
				"orange": "font-weight: bold; color: #FD9332;",
				"yellow": "font-weight: bold; color: #F09F0D;",
				"green": "font-weight: bold; color: #31DC20;",
				"blue": "font-weight: bold; color: #1184F1;",
				"purple": "font-weight: bold; color: #7B20DC;"
			};
			var good = "bachi good good-data";
			var bad = "bachi bad bad-data";
			var problem = "bachi problem problem-data";

			var connection = document.getElementById("con_status");
			var channel = document.getElementById("channel_status");
			var pingBack = document.getElementById("data_read");
			var error = document.getElementById("error");
			pingBack.className = bad;
			connection.className = bad;
			channel.className = bad;

			//Connect to SOCKET Network
				var SOCKET = io.connect('http://localhost:8080', {
					transports: ['websocket'],
					query: "key=123456789"
				});
				var pTime = 30000; // The Default Ping Interval from the Websocket Server

			// On Connect
				SOCKET.on('connect', function(data){
					console.log("%cSocket Connected to Server.", colors.green);
					pTime = SOCKET.io.engine.pingInterval;
					console.log("%c[SOCKET] %cPing Interval: "+pTime+"ms", colors.blue, colors.gray);
					console.log("%c[SOCKET] %cPing Timeout: "+SOCKET.io.engine.pingTimeout+"ms", colors.blue, colors.gray);

					connection.className = good;
					channel.className = problem;

					setTimeout(function(){
						SOCKET.emit('join', { channel: 'SocketNetwork', presence: true, authorize: false});
					}, 1000);

				});

			// On Ping
				SOCKET.on('ping', function(data){
					SOCKET.emit('watcher', { 'socketId': SOCKET.id, 'type': 'update' });
					console.log("%c[SOCKET] %cPING! PONG!", colors.blue, colors.gray);
					pingBack.className = good;
					setTimeout(function(){
						pingBack.className = problem;
					}, (pTime-2000) );
				});

			// Online Message
				SOCKET.on('watcher', function(data){
					if(data.type == "join"){
						console.log("%c[EXTRA] %cWelcome " + data.socketId + " to the network!", colors.yellow, colors.gray);
					}
					else if(data.type == "update"){
						console.log("%c[EXTRA] %cI see" + data.socketId + " is still on!", colors.yellow, colors.gray);
					}
				});


			// On Reconnect
				SOCKET.on('reconnect', function(data){
					console.log("%cSocket Reconnected.", colors.green);
					connection.className = good;
				});
			// On Disconnect
				SOCKET.on('disconnect', function(data){
					console.log("%cSocket Disconnected from Server.", colors.red);
					connection.className = bad;
				});
			// On Reconnecting
				SOCKET.on('reconnecting', function(data){
					console.log("%cAttempting Socket Reconnection.", colors.yellow);
					connection.className = problem;
				});
			// On Failed Reconnect
				SOCKET.on('reconnect_failed', function(data){
					console.log("%cFailed Socket Reconnect.", colors.red);
					connection.className = bad;
				});


			// On Demo
			//  For the Demo Event
				SOCKET.on('demo', function(data){
					console.log("%c[DEMO_EVENT] %c"+data.message, colors.orange, colors.blue);
				});

			// On Info
				SOCKET.on('info', function(data){
					if(data.status == "connected"){
						setTimeout( function(){ SOCKET.emit('watcher', { 'socketId': SOCKET.id, 'type': 'join' }); }, 2000); // Wait to send the message!
						console.log("%c[NETWORK] %cConnected!", colors.purple, colors.gray);
						console.log("%c[EXTRA] %cConnected to \""+data.channel+"\"!", colors.yellow, colors.gray);
						channel.className = good;
						pingBack.className = problem;
					}
					else if(data.status == "failed"){
						console.log("%c[NETWORK] %cNot Allowed to Connect!", colors.purple, colors.gray);
						error.innerText = data.message;
						channel.className = bad;
						pingBack.className = bad;
					}
				});

		</script>
	</body>
</html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
	<meta charset="UTF-8">
	<style>
	html {
	font: 12px/1.2em sans-serif;
	}

	ul {
	list-style: none;
	}

	li {
	margin-left: 5px;
	}

	div.column {
	display: table-cell;
	}

	.ball {
	position: relative;
	height: 5px;
	width: 10px;
	margin-right: 3px;
	}

	.bachi {
	display:inline-block;
	height: 6px;
	width: 6px;
	margin-right: 3px;
	border-style: solid;
	border-radius: 50%;
	border-width: 2px;
	}

	.boch {
	display:inline-block;
	height: 10px;
	width: 10px;
	margin-right: 3px;
	border-radius: 50%;
	}

	.bloch {
	display:inline-block;
	height: 10px;
	width: 5px;
	}

	.topball {
	height: 5px;
	border-radius: 90px 90px 0 0;
	}

	.botball {
	height: 5px;
	border-radius: 0 0 90px 90px;
	}

	.rightball {
	width: 5px;
	border-radius: 0 90px 90px 0;
	}

	.leftball {
	margin-right: 0;
	width: 5px;
	border-radius: 90px 0 0 90px;
	}


	.good {background: green;}
	.problem {background: gold;}
	.bad {background: red;}


	.good-data {border-color: green;}
	.problem-data {border-color: gold;}
	.bad-data {border-color: red;}
	</style>
	</head>
	<body>
	<h3>Websocket Connection</h3>
	<ul>
	<li>
	<span id="con_status" class='bachi bad bad-data'></span> Connection Status to Server
	</li>
	<li>
	<span id="channel_status" class='bachi bad bad-data'></span> Channel Connect Status (Delayed for 1 sec. on connect)
	</li>
	<li>
	<span id="data_read" class='bachi bad-data'></span> Ping Back (Delayed by the Network's pingInterval on connect)
	</li>
	<li>
	<div id="error" style="font-size: 14px;padding-left: 20px;padding-top: 20px;"></div>
	</li>
	</ul>

	<script>
	var colors = {
	"gray": "font-weight: bold; color: #979797;",
	"red": "font-weight: bold; color: #DC2020;",
	"orange": "font-weight: bold; color: #FD9332;",
	"yellow": "font-weight: bold; color: #F09F0D;",
	"green": "font-weight: bold; color: #31DC20;",
	"blue": "font-weight: bold; color: #1184F1;",
	"purple": "font-weight: bold; color: #7B20DC;"
	};
	var good = "bachi good good-data";
	var bad = "bachi bad bad-data";
	var problem = "bachi problem problem-data";

	var connection = document.getElementById("con_status");
	var channel = document.getElementById("channel_status");
	var pingBack = document.getElementById("data_read");
	var error = document.getElementById("error");
	pingBack.className = bad;
	connection.className = bad;
	channel.className = bad;

	//Connect to SOCKET Network
	var SOCKET = io.connect('http://localhost:8080', {
	transports: ['websocket'],
	query: "key=123456789"
	});
	var pTime = 30000; // The Default Ping Interval from the Websocket Server

	// On Connect
	SOCKET.on('connect', function(data){
	console.log("%cSocket Connected to Server.", colors.green);
	pTime = SOCKET.io.engine.pingInterval;
	console.log("%c[SOCKET] %cPing Interval: "+pTime+"ms", colors.blue, colors.gray);
	console.log("%c[SOCKET] %cPing Timeout: "+SOCKET.io.engine.pingTimeout+"ms", colors.blue, colors.gray);

	connection.className = good;
	channel.className = problem;

	setTimeout(function(){
	SOCKET.emit('join', { channel: 'SocketNetwork', presence: true, authorize: false});
	}, 1000);

	});

	// On Ping
	SOCKET.on('ping', function(data){
	SOCKET.emit('watcher', { 'socketId': SOCKET.id, 'type': 'update' });
	console.log("%c[SOCKET] %cPING! PONG!", colors.blue, colors.gray);
	pingBack.className = good;
	setTimeout(function(){
	pingBack.className = problem;
	}, (pTime-2000) );
	});

	// Online Message
	SOCKET.on('watcher', function(data){
	if(data.type == "join"){
	console.log("%c[EXTRA] %cWelcome " + data.socketId + " to the network!", colors.yellow, colors.gray);
	}
	else if(data.type == "update"){
	console.log("%c[EXTRA] %cI see" + data.socketId + " is still on!", colors.yellow, colors.gray);
	}
	});


	// On Reconnect
	SOCKET.on('reconnect', function(data){
	console.log("%cSocket Reconnected.", colors.green);
	connection.className = good;
	});
	// On Disconnect
	SOCKET.on('disconnect', function(data){
	console.log("%cSocket Disconnected from Server.", colors.red);
	connection.className = bad;
	});
	// On Reconnecting
	SOCKET.on('reconnecting', function(data){
	console.log("%cAttempting Socket Reconnection.", colors.yellow);
	connection.className = problem;
	});
	// On Failed Reconnect
	SOCKET.on('reconnect_failed', function(data){
	console.log("%cFailed Socket Reconnect.", colors.red);
	connection.className = bad;
	});


	// On Demo
	// For the Demo Event
	SOCKET.on('demo', function(data){
	console.log("%c[DEMO_EVENT] %c"+data.message, colors.orange, colors.blue);
	});

	// On Info
	SOCKET.on('info', function(data){
	if(data.status == "connected"){
	setTimeout( function(){ SOCKET.emit('watcher', { 'socketId': SOCKET.id, 'type': 'join' }); }, 2000); // Wait to send the message!
	console.log("%c[NETWORK] %cConnected!", colors.purple, colors.gray);
	console.log("%c[EXTRA] %cConnected to \""+data.channel+"\"!", colors.yellow, colors.gray);
	channel.className = good;
	pingBack.className = problem;
	}
	else if(data.status == "failed"){
	console.log("%c[NETWORK] %cNot Allowed to Connect!", colors.purple, colors.gray);
	error.innerText = data.message;
	channel.className = bad;
	pingBack.className = bad;
	}
	});

	</script>
	</body>
	</html>