1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Centrifuge + Oauth2</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/centrifugal/centrifuge-js@master/dist/centrifuge.min.js"></script>
</head>
<body>
<div>
Go to <a href="/account"> account page</a>
</div>
<div style="margin-top: 20px;">
<input type="text" id="input" />
</div>
<script type="text/javascript">
const centrifuge = new Centrifuge('ws://localhost:3000/connection/websocket');
function drawText(text) {
const div = document.createElement('div');
div.innerHTML = text;
document.body.appendChild(div);
}
centrifuge.on('connect', function(ctx){
drawText('Connected over ' + ctx.transport + '<br>');
});
centrifuge.on('disconnect', function(ctx){
drawText('Disconnected: ' + ctx.reason + '<br>');
});
const sub = centrifuge.subscribe("chat", function(message) {
drawText(message.info.user + ": " + message.data + '<br>');
})
const input = document.getElementById("input");
input.addEventListener('keyup', function(e) {
if (e.keyCode == 13) {
sub.publish(this.value);
input.value = '';
}
});
centrifuge.connect();
</script>
</body>
</html>
|