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

🌟 ¡Visita Nuestra Tienda para Programadores! 🌟

Descubre Códigos Fuente, Cursos, Software, Computadoras, Accesorios y Regalos Exclusivos. ¡Todo lo que necesitas para llevar tu programación al siguiente nivel!

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>



Chat RealTime Socket.IO



CHAT RealTime con Socket.IO








[/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:
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 una respuesta

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