Socket.io for client

index.jade

extends layout

block content
  h1= title
  #disconected
    p Desconectado!
  #connected.hide
    p Conectado!
  input(type='button', value='Enviar pulsación')

  script
    //#1 Declaramos el objeto socket que se conectará en este caso a localhost
    var socket = io.connect('http://localhost');

    //#2 Función que muestra un mensaje u otro, dependiendo de la conexión.
    function toggle(){
      $("#disconected").toggleClass("hide");
      $("#connected").toggleClass("hide");
    }

    //#3 Si estamos conectados, muestra el log y cambia el mensaje
    socket.on('connected', function () {
      console.log('Conectado!');
      toggle();
    });

    //#4 Si nos desconectamos, muestra el log y cambia el mensaje.
    socket.on('disconnect', function () {
      console.log('Desconectado!');
      toggle();
      });

style.css

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

#disconected p {
	color: red;
	background-color: rgba(200, 0, 0, 0.4);

}

#connected p {
	color: green;
	background-color: rgba(0,200,0,0.4);
}

.hide {
	display: none;
}