Lo primero de todo, pediros disculpas por estos 20 días sin escribir lo que faltaba del curso, que ya esta será la última entrada ya que hoy conseguiremos hacer que los mensajes fluyan en todas direcciones, y esto es el objetivo del curso. Como siempre, si has llegado hasta aquí sin haber pasado por las entradas anteriores, te recomiendo que empieces desde el principio del curso.

Para comenzar vamos a maquetar un poco la caja dónde aparecen los mensajes para que sea mucho más visible y bonito. Trabajaremos con la etiqueta style y dentro meteremos los estilos css que queremos. Por ejemplo un width del 95% y un max-width de 400 px y un heigth de 350px para que no sea demasiado ancho. La etiqueta css3 overflow-y: scroll lo que hará es crear un scroll cuando la lista de mensajes supere la altura de 350px que le hemos indicado a esta capa. Le pondremos un pequeño borde y un box-shadow.

También daremos estilos a la clase message que recordemos que es la que tiene la caja donde aparecen los mensajes, dentro de la caja de mensajes que es a la que le dimos estilos arriba. Le pondremos un margin, un padding, un borde, las esquinas redondeadas y un fondo blanco. Los estilos es algo muy personal, si sabes tocar CSS lo mejor es que le des los estilos que más te gusten.

Ahora vamos a seguir haciendo modificaciones sobre el index.html creando un formulario para poder crear mensjaes con unos input con un id nickname y un placeholder “Nick” y un textarea con id text y placeholder “Mensaje“. A continuación el botón para enviar el mensaje con un “submit” que lo que hará será enviar mensajes. Lo que tenemos que hacer nosotros es capturar esos mensajes, para ello en el evento onsubmit creamos la función “return addMessage(this);”.

Esta función tendremos que meterla en un archivo javascript del cliente como por ejemplo en el main.js. Capturaremos los elementos nickname y value y a continuación ocultaremos el nickname para que el usuario no se pueda cambiar el nombre una vez conectado.. A continuación emitiremos el mensaje al socket mediante la función emit y cortaremos la comunicación con return false.

function addMessage(e){
   var message{
      nickname: document.getElementById('nickname').value;
      text: document.getElementById('text').value;
      document.getElementById('nickname').style.display = 'none';
      socket.emit('add-message', message);
      return false;<br lang="javascript" /> } }

En el index.js que recordemos que pertenecía al servidor tenemos que recuperar lo que mandamos desde cliente. Deberemos añadir en “io.on” esa captura quedando así:

var express = require('express');io.on
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');
  socket.emit('messages', messages);
  socket.on('add-message', function(data){
    messages.push(data);
    io.sockets.emit('messages', messages')
  })
});
server.listen(6677, function(){
  console.log('Servidor está funcionando en http://localhost:6677');
});

Con esto ya estaremos enviando y recibiendo mensajes. Podemos probar abriendo la URL desde diferentes navegadores o incluso desde el móvil y desde el ordenador. Podremos comprobar que lo que se manda desde un navegador o dispositivo se recibe en el otro lado de la comunicación.
aplicación web de Chat con NodeJS y SocketIO10

 

Esperamos que hayas aprendido lo suficiente para hacer funcionar esta aplicación que hace que puedas mandar mensajes de chat en un mismo servidor desde diferentes dispositivos. Si tienes cualquier problema, lo mejor será que contactes conmigo para poder darte una rápida y fácil solución.