2014-01-14 15:04:41 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Socket.io with JWTs</title>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<form id="login">
|
2014-06-15 00:01:34 +02:00
|
|
|
<input type="text" id="username" value="john" />
|
|
|
|
<input type="password" id="password" value="aaa" />
|
|
|
|
<input type="submit" value="login">
|
2014-01-14 15:04:41 +01:00
|
|
|
</form>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
<button id="ping">Send Socket.io Ping</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var token, socket;
|
|
|
|
|
|
|
|
function connect () {
|
2014-06-15 00:01:34 +02:00
|
|
|
socket = io.connect(token ? ('?token=' + token) : '', {
|
|
|
|
'forceNew': true
|
2014-01-14 15:04:41 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
socket.on('pong', function () {
|
|
|
|
console.log('- pong');
|
|
|
|
}).on('time', function (data) {
|
|
|
|
console.log('- broadcast: ' + data);
|
|
|
|
}).on('authenticated', function () {
|
|
|
|
console.log('- authenticated');
|
|
|
|
}).on('disconnect', function () {
|
|
|
|
console.log('- disconnected');
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
connect(); //connect now, it will drop
|
|
|
|
|
|
|
|
$('#ping').on('click', function () {
|
|
|
|
console.log('- ping');
|
|
|
|
socket.emit('ping');
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#login').submit(function (e) {
|
|
|
|
e.preventDefault();
|
2014-02-07 14:11:14 +01:00
|
|
|
var username = $('#username').val();
|
|
|
|
var password = $('#password').val();
|
2014-01-14 15:04:41 +01:00
|
|
|
$.ajax({
|
|
|
|
type: 'POST',
|
|
|
|
data: {
|
|
|
|
username: username,
|
|
|
|
password: password
|
|
|
|
},
|
|
|
|
url: '/login'
|
|
|
|
}).done(function (result) {
|
|
|
|
token = result.token;
|
|
|
|
connect();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
2014-02-07 14:11:14 +01:00
|
|
|
</html>
|