Chat RealTime con Socket.io y Mysql

Siguiendo con el desarrollo de aplicaciones RealTime haciendo uso de Socket.io y ver algunos ejemplos en entradas anteriores, en este artículo veremos como podemos realizar un ejercicio típico pero que es una gran base para el aprendizaje de esta estupenda librería JavaScript y es la creación de un chat, veamos que necesitamos:

Tener Node.js Instalado

Tener Mysql Instalado

Contar con las librerías: express, mysql, socket.io

Archivos: Index.html y Server.js

Ya sabiendo todo lo que necesitamos procedamos a crear una carpeta en cualquier lugar de nuestro pc y alojamos los archivos index.html y server.js, ahora veremos el código que alojará cada uno, por ahora procedamos a descargar las librerías ya mencionadas, para ello abrimos una consola de comando en el directorio de nuestra aplicación:

[cc lang=»javascript»]
npm install express

npm install socket.io

npm install mysql
[/cc]

Al terminar la descarga procedemos a incluir el código:

Archivo index.html (Nuestro FrontEnd):

[cc lang=»html»]
< !DOCTYPE html>

[/cc]

Archivo Server.js (Nuestro BackEnd):

[cc lang=»javascript»]
//Librerías necesarias
var app = require(«express»)();
var mysql = require(«mysql»);
var http = require(‘http’).Server(app);
var io = require(«socket.io»)(http);

// Conectando a mysql
var conexion = mysql.createPool({
connectionLimit : 100,
host : ‘localhost’,
user : ‘root’,
password : ‘root’,
database : ‘chat’,
debug : false
});

app.get(«/»,function(req, res){
res.sendFile(__dirname + ‘/index.html’); //Ruta para lanzar el index
});

io.on(‘connection’,function(socket){
socket.on(‘nuevo’,function(status){
addComentario(status,function(res){
if(res){
io.emit(‘refrescar’,status);
} else {
io.emit(‘error’);
}
});
});
});

var addComentario = function (status,callback) {
conexion.getConnection(function(err,connection){
if (err) {
connection.release();
callback(false);
return;
}
connection.query(«INSERT INTO `mensajes` (`mensaje`) VALUES (‘»+status+»‘)», function(err,rows){ //Insertando nuestro comentario
connection.release();
if(!err) {
callback(true);
}
});
connection.on(‘error’, function(err) {
callback(false);
return;
});
});
}

http.listen(5000,function(){ // Puesta en marcha del servidor en el puerto 5000
console.log(«Listening on 5000″);
});

[/cc]

Ahora podemos crear la base de datos donde alojaremos los mensajes:

[cc lang=»sql»]
/*
SQLyog Ultimate v11.3 (64 bit)
MySQL – 5.6.21 : Database – chat
*********************************************************************
*/

/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=»*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE=’NO_AUTO_VALUE_ON_ZERO’ */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`chat` /*!40100 DEFAULT CHARACTER SET latin1 */;

USE `chat`;

/*Table structure for table `mensajes` */

DROP TABLE IF EXISTS `mensajes`;

CREATE TABLE `mensajes` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`mensaje` text CHARACTER SET latin1,
`fecha` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;

/*Data for the table `mensajes` */

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

[/cc]

Posteriormente tendremos la posibilidad de ejecutar la aplicación, recuerda que debes abrir tu consola de comando en el directorio de tu aplicación y teclear:

[cc lang=»javascript»]
node server.js
[/cc]

Veremos la aplicación ejecutandose en la dirección:

http://127.0.0.1:5000/

Veremos como pueden distintos clientes recibir mensajes de forma asíncrona sin recargar la página:

De igual forma observaremos como los mensajes se van almacenando el nuestra base de datos, seguiremos en el estudio de funciones RealTime con Socket.io.
Hasta pronto!.