<input type="text" />
input {
width:80%;
margin: 20px auto;
display:block;
font-size: 24px;
border: 2px solid #A8B2B5;
}
/**
* In addition add to HTML:
* script src="https://socket-magic.herokuapp.com/socket.io/socket.io.js"
*/
var socket = io.connect('https://socket-magic.herokuapp.com/');
var input = document.querySelector('input');
socket.on('data', function(data) {
input.value = data.val;
});
input.addEventListener('input', function(e) {
socket.emit('data', { val: e.target.value });
});
This Pen doesn't use any external CSS resources.