Skip to content

Instantly share code, notes, and snippets.

@milnomada

milnomada/index.html

Created July 29, 2021 09:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save milnomada/218d8776fa533736620145211e27adae to your computer and use it in GitHub Desktop.
Save milnomada/218d8776fa533736620145211e27adae to your computer and use it in GitHub Desktop.
Download ZIP
Socket.io client for Python application
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment