Saltar al contenido principal

Notificaciones

¿Qué es un WebSocket?

WebSocket es un protocolo de red basado en TCP que establece cómo deben intercambiarse datos entre redes. Puesto que es un protocolo fiable y eficiente, es utilizado por prácticamente todos los clientes. El protocolo TCP establece conexiones entre dos puntos finales de comunicación, llamados sockets. De esta manera, el intercambio de datos puede producirse en las dos direcciones.

En las conexiones bidireccionales, como las que crea WebSocket (a veces también websocket o web socket), se intercambian datos en ambas direcciones al mismo tiempo. La ventaja de este intercambio es que se accede de forma más rápida a los datos. En concreto, WebSocket permite así una comunicación directa entre una aplicación web y un servidor WebSocket. En otras palabras: la web que se solicita se muestra en tiempo real.

https://lh7-us.googleusercontent.com/YgeAER8JbOSCQP5DufiZIZu1-_KJ1Zs6Pn86MagZ2HC0AJyGNBEQB8WGme8QHF8sb6sn1iLB9yXWMX7p4FWqY0L_c7lIE3EwWMAd3vLYlQaAJ2gCyhqM5vYxrPFYcD4bX-B3NjveJpftWV9j8LncPwE

Socket.io

Socket.IO es una biblioteca basada en eventos para aplicaciones web en tiempo real que permite crear websockets.

Configuración de un proyecto con Socket.io y Express.js​

Para realizar de manera exitosa la implementación del websocket para notificaciones, es necesario instalar las siguientes librerías:

  • Express
  • Socket.io
  • Nodemon (opcional)

Correr el siguiente comando

npm install express socket.io nodemon

Server - Backend​

Importar Módulos

En esta parte del código se importan las librerías necesarias para crear el servidor y manejar las conexiones del websocket

https://lh7-us.googleusercontent.com/TVwEVuV9r7auYS7d1Gs5hTzt0OgbNZq41AEg9pOv-IYxXGuVkjYkN0wBaZQx5lCF_UX6cNJQ2WpR0RiHoij1-FMPMGnIzvC2lopbcPZdGebQRccemCFQnpCfeVawxjkvZniwlF1OIDfjVpSVPXoPAZ0

Crear Servidor Web

Con express creamos el servidor, posteriormente se configura el socket.io para trabajar con el servidor previamente creado (facilitar la comunicación entre el cliente y servidor) y con cors se permite que solo aquellos que cuenten con ese origin resource tengan acceso al servidor.

https://lh7-us.googleusercontent.com/i3ut09Uwe3mGzvcDe1dY-593sXDfqcAWOJE4i2LMX5zTryHMdym0IqCTdpAylGqCKm15jgjJatnvqM3RUCnWSXtAOb3udB8JzFxrloFtFdnzwxiHTSqAww7D2kwxzMpcgkForFCzv5MQarACNEtaXjw

Conexión con cliente

  • io - el servidor
  • io.on(“connection”...) - se llama el método cuando un cliente se conecta al servidor
  • io.on() - método del servidor de socket.io para escuchar eventos
  • socket.emit() - método del servidor de socket.io para enviar datos a través de cierto evento. Recibe dos parámetros: el primero de ellos es el nombre del evento al que se va a asociar la información y el segundo es la información que se manda.

https://lh7-us.googleusercontent.com/__ActXjlfVHXik_yn57chl4Rv0mZYDc4CXQx896Bdu7ZDqUOgon7yNDVEBzCTGzmt43UlL463UhXLIZ5MXW9umo24xuotPo3GlKiF9oUEXvFTGBFXyfEQ6QNskXtaEGhngNHUbALsntxH5TvIyf-MTw

Inicializar y escuchar en el puerto 3000

https://lh7-us.googleusercontent.com/InsBEQfdoGtlu90YWxgc3u5OmvtacKFOXs0troeWM2K0wnWmqAEyU24qaPBuDrAcKq7ZEwm19VyGryUTJPOPDnSjWQB7_drn58SzmTUTlkz-VVnRVXiOYQc90z6yT-P4NvoC23b2M6Dp327ByCrJSnw

App - Frontend​

Conexión con el backend

Se realiza la conexión websocket del cliente con el servidor y se obtiene “notificationList” del html, donde se mostrará la información que mande el servidor.

https://lh7-us.googleusercontent.com/ItPCTnnJLN_hNvlOh2QCykapF_2kfYsTJZleW1-_qQvIGGakts2kPXqXR0cntXZVB9TDt8XtJOb8OY5QDU4_xt9mcP1ernuiPFDVeX5-OZbWisUK-ZXQEiQyWZI0waQh1YJfC2tH628UZMbLgNF2d8A

Recibir el mensaje del servidor

Recordemos que el método socket.on() estamos escuchando un evento, en este caso el evento “notification”, mismo al que el servidor está enviando información. Cuando se recibe la información que viene del servidor, se renderiza en el DOM.

https://lh7-us.googleusercontent.com/bH4tHjWk1IvUgI19AFDoIURFdJRrMxjR8awlhuEFEhz0_1JmxtQ0E8j6iOdibRrFUEgYtZFVKEVyaimTY5EqCK3KjSoUmW7BlDCnAu2uT_1K--Q7jOeiz2my1JkXmsO9pwic3QxXWPL19NoJq7ceBXk

HTML

Se debe hacer uso del cdn para importar la librería de socket.io

https://lh7-us.googleusercontent.com/EAJzI_YBFBtjlOPWSN8GwpfghdXV0zTKlnS10T_WE717Vh6zQ2T-pG9bvHlw2PS3ESVrRlsFNlDEkVeu7tYOHX47OUA0RShK4PyFZNwyIUAa9FzJetatFj-lqCOGU8RB1MnAZcawNu5NwHY-UOZwWWI

Mostrar la notificación

En esta parte se encuentra el “notificationList” que usamos en el frontend para mostrar en pantalla la información proveniente del servidor.

https://lh7-us.googleusercontent.com/yURQX6qTajokPzcY67jctyScX8Ih-9XalD_uYvTq83nBscOePywRqLFJcbsP0NTEei3GKpWKvBeN3XCTtR30m_325suCdD2QNLf742aJJSrsq92XpRhrOLiNDw0DhwZ8wr1bZjg_M-6sa3sz1-g6hl0

Resumen

El cliente crea una conexión al backend a través de un websocket. Al establecer la conexión,  el servidor emite un mensaje y lo suscribe a un evento. El cliente recibe este mensaje asociado al evento que está escuchando para finalmente renderizar la información en el DOM y el usuario vea la información en su pantalla.

Detalles importantes

  • Existen múltiple métodos adicionales dentro de la librería de socket.io así como otros eventos para diferentes situaciones (como verificar el momento en que se pierde la conexión)
  • El servidor de socket.io se puede configurar aún más, incluso creando headers adicionales para permitir que solo ciertos usuarios puedan visualizar la información que se manda.
  • Se recomienda visualizar la documentación para realizar una implementación más completa y adaptada a las necesidades del proyecto.

Documentación

Ejemplos