<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 });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://socket-magic.herokuapp.com/socket.io/socket.io.js