Si has llegado hasta aquí sin haber leido el anterior capítulo, te recomendamos hacerlo antes desde este enlace.

En esta nueva entrada vamos a hacer que el cliente se puede conectar a nuestro socket  y nos llegue nuestro console.log a nuestra consola de nodeJS  avisándonos de que alguien se ha conectado a nuestro servidor y nuestro chat. Necesitamos que el socket que detecte que alguien se ha metido a nuestra  aplicación. Para ello vamos a modificar el archivo Main.js del cliente que creamos en la anterior entrada.

Crearemos una variable socket al que le vamos a pasar io.connect y aquí le vamos a decir la URL dónde está el socket alojado, es decir, donde esta aplicación y también le vamos a indicar unos parámetros aquí como por ejemplo “forceNew = true” que lo que hace es forzar la conexión de la aplicación y la URL de nuestro socket.

Si no sabemos  nuestra dirección IP, podemos sacarla a través de la consola de windows. Para ello debemos escribir el comando “ipconfig” y la consola nos mostrará varias líneas. La que nos indica nuestra IP es la línea IPv4. Esta dirección, precedida de http:// es la que pondremos en nuestra ruta del socket y precedida que del puerto que escogimos en un primer momento, que en nuestro caso fue “6677” por lo que deberíamos poner “:6677”. Otra opción es cambiar la IP por localhost, pero tendrías las limitaciones del localhost y sólo podríamos usarlo en nuestro PC.

Ahora si nos actualizamos la URL en el navegador, deberá aparecer una nueva línea en la consola con el mensaje que pusimos en el console.log indicando la IP del equipo que se ha conectado al socket. Si entramos desde otro equipo con otra IP aparecerá también esa línea al estar conectado a la misma red.

aplicación web de Chat con NodeJS y SocketIO

 

Ahora vamos a enviar un mensaje por defecto desde el socket al cliente. Para ello nos creamos un array de mensajes con un id, un texto y un nickname. A continuación lo único que tenemos que hacer es dar la instrucción al socket para que emita el mensaje a través de su método emit.

Debemos añadir para eso el siguiente texto en el archivo index.js;

var messages = [{
  id = 1,
  text = 'Hola! Has llegado al curso del chat en vivo con nodeJS y socketIO',
  nickname = 'developeando.net'
}];

El cliente en el main.js debe recoger ese mensaje a través del evento soclet.on y pasándole como parámetro el objeto que se le manda, en este caso messages. Realizamos una funccion del callback con los datos que le llegan deel servidor y hacer un console.log para ver los datos que tiene por defecto. Estos datos los veremos si abrimos el navegador y actualizamos la página, y a continuaciuón abrimos las herramientas de desarrollador con F12. En la pestaña console veremos nuestro array con los tres parámetros que le hemos pasado.

A continuación creamos una función render para poder pintar ese array de mensajes en el HTML. Le pasamos los datos y creamos una variable HTML utilizando el método map para poder recorrer la información de la variable data para poder trabajar con esa información. En este caso sólo tenemos un dato en el array, peor para poder recoger los datos podemos usar un for o cualquier tipo de bucle. El método map recibe dos parámetros en su función de callback .El primero de ellos es el mensaje y el segundo un indice. El metodo map itera en los objetos del array data y guarda el contenido del indice en la variable mensaje y el indice en la variable index.

Usaremos las comillas invertidas que nos permite hacer una interpolacion de datos escribiendo en diferentes lineas e imprimir dentro de esa cadena diferentes variables. A la función map le haremos un join para dejar un espacio por cada elemento.

Para poder mostrar el contenido del return en la capa que creamos par el mensaje usaremos document.getElementById de JavaScript. A través de innerHTML le metemos el contenido de la variable html.

Si va a ser un proyecto más avanzado que esta sencilla pruebas, deberás enlazar la librería de jQuery y hacer las búsquedas mediante selectores que es mucho más rápido y sencillo.

Este es el código que debe ir en el archivo main.js

var socket = io.connect('http://192.168.1.153:6677', {'forceNew:true'});
socket.on('messages', fuction(data){
console.log(data);
render(data);
});
 
function render(data){
  var html = data.map(function(message, index){
  return(`
    ‹div class="message"›
      ‹strong›${message.nickname}/strong› dice:
      ‹p›${message.text}/p›
    ‹/div›
  `);
  }).join(' ');
}
 
document.getElementById("messages").innerHTML = html;