Desarrolladores: Trucos semanales

Datos en tiempo real con socket.io

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
10:02
  Añadir a marcadores

Transcripción

Los datos que atraviesan la gran carretera de la información todos los días son tantos que a veces resultan abrumadores. La demanda de información es equiparable a la demanda de alimento o casi cualquier otro recurso básico y podemos darnos cuenta de esto, pues a diario y en cualquier momento, estamos pendientes de nuestras redes sociales, del sitio web deportivo o del correo electrónico, del sitio de noticias o registrándonos en algún sitio para recibir información. Tener la información disponible, en cualquier momento, es un requerimiento imprescindible en cualquier sistema de información actual. Escuchar los términos de datos en tiempo real, puede que suene imponente o difícil, pero la verdad es que es muy sencillo, tanto su implementación como su uso. Basta ver robustas y potentes soluciones como Firebase de Google para darnos cuenta que integrar este tipo de soluciones a nuestros proyectos no es tan complicado como parece. Existen técnicas y herramientas muy simples como Socket.IO basados en Node.js que nos permitirán manejar datos en tiempo real, dando la oportunidad a los usuarios de tener una sola fuente de información e impactar a todos los usuarios que estén suscritos, sin necesidad de recargar una página o de configuraciones muy complicadas. Veamos un claro ejemplo de esto. Lo primero que vamos a hacer será instalar Nodemon. Esta es una aplicación que va a estar escuchando todos los cambios en el servidor y, automáticamente, cuando yo modifique algún archivo, se va a reiniciar para capturar los nuevos cambios. Esta es una herramienta muy buena cuando estás en una capa de desarrollo. Ahora, vamos a revisar rápidamente de qué se compone una aplicación que utiliza Socket.IO. En este caso, esta es la aplicación, y tenemos un archivo app.js y un index.html. En esta primera sección tenemos la aplicación que me va a servir, es decir, la aplicación que va a estar mostrando el archivo index.html. Una vez que la aplicación index.html se conecta, va a realizarlo a través de un socket, este socket que se realiza al puerto 8080 de localhost o de la dirección IP que yo le envíe. Lo primero que tendrá que hacer aquí será enviar una conexión, es decir, expresar que ya se conectó y emitir una señal hacia el servidor para que este le escuche. Así que, vamos a emitir primero una señal de este lado, y para esto vamos a utilizar el mismo socket que se ha creado y vamos a escribir socket.on() y vamos a escuchar aquí una señal. En este caso, vamos a escuchar una señal que sea una "noticia". Después que reciba esta "noticia" va a ejecutar una función, y para esto estamos declarando esta función anónima, y vamos a invocar el console.log() para poder informar que algo ha sucedido. En este caso, vamos a leer lo que venga de la señal. Así que esa señal viene "data", vamos a recibir aquí "data". Pero ahora, ¿cómo vamos a enviar news? Bueno, muy sencillo. Necesitamos alguien que lo emita. Así es, entonces, cuando tengamos una conexión a este elemento, es decir, cuando se ejecute esta línea, se va a conectar al servidor, entonces, en el servidor tenemos una fuente que dice connection, es decir, vamos a estar escuchando cuando alguien esté llegando a conectarse. Y cuando este se conecte, vamos a emitir aquí también nosotros una señal, en este caso, vamos a utilizar socket.emit() para emitir la señal y vamos a emitir la señal que está escuchando de este lado, en este caso, será la señal "noticia". Y, una vez que emita la señal "noticia", podemos indicarle que va a enviar también algún objeto, en este caso, vamos a mandar una cosa que se llame "mensaje" y con esto vamos a informarle que: "Se ha conectado satisfactoriamente". Vamos a revisar rápidamente qué sucede y para esto, primero necesitamos tener instalado Socket.IO. Verifiquemos que está instalado con npm install socket.io. Ejecutamos el comando para que esto suceda. Una vez que termine de instalar la librería de Socket.IO vamos a probarla con Nodemon. Entonces, vamos a decirle "nodemon" y vamos a mandar de parámetro el archivo de javascript que se llama app.js y levanta el servidor. En este caso, el servidor lo va a estar levantando directamente en el puerto 8080. Vamos a un navegador y vamos a escribir "localhost:8080". Para esto vamos a inspeccionar el elemento y vamos a ir a la consola. En la consola tenemos un objeto, que es un mensaje, de hecho, es el mensaje que indica que se ha conectado satisfactoriamente. Si nosotros revisamos, es este mismo mensaje que se ha enviado aquí. Incluso, yo podría también notificar a mi servidor de que alguien ya se conectó. Por ejemplo, vamos a enviar también aquí un mensaje a la consola y vamos a mandar un mensaje de que alguien se conectó: "Alguien se ha conectado". Se actualiza esto y aquí me dice todas las conexiones que están tratando de ejecutarse. Aquí salen varias porque, en este caso, tenemos varias ventanas que están tratando de conectarse para poder leer esta conexión. Por ahora, voy a cerrarlas todas y voy a dejar solamente una. Vamos a reiniciar el servidor, con esto reinicia Nodemon, y me indica de que solamente hay dos conexiones, lo cual ahorita está bien. Así, entonces, estoy detectando cuando alguien llega y se conecta y, de la misma manera, el mismo servicio que teníamos aquí puede emitir otra señal, es decir, si yo ya llegué aquí y ya recibí la conexión yo puedo hacer lo que se llama una respuesta. Entonces, en este caso, cuando reciba los datos, yo puedo decir socket.emit() y voy a indicarle al servidor que he recibido su mensaje. Vamos a mandar un mensaje que se llame "respuesta" y, a partir de aquí, vamos a indicar los datos que yo necesito enviar. Entonces, vamos a enviar también aquí un mensaje, y este mensaje que indique "He recibido tus datos". De la misma forma, tiene que existir alguien que escuche el mensaje respuesta. Entonces, tenemos que regresar a nuestro servidor y, a partir de aquí, tenemos que agregar ese elemento que esté escuchando. Entonces, podemos agregar aquí nuestro mensaje de .on y que va a escuchar cada que exista una respuesta. Y, cada que exista una respuesta, va a enviar a una función anónima algo que suceda. En este caso, vamos a enviar una consola y dentro de la consola vamos a mandar a imprimir el valor que venía por dentro. Vamos a probar nuevamente, actualizamos el navegador, se ha conectado satisfactoriamente, llegó el mensaje de este lado y recibe el servidor el mensaje que dice: "He recibido tus datos". Entonces, aquí tenemos mensajes de las dos vías. De la misma manera sucederá, si yo abro este mensaje y necesito enviarlo nuevamente. Recibo la petición de la nueva conexión, es decir, de quien se está conectando a mi servicio. Y, por último, si yo quisiera enviar un mensaje completamente a todos, yo puedo indicar lo siguiente cada que yo me conecte, yo puedo indicar directamente aquí en el servidor, cuando alguien ya se ha conectado, que todos sean notificados. Y para poder enviar ese tipo de notificación voy a utilizar un broadcast. Este broadcast avienta un mensaje a todos los que estén conectados a este servicio. Entonces, simplemente, vamos a decir socket.broadcast.emit(), y lo que mandará de mensaje será una señal completa que diga "Usuario nuevo conectado". Pero para que esto se vea también mejor y sea un poquito más usable, vamos a ponerle aquí userConected y vamos a mandar de nueva cuenta un mensaje y vamos a poner "Usuario nuevo en la red". Ahora, entonces, vamos a agregar también esta señal para que esté escuchando con este socket, vamos a poner aquí socket.on(). Cada que escuche que un usuario nuevo se ha conectado, entonces, vamos a ejecutar una función que recibirá los datos del servidor y simplemente vamos a mandar a la consola el mensaje que llegue en "data". Este mensaje, obviamente, va a salir exclusivamente en los navegadores independientes, así que, vamos a probarlos por aquí, tendré una pestaña de este lado, otra por acá, voy a acceder a la consola y voy a actualizar. Vemos aquí cómo en cada una de las ventanas que se está conectando, me está indicando que hay un usuario nuevo en la red. Así, todos los navegadores reciben la señal de que alguien se conectó. Esa es una manera de hacer un broadcasting. Ahora, si esto lo bajas a tu sitio web o a una aplicación, imagina que alguien se conecta y está notificando de todo lo que sucede para que todas las ventanas se actualicen al momento, para que cambien de color, para que asignen una clase, para que algo suceda visualmente, por ahora estamos mandando mensajes a la consola, pero, tú puedes afectar y detonar ciertas actividades que cambien el estilo o la forma en cómo se ve una página web. Así de potente es trabajar con Socket.IO.