Chat RealTime con Socket.io y Mysql

Socket.io

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:

1
2
3
4
5
npm install express

npm install socket.io

npm install mysql

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

Archivo index.html (Nuestro FrontEnd):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
< !DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Chat RealTime Socket.IO</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <div class="container">
        <h2>CHAT RealTime con Socket.IO</h2>
        <div class="col-md-8">
            <div class="form-group">
                <label for="txtArea">Mensajes</label>
                <textarea id="txtArea" cols="30" rows="20" class="form-control" readonly></textarea>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Escribe algo." id="mensaje_usuario"/>
                    <span class="input-group-btn">
                        <button class="btn btn-default" id="nuevo_comentario" type="button">Enviar!</button>
                    </span>
                </div><!-- /input-group -->
            </div>
        </div>
    </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

 <script>
    $(document).ready(function(){
          var socket = io();
          $("#nuevo_comentario").click(function(){
            socket.emit('nuevo', $("#mensaje_usuario").val()); //Enviamos nuestro mensaje
            $("#mensaje_usuario").val("");
          });
          socket.on('refrescar',function(msg){
            $("#txtArea").append(msg + '\n'); //Recibimos los nuevos mensajes
          });
    });
    </script>
</body>
</html>

Archivo Server.js (Nuestro BackEnd):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//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");
});

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*
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 */;

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:

1
node server.js

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:
socket.io

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!.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *