Parte 2 | Creando un sistema de chat sobre NodeJS con Socket.IO, MongoDB, Foundation y Openshift

Esta es la segunda parte de la serie de artículos ‘Creando un sistema de chat sobre NodeJS’, en total son 5 partes:

• Parte 1: Creando una aplicación de chat en tiempo real con Socket.IO y ExpressJS.
• Parte 2: Agregando soporte para registro y login de usuarios. (MongoDB y bcrypt).
• Parte 3: Utilizando MongoDB para almacenar un historial de nuestras conversaciones.
• Parte 4: Utilizando Zurb Foundation y CSS3 para darle estilo y diseño a la aplicación.
• Parte 5: Desplegando nuestra aplicación en la nube. [Openshift de Red Hat]

Registro y login de usuarios.

A la aplicación del articulo anterior, añadiremos la capacidad de saber exactamente que usuarios están conectados a la aplicación en cualquier momento, también informaremos a los usuarios cada vez que alguien se desconecte.

Cada usuario deberá registrarse y autenticarse en el sistema para poder utilizar el chat, de esta manera sabremos que usuarios están activos y que usuario envía cada mensaje, con esta información podremos crear un historial de conversaciones en los siguientes artículos.

Requisitos necesarios.

Los requisitos para este articulo son los mismos que en el primer articulo. Trabajaremos sobre el código que escribimos durante la primera parte. Para poder utilizar el driver de Mongodb y las funciones de bcrypt-nodejs instalaremos los siguienes paquetes:

>$ npm install --save mongodb
>$ npm install --save bcrypt-nodejs

Usuarios.

Para manejar objetos ‘usuario’ vamos a crear funciones especificas para almacenar y recuperar usuarios en la base de datos. Crearemos un objeto especifico para ello, llamado UserDAO (User Data Access Object | Objeto de acceso a datos del usuario). Los datos que almacenaremos de cada usuario son: username, password y email, para mantener seguros los password de nuestros usuarios, vamos a encriptar los passwords mediante bcrypt-nodejs.

El código para nuestro UserDAO.js:

	/* Util para encriptar el password del usuario */
	var bcrypt = require('bcrypt-nodejs');
	/**
	* Data Access Object (DAO) para 'users',
	* Debe ser construido con un objeto conectado a la
	* base de datos
	*/
	function UserDAO(db) {
	/**
	* Si el constructor es llamado sin el operador 'new',
	* muestra una advertencia y lo llama correctamente.
	*/
	if (false == (this instanceof UserDAO)) {
	console.log('WARNING: UserDAO constructor called without "new" operator');
	return new UserDAO(db);
	}
	/* Colección 'users' en la base de datos */
	var users = db.collection('users');
	this.addUser = function (username, password, email, callback) {
	// Verificamos que el usuario no exista aun
	users.findOne({'_id': username}, function (err, user) {
	if (err) throw err;
	if (user) {
	var user_yet_exist_error = new Error('User yet exists');
	user_yet_exist_error.msg = "User yet exists"
	return callback(user_yet_exist_error, null);
	}
	else {
	// Generate password hash
	var salt = bcrypt.genSaltSync();
	var password_hash = bcrypt.hashSync(password, salt);
	// Crear el nuevo 'user' con los parametros dados.
	var user = {'_id': username, 'password': password_hash, 'email': email};
	// Insertar el nuevo usuario en la base de datos
	users.insert(user, function (err, result) {
	if (err) return callback(err, null);
	console.log('Nuevo usuario creado');
	return callback(null, result[0]);
	});
	}
	});
	}
	this.validateLogin = function (username, password, callback) {
	users.findOne({'_id': username}, function (err, user) {
	if (err) return callback(err, null);
	if (user) {
	if (bcrypt.compareSync(password, user.password)) {
	callback(null, user);
	}
	else {
	var invalid_password_error = new Error('Invalid password');
	invalid_password_error.msg = 'Invalid password';
	callback(invalid_password_error, null);
	}
	}
	else {
	var no_such_user_error = new Error('User not found');
	no_such_user_error.msg = 'User not found';
	callback(no_such_user_error, null);
	}
	});
	}
	}
	module.exports.UserDAO = UserDAO;

view raw UsersDAO.js hosted with ❤ by GitHub

Sobre el código:

• El archivo ‘UserDAO.js’ se encuentra dentro de la carpeta ‘dao’ ubicada en la raíz de la aplicación.
• La función ‘addUser’ solo creara un usuario en la base de datos si el username asignado no ha sido registrado antes con otro usuario.
• En las lineas 38 y 39 se genera un hash basado en el password ingresado por el usuario y sera lo que almacenaremos en la base de datos.
• La función ‘validateLogin’ utiliza bcrypt para comparar la contraseña ingresada con el hash almacenado en la base de datos para validar las credenciales del usuario.
• Al crear un objeto UserDAO deberá pasarse como parámetro un objeto conectado a la base de datos para poder consultar e insertar usuarios.

---

El registro.

Para que los usuarios puedan registrarse, creamos una pagina con un formulario para los datos de registro.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Signup to chat team SS</title>
	</head>
	<body>
	<h1> Signup to chat team SS</h1>
	<form id="signup-form">
	<label for="username">Username</label><br>
	<input id="username" name="username" placeholder="Choose an username" required>
	<br><br><label for="password">Password</label><br>
	<input id="password" name="password" placeholder="Type a password" type="password" required>
	<br><br><label for="email">Email</label><br>
	<input id="email" name="email" placeholder="User email" type="email" required>
	<br><br><button onclick="signup()" type="button">Signup</button>
	</form>
	<br><span id="msg"></span>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script&gt;
	<script type="text/javascript">
	/**
	* Esta funcion se ejecuta al hacer clic en el boton 'Signup'
	* registra mediante ajax al nuevo usuario
	*/
	function signup() {
	$.ajax({
	type: "POST",
	url: '/signup',
	data: $('#signup-form').serialize(),
	success: function (data) {
	$('#msg').empty();
	if (data.error) {
	$('#msg').append(data.err.msg);
	}
	else {
	$('#msg').append('User registered successfully');
	$('#signup-form')[0].reset();
	window.location = '/';
	}
	},
	dataType: 'json'
	});
	}
	</script>
	</body>
	</html>

view raw signup.html hosted with ❤ by GitHub

• El archivo ‘signup.html’ debe ir dentro de la carpeta ‘views’
• Cuando se presiona el botón ‘signup’ se enviaran los datos al servidor mediante ajax, , el servidor enviara como respuesta un objeto JSON para informar sobre el resultado de nuestra petición.
• Si el usuario ya ha sido registrado antes, se mostrara un mensaje de error en la página de registro.
• Si el registro es exitoso, se direccionará al usuario a la página de login, para que pueda iniciar sesión y utilizar el sistema.

---

El cliente.

Ahora vamos a implementar las nuevas funcionalidades en el Frontend del sistema, utilizaremos Zurb Foundation para mostrar un ‘modal dialog’ solicitando las credenciales al usuario antes de poder utilizar el sistema. En los siguientes artículos analizaremos como funciona Zurb Foundation, por ahora nos limitaremos a utilizar el ‘modal dialog’. También en el cliente crearemos listeners para los eventos de WebSocket generados por el servidor.

	<!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&gt;
	<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>

view raw chat.html hosted with ❤ by GitHub

• El WebSocket no se inicializa ni los escuchadores de eventos se activan hasta que el usuario se haya autenticado correctamente.
• El botón ‘login’ ejecuta la función ‘login()’, que envía los datos al servidor y recibe una respuesta a través de ajax, en la cual el servidor nos dice si las credenciales son correctas o no, si las credenciales son correctas se inicializa el socket y se configuran los escuchadores de eventos.
• En la función ‘configureSocket’ (Ejecutada después de un login exitoso) Se configuran los listener para los eventos, a continuación se emite el evento ‘all online users’ para solicitar al servidor la lista de todos los usuarios conectados en este momento, luego se emite el evento ‘new user’ para que el servidor informe a todos los usuarios del sistema que nos hemos conectado.
• Cuando el cliente deje la página, el servidor detectara que el socket se ha desconectado y notificara al resto de usuarios que un usuario se ha desconectado.
• Asegúrate de descargar Zurb Foundation Framework e incluir ‘normalize.css’ y ‘foundation.min.css’ en la carpeta ‘views/css’. También deberás incluir el archivo ‘foundation.min.js’ en la carpeta ‘views/js’

---

El servidor.

La pieza central de todo el sistema es el código del servidor, este debe atender y procesar las peticiones del frontend. Debemos agregar al servidor las rutas para registrar y autenticar usuarios, así como las rutas para las solicitudes de archivos css y javascript que el frontend requiera. También configuraremos ‘Socket.IO’ para responder apropiadamente a los nuevos tipos de eventos.

	/**
	* Server.js
	* @author : DiganmeGiovanni | https://twitter.com/DiganmeGiovanni
	* @Created on: 25 Oct, 2014
	*/
	/* Librerias necesarias para la aplicación */
	var bodyParser = require('body-parser');
	var express = require('express');
	var app = express();
	var http = require('http').Server(app);
	var io = require('socket.io')(http);
	var MongoClient = require('mongodb').MongoClient;
	var userDAO = require('./dao/UserDAO').UserDAO;
	// Para acceder a los parametros de las peticiones POST
	app.use(bodyParser());
	/* Mongodb config */
	var mdbconf = {
	host: 'localhost',
	port: '27017',
	db: 'chatSS'
	};
	/* Get a mongodb connection and start application */
	MongoClient.connect('mongodb://'+mdbconf.host+':'+mdbconf.port+'/'+mdbconf.db, function (err, db) {
	if (err) return new Error('Connection to mongodb unsuccessful');
	var usersDAO = new userDAO(db); // Initialize userDAO
	var onlineUsers = [];
	/** *** *** ***
	* Configuramos el sistema de ruteo para las peticiones web:
	*/
	app.get('/signup', function (req, res) {
	res.sendFile( __dirname + '/views/signup.html');
	});
	app.post('/signup', function (req, res) {
	var username = req.body.username;
	var password = req.body.password;
	var email = req.body.email;
	usersDAO.addUser(username, password, email, function (err, user) {
	if (err) {
	res.send({ 'error': true, 'err': err});
	}
	else {
	user.password = null;
	res.send({ 'error': false, 'user': user });
	}
	});
	});
	app.post('/login', function (req, res) {
	var username = req.body.username;
	var password = req.body.password;
	usersDAO.validateLogin(username, password, function (err, user) {
	if (err) {
	res.send({'error': true, 'err': err});
	}
	else {
	user.password = null;
	res.send({ 'error': false, 'user': user});
	}
	});
	});
	/** css and js request */
	app.get('/css/foundation.min.css', function (req, res) {
	res.sendFile(__dirname + '/views/css/foundation.min.css');
	});
	app.get('/css/normalize.css', function (req, res) {
	res.sendFile(__dirname + '/views/css/normalize.css');
	});
	app.get('/js/foundation.min.js', function (req, res) {
	res.sendFile(__dirname + '/views/js/foundation.min.js');
	});
	/** *** *** */
	app.get('*', function(req, res) {
	res.sendFile( __dirname + '/views/chat.html');
	});
	/** *** *** ***
	* Configuramos Socket.IO para estar a la escucha de
	* nuevas conexiones.
	*/
	io.on('connection', function(socket) {
	console.log('New user connected');
	/**
	* Cada nuevo cliente solicita con este evento la lista
	* de usuarios conectados en el momento.
	*/
	socket.on('all online users', function () {
	socket.emit('all online users', onlineUsers);
	});
	/**
	* Cada nuevo socket debera estar a la escucha
	* del evento 'chat message', el cual se activa
	* cada vez que un usuario envia un mensaje.
	*
	* @param msg : Los datos enviados desde el cliente a
	* través del socket.
	*/
	socket.on('chat message', function(msg) {
	io.emit('chat message', msg);
	});
	/**
	* Mostramos en consola cada vez que un usuario
	* se desconecte del sistema.
	*/
	socket.on('disconnect', function() {
	onlineUsers.splice(onlineUsers.indexOf(socket.user), 1);
	io.emit('remove user', socket.user);
	console.log('User disconnected');
	});
	/**
	* Cuando un cliente se conecta, emite este evento
	* para informar al resto de usuarios que se ha conectado.
	* @param {[type]} nuser El nuevo usuarios
	*/
	socket.on('new user', function (nuser) {
	socket.user = nuser;
	onlineUsers.push(nuser);
	io.emit('new user', nuser);
	});
	});
	/**
	* Iniciamos la aplicación en el puerto 3000
	*/
	http.listen(3000, function() {
	console.log('listening on *:3000');
	});
	});

view raw server.js hosted with ❤ by GitHub

• El objeto ‘mdbconf’ almacena los parámetros necesarios para establecer una conexión con mongodb.
• En la linea 15 indicamos que vamos a utilizar el código de ‘./daos/UserDAO.js’, NodeJS infiere la extensión ‘js’, por lo que solo escribimos el nombre del archivo.
• Una vez establecida la conexión con mongodb, se inicializa el objeto UsersDAO (linea 32) para ingresar y consultar con la base de datos.
• Las peticiones POST (Signup y Login) se realizan mediante ajax, por lo que, el servidor no necesita enviar ningún archivo como respuesta, bastará con enviar un objeto JSON como respuesta.
• En las lineas 75 – 87 se configuran las rutas para los archivos estáticos css y javascript que se utilizan en el frontend.
• A partir de la linea 98 se configuran los eventos para ‘Socket.IO’, también cada vez que un cliente se conecta, se agrega a la lista de usuarios conectados que el servidor utiliza para llevar el registro de usuarios online.

---

El resultado.

Para poner a funcionar la aplicación asegúrate antes de iniciar la base de datos para que se pueda establecer la conexión, despues bastara con ejecutar el servidor con nodejs.

>$ node server.js

Login page

Signup page

Chat in action

La mayoría de funciones están documentadas en el código, asegúrate de leerlo detenidamente junto con la documentación incluida.

En los siguientes artículos agregaremos belleza y funcionalidad a nuestra aplicación.

• Parte 3: Utilizando MongoDB para almacenar un historial de conversaciones.
• Parte 4: Utilizando Zurb Foundation y CSS3 para darle estilo y diseño a la aplicación.
• Parte 5: Desplegando nuestra aplicación en la nube. [Openshift de Red Hat].

Si estas a punto cometer suicidio tratando de poner a funcionar esta aplicación, no dudes en comentar tus dudas sobre la implementación del código fuente. 🙂

Happy Coding !!