milnomada · July 29, 2021 09:46
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
    <title>Socket.io</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            text-rendering: optimizeLegibility;
        }
        #root {
            width: 600px;
            margin: 0 auto;
        }
        .head, .feeder {
            text-align: center;
        }
        .head h3 {
            display: inline-block;
        }
        .indicator {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            display: inline-block;
            background-color: #777;
            vertical-align: middle;
            margin-top: -5px;
            margin-right: 10px;
        }
        .indicator.on {
            background-color: #12e012;
        }
        code pre {
            text-align: justify;
            padding-left: 100px;
        }
    </style>
 </head>

 <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
        <div class="head"><span class="indicator"></span><h3>Welcome to Socket.io test</h3></div>
        <div class="feeder"></div>
        <div><code><pre class="info"></pre></code></div>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.socket.io/socket.io-1.7.0.slim.js"></script>
    <script type="text/javascript">
        var state = {
            connected: false,
            messages: 0,
            started: 0
        }
        var host = 'http://localhost:3333'
        var socket = io(host, {
            path: '',
            namespace: '',
            reconnection: true,
            reconnectionDelay: 500,
            reconnectionAttempts: 10
        });
        socket.on('connect', function(s) {
            console.log(socket, s)
            state.started = Date.now()
            state.connected = true
            state.id = socket.id
            state.uri = socket.io.uri
            state.opts = socket.io.opts
            $('.info').html(JSON.stringify(state, undefined, 4))
            $('.indicator').addClass('on')
            $('.feeder').html('<span class="ephemeral">Socket Connected!</span>')
            setTimeout(function(){$('.ephemeral').hide().remove()}, 3000)
        });

        socket.on('disconnect', function(s) {
            console.log(socket, s)
            state.connected = false
            $('.indicator').removeClass('on')
            $('.info').html("")
            $('.feeder').html(`<span class="ephemeral">Socket Disconnected! - Duration: ${((Date.now() - state.started) / 1000).toFixed(2)}s.</span>`)
            setTimeout(function(){$('.ephemeral').hide().remove()}, 3000)
        });
        
    </script>
 </body>

 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
	<title>Socket.io</title>
	<style>
	body {
	padding: 0;
	margin: 0;
	text-rendering: optimizeLegibility;
	}
	#root {
	width: 600px;
	margin: 0 auto;
	}
	.head, .feeder {
	text-align: center;
	}
	.head h3 {
	display: inline-block;
	}
	.indicator {
	width: 8px;
	height: 8px;
	border-radius: 4px;
	display: inline-block;
	background-color: #777;
	vertical-align: middle;
	margin-top: -5px;
	margin-right: 10px;
	}
	.indicator.on {
	background-color: #12e012;
	}
	code pre {
	text-align: justify;
	padding-left: 100px;
	}
	</style>
	</head>

	<body>
	<noscript>You need to enable JavaScript to run this app.</noscript>
	<div id="root">
	<div class="head"><span class="indicator"></span><h3>Welcome to Socket.io test</h3></div>
	<div class="feeder"></div>
	<div><code><pre class="info"></pre></code></div>
	</div>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
	<script type="text/javascript" src="https://cdn.socket.io/socket.io-1.7.0.slim.js"></script>
	<script type="text/javascript">
	var state = {
	connected: false,
	messages: 0,
	started: 0
	}
	var host = 'http://localhost:3333'
	var socket = io(host, {
	path: '',
	namespace: '',
	reconnection: true,
	reconnectionDelay: 500,
	reconnectionAttempts: 10
	});
	socket.on('connect', function(s) {
	console.log(socket, s)
	state.started = Date.now()
	state.connected = true
	state.id = socket.id
	state.uri = socket.io.uri
	state.opts = socket.io.opts
	$('.info').html(JSON.stringify(state, undefined, 4))
	$('.indicator').addClass('on')
	$('.feeder').html('<span class="ephemeral">Socket Connected!</span>')
	setTimeout(function(){$('.ephemeral').hide().remove()}, 3000)
	});

	socket.on('disconnect', function(s) {
	console.log(socket, s)
	state.connected = false
	$('.indicator').removeClass('on')
	$('.info').html("")
	$('.feeder').html(`<span class="ephemeral">Socket Disconnected! - Duration: ${((Date.now() - state.started) / 1000).toFixed(2)}s.</span>`)
	setTimeout(function(){$('.ephemeral').hide().remove()}, 3000)
	});

	</script>
	</body>

	</html>