Blog
Crear un chat con NodeJS y SocketIO
NodeJS nos permite desarrollar sitios webs programando en Java Script del lado del cliente y servidor. Esto es gracias a que hace uso de la Máquina Virtual V8 de Google, el mismo entorno de ejecución para Java Script que utiliza Google Chrome.
NodeJs es orientado a eventos y realiza todas las tareas con el exterior (cómo acceder a una base de datos) de manera asíncrona, pudiendo así desarrollar sistemas en tiempo real como un chat o juegos.
En este artículo veremos lo básico que se debe tener en cuenta a la hora de crear un chat con NodeJS y SocketIO.
Antes de crear un chat con NodeJS y SocketIO
Antes de comenzar debemos tener instalado NodeJs y los módulos SocketIO (para manejar los sockets) y Express (con el cual manejaremos las peticiones que lleguen al servidor).
Instalar NodeJs en Ubuntu desde la terminal:
sudo apt-get update sudo apt-get install nodejs
Luego crear un directorio para el proyecto e instalar los módulos:
npm install --save socket.io npm install --save express
Ahora vamos a crear un chat con NodeJS y SocketIO
Vamos a empezar con nuestro servidor, para esto debemos crear un archivo server.js (el nombre puede variar) en el directorio del proyecto (creado anteriormente) y colocar el siguiente código:
/*
* server.js
*/
/* Librerías necesarias para crear la aplicación */
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
/*
* Configuramos nuestra ruta (index) principal con
* express para mostrar el chat
*/
app.get('/', function(req, res) {
res.sendFile( __dirname + '/chat.html');
});
/*
* Configuramos Socket.IO para estar a la escucha de
* nuevas conexiones.
*/
io.on('connection', function(socket) {
console.log('New user connected');
/*
* Cada nueva conexión deberá estar a la escucha
* del evento 'nuevo mensaje', el cual se activa
* cada vez que un usuario envia un mensaje.
*
* @param msj : Los datos enviados desde el cliente a
* través del socket.
*/
socket.on('nuevo mensaje', function(msj) {
io.emit('nuevo mensaje', msj);
});
/*
* Imprimimos en consola cada vez que un usuario
* se desconecte del sistema.
*/
socket.on('disconnect', function() {
console.log('Usuario desconectado');
});
});
/*
* Iniciamos la aplicación en el puerto 3000
*/
http.listen(3000, function() {
console.log('listening on *:3000');
});
Cada vez que un usuario se conecte se disparará el evento connection y se crea un socket para ese usuario. Para cada socket se crea un evento ‘nuevo mensaje’ para enviar un mensaje desde el cliente. El nombre del evento en nuestro caso es ‘nuevo mensaje’ pero cada uno puede elegir el que más le guste, eso sí, si se cambia en el servidor también debe ser cambiado en el cliente.
Ahora debemos escribir el código HTML y Java Script para el cliente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sala de chat</title>
<style>
body{font-family: Arial;}
</style>
</head>
<body>
<h3>Mensajes:</h3>
<ul id="listado-msjs">
</ul>
<div id="env-msjs">
<input id="nuevo-msj" placeholder="Nuevo mensaje">
<button id="btn-msj" onclick="enviarMensaje()">Enviar</button>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io(); // Inicializamos socketIO en el cliente
/*
* Evento listener para el 'nuevo mensaje'
* Se puede ver que es el mismo evento que se envia
* desde el servidor.
* Agregamos el mensaje ingresado por el usuario a la lista.
*/
socket.on('nuevo mensaje', function (msj) {
$('#listado-msjs').append( $('<li>').text(msj) );
});
/*
* Emitimos un evento de tipo 'nuevo mensaje' cada vez
* que se presiona el botón enviar y enviamos
* su contenido como mensaje.
*/
function enviarMensaje() {
socket.emit('nuevo mensaje', $('#nuevo-msj').val());
$('#nuevo-msj').val('');
};
</script>
</body>
</html>
Para realizar este cliente utilizamos las librerías jQuery y SocketIO (Para el front-End). En el código se puede ver que se crea un evento ‘nuevo mensaje’ para enviar y otro para recibir mensajes.
Luego para probar esta aplicación debemos ejecutar el comando node server.js y al entrar con la URL localhost:3000 vamos a ver nuestro chat. Para enviar mensajes con dos usuarios conectados podemos abrir dos pestañas distintas.
Bueno gente, eso es todo lo que se tiene que saber a la hora de crear un chat con NodeJS y SocketIO. Espero que les haya servido y ante cualquier problema no duden en dejar un comentario.