giobyte8/chat.html

## chat.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chat room</title>

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
  <h3>Connected users:</h3>
  <a id="btn-login" href="#" data-reveal-id="login-modal">Login</a>
  <ul id="online-userslist"></ul>
  <h3>Messages:</h3>
  <ul id="list-msgs">

  </ul>
  <textarea id="new-msg" cols="30" rows="5" placeholder="New message"></textarea>

  <!-- Modal dialog for login -->
  <div id="login-modal" class="reveal-modal" data-reveal>
    <h2>Login</h2>
    <div id="alerts"></div>
    <form id="login-form">
      <label for="username">Username:</label>
      <input name="username" type="text" placeholder="Username" required >

      <br><label>Password:</label>
      <input name="password" type="password" placeholder="Password" required >

      <button onclick="login()" type="button">Login</button>
      <br><span>Or <a href='/signup'>signup</a> if you dont have an account</span>
    </form>
  </div>

  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script src="js/foundation.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var user = {};

    $(document).foundation();
    $(document).ready(function () {
      $('#login-modal').foundation('reveal', 'open');
    });

    function login() {
      $.ajax({
        type: "POST",
        url: '/login',
        data: $('#login-form').serialize(),
        success: function (data) {
          $('#alerts').empty();
          if (data.error) {
            var html = '<div data-alert class="alert-box alert round">'
                       + data.err.msg + '</div>';
            $('#alerts').append(html);
          }
          else {
            user = data.user;
            var socket = new io();
            configureSocket(socket);
            $('#btn-login').css('display', 'none');
            $('#login-modal').foundation('reveal', 'close');
          }
        },
        dataType: 'json'
      });
    }

    function configureSocket(socket) {

      /**
       * Cuando el servidor envia la lista de usuarios conectados.
       * se reciben a través de este evento,
       * cada usuario se agrega a la lista de usuarios online
       * @param  {[type]} users Array con usuarios conectados en el momento
       */
      socket.on('all online users', function (users) {
        console.log(users.length + ' users received');
        for (var i=0; i<users.length; i++)
        {
          var htmluser = '<li id="' + users[i]._id + '">' + users[i]._id + '</li>';
          $('#online-userslist').append(htmluser);
        }
      });

      /**
       * Listener para el evento 'chat message'
       *   Notese que es el mismo evento que se envia
       *   desde el servidor.
       * Agregamos el mensage entrante a la lista.
       */
      socket.on('chat message', function (msg) {
        $('#list-msgs').append( $('<li>').text(msg) );
      });

      /**
       * Listener para evento 'new user', el servidor lo emite
       * cuando un usuario se ha conectado
       * @param  {[json]} nuser el usuario recien conectado
       */
      socket.on('new user', function (nuser) {
        var linuser = '<li id="' + nuser._id + '">'+ nuser._id + '</li>';
        $('#online-userslist').append(linuser);
      });

      /**
       * Cada vez que un usuario se desconecta, debemos eliminarlo
       * de la lista de usuarios conectados, el servidor envia un mensaje
       * con este evento para informarnos sobre un usuario desconectado.
       * @param  {[json]} nuser El usuarios que se acaba de desconectar
       */
      socket.on('remove user', function (nuser) {
        $('#' + nuser._id).remove();
      })

      /**
       * Emitimos un evento de tipo 'chat message' cada vez
       * que se presiona 'Enter' en el textarea y enviamos
       * su contenido como mensaje al servidor.
       */
      $('#new-msg').keyup(function (evt) {
        if (evt.keyCode === 13) {
          socket.emit('chat message', $('#new-msg').val());
          $('#new-msg').val('');
        }
      });

      /**
       * Solicitamos al servidor la lista de usuarios conectados
       * en este momento.
       */
      socket.emit('all online users');

      /**
       * Emitimos el evento 'new user' para que el servidor
       * informe a todos los usuarios que estamos en linea.
       */
      socket.emit('new user', user);

    }

  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Chat room</title>

	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/foundation.min.css">
	</head>
	<body>
	<h3>Connected users:</h3>
	<a id="btn-login" href="#" data-reveal-id="login-modal">Login</a>
	<ul id="online-userslist"></ul>
	<h3>Messages:</h3>
	<ul id="list-msgs">

	</ul>
	<textarea id="new-msg" cols="30" rows="5" placeholder="New message"></textarea>

	<!-- Modal dialog for login -->
	<div id="login-modal" class="reveal-modal" data-reveal>
	<h2>Login</h2>
	<div id="alerts"></div>
	<form id="login-form">
	<label for="username">Username:</label>
	<input name="username" type="text" placeholder="Username" required >

	<br><label>Password:</label>
	<input name="password" type="password" placeholder="Password" required >

	<button onclick="login()" type="button">Login</button>
	<br><span>Or <a href='/signup'>signup</a> if you dont have an account</span>
	</form>
	</div>

	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<script src="js/foundation.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script>
	var user = {};

	$(document).foundation();
	$(document).ready(function () {
	$('#login-modal').foundation('reveal', 'open');
	});

	function login() {
	$.ajax({
	type: "POST",
	url: '/login',
	data: $('#login-form').serialize(),
	success: function (data) {
	$('#alerts').empty();
	if (data.error) {
	var html = '<div data-alert class="alert-box alert round">'
	+ data.err.msg + '</div>';
	$('#alerts').append(html);
	}
	else {
	user = data.user;
	var socket = new io();
	configureSocket(socket);
	$('#btn-login').css('display', 'none');
	$('#login-modal').foundation('reveal', 'close');
	}
	},
	dataType: 'json'
	});
	}

	function configureSocket(socket) {

	/**
	* Cuando el servidor envia la lista de usuarios conectados.
	* se reciben a través de este evento,
	* cada usuario se agrega a la lista de usuarios online
	* @param {[type]} users Array con usuarios conectados en el momento
	*/
	socket.on('all online users', function (users) {
	console.log(users.length + ' users received');
	for (var i=0; i<users.length; i++)
	{
	var htmluser = '<li id="' + users[i]._id + '">' + users[i]._id + '</li>';
	$('#online-userslist').append(htmluser);
	}
	});

	/**
	* Listener para el evento 'chat message'
	* Notese que es el mismo evento que se envia
	* desde el servidor.
	* Agregamos el mensage entrante a la lista.
	*/
	socket.on('chat message', function (msg) {
	$('#list-msgs').append( $('<li>').text(msg) );
	});

	/**
	* Listener para evento 'new user', el servidor lo emite
	* cuando un usuario se ha conectado
	* @param {[json]} nuser el usuario recien conectado
	*/
	socket.on('new user', function (nuser) {
	var linuser = '<li id="' + nuser._id + '">'+ nuser._id + '</li>';
	$('#online-userslist').append(linuser);
	});

	/**
	* Cada vez que un usuario se desconecta, debemos eliminarlo
	* de la lista de usuarios conectados, el servidor envia un mensaje
	* con este evento para informarnos sobre un usuario desconectado.
	* @param {[json]} nuser El usuarios que se acaba de desconectar
	*/
	socket.on('remove user', function (nuser) {
	$('#' + nuser._id).remove();
	})

	/**
	* Emitimos un evento de tipo 'chat message' cada vez
	* que se presiona 'Enter' en el textarea y enviamos
	* su contenido como mensaje al servidor.
	*/
	$('#new-msg').keyup(function (evt) {
	if (evt.keyCode === 13) {
	socket.emit('chat message', $('#new-msg').val());
	$('#new-msg').val('');
	}
	});

	/**
	* Solicitamos al servidor la lista de usuarios conectados
	* en este momento.
	*/
	socket.emit('all online users');

	/**
	* Emitimos el evento 'new user' para que el servidor
	* informe a todos los usuarios que estamos en linea.
	*/
	socket.emit('new user', user);

	}

	</script>
	</body>
	</html>