koa-socket-2
Version:
Koa meets socket.io connected socket
105 lines (97 loc) • 2.87 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Koa-Socket Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body {
margin: 0;
padding: 20px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: -apple-system, '.SFNSDisplay-Regular', 'Helvetica Neue', 'Arial', sans-serif;
color: #32322C;
}
button {
display: block;
margin-top: .5em;
border: none;
border-radius: 4px;
font-size: 18px;
font-weight: 600;
text-align: center;
padding: .3em 3em;
background: #13C4A3;
transition: all .177s linear;
text-decoration: none;
cursor: pointer;
}
button:hover {
background: #36F1CD;
text-shadow: 0px 1px 2px rgba( 0, 0, 0, .3 );
}
.small {
font-size: 70%;
}
.connections {
position: absolute;
width: 44px;
height: 44px;
top: 20px;
right: 20px;
line-height: 44px;
font-size: 16px;
font-weight: 700;
background: rgba( 0, 0, 0, .45 );
color: white;
border-radius: 4px;
}
.connections span {
display: block;
text-align: center;
}
</style>
</head>
<body>
<button class="js-btn">Send</button>
<button class="js-ack">Send <span class="small">(with acknowledgement)</span></button>
<button class="js-chatBtn">Chat</button>
<div class="connections"><span class="js-connect">1</span></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.2/socket.io.slim.js"></script>
<script>
var socket = io.connect( 'http://localhost:3000' );
var btn = document.querySelector( '.js-btn' );
btn.addEventListener( 'click', function( event ) {
socket.emit( 'data', {
foo: 'foo'
});
});
var ack = document.querySelector( '.js-ack' );
ack.addEventListener( 'click', function( event ) {
socket.emit( 'ack', {
foo: 'foo'
}, res => {
console.log( 'acknowledgement:', res )
});
});
var connections = document.querySelector( '.js-connect' );
socket.on( 'connections', function( event ) {
console.log( 'connected', event );
connections.innerHTML = event.numConnections;
});
socket.on( 'response', function( event ) {
console.log( 'response:', event.message );
});
var chat = io.connect( 'http://localhost:3000/chat' );
chat.on( 'message', function( event ) {
console.log( 'chat message:', event );
});
var chatBtn = document.querySelector( '.js-chatBtn' );
chatBtn.addEventListener( 'click', function( event ) {
chat.emit( 'message', 'Yo central, are you on the line?' );
});
</script>
</body>
</html>