Vamos a ir con la quinta entrrega del curso. Si todavía no has hecho la cuarta donde os contábamos lo del servidor, te animamos que la visites antes.  En esta entrada ya entramos en  el grueso del asunto que es empezar a trabajar con socketIO realmente.

Lo primero que vamos a hacer es abrir una conexión al socket. Para ello, lo que vamos a hacer es llamar a la variable io que ya creamos previamente y vamos a empezar usándolo llamando a su método “on“.

Ese evento “connection” se lo vamos a mandar a los clientes. Pero este método alguien tiene que lanzarlo por lo que vamos a llamar a esa conexión. Este método lo que lo que va a hacer es encargarse de recibir las conexiones de los clientes y va a detectar cada vez que algún cliente se conecte cuando alguien se conecte a nuestro socket nos va a mandar un console.log por ejemplo que nos diga que alguien se conectado con cierta ip.

Para ello crearemos un evento callback en el m´etodo creado que nos escriba por consola lo que encesitamos. En este caso que el cliente con IP XXX.XXX.XX.XX se ha conectado. Esa IP que desconocemos la va a recoger el socket a través de su siguiente método interno: “socket.hadsake.addess” .

Con esto hemos creado un console.log para saber la IP del cliente que se ha conectado a nuestro socket y sacará un mensaje cada vez que alguien se conecte. De momento no vamos a tocar nada más aquí sino que lo vamos a dejar aparcado para un poco más tarde.

Lo que ahora lo que nos interesa es tener una vista donde se cargue el formulario y si se carga el chat. Para eso vamos a usar un middleware que nos da directamente NodeJS o en este caso Express para cargar una vista estática por defecto gracias al método “app.use”.

Antes de que se realice ninguna otra petición vamos a usar el método express.static que es un método que no da el objeto Express para decirle que todo los HTML que haya en la carpeta “client” van a ser html estáticos y van a cargar los ficheros de ahí. Por tanto el index.html que vamos a crear a continuación lo deberemos depositar en dicha carpeta.

Este será un HTML con la estructura básica para que nuestro chat pueda funcionar. Loego te quedaría a ti mejorar todo y darle estilos con CSS, pero en el curso no vamos a perder tiempo en eso.

Te dejamos la estructura básica que debes crear (Puedes hacer Copy & Paste del siguiente código) de nuestro archivo index.html de la carpeta client.

aplicación web de Chat con NodeJS y SocketIO

El index.js que habíamos creado previamente, tras las modificaciones de esta entrada tendrá la siguiente estructura.

var express = require('express');
var app = express();
var server = require('HTTP').Server(App);
var io = require('socket.io')(Server);
 
app.use(express.static('client'));
app.get('hola-mundo', function(req, res){
  res.status(200).send('Hola mundo desde una ruta');
});
 
io.on('connection', function(socket){
  console.log('El cliente con IP ' + socket.hadsake.addess + ' se ha conectado');
});
server.listen(6677, function(){
  console.log('Servidor está funcionando en http://localhost:6677');
});

Hemos llamado a un nuevo fichero llamado main.js es donde vamos a trabajar con los sockets. Lo creamos dentro de la carpeta client y más tarde lo rellenaremos.

Ahora ya está cargado el index en el navegador a través de “app-use” por lo que si actualizamos nuestro navegador obtendremos el título que forma parte del HTML que hemos creado.

aplicación web de Chat con NodeJS y SocketIO