Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular + Web Sockets

Angular + Web Sockets

Charla acerca de como utilizar Angular junto con Web Sockets por medio de RxJS

8dbca2c5e7e0296afd964af7d1f7b55e?s=128

Alfredo Bonilla

July 21, 2018
Tweet

Transcript

  1. Angular + WebSockets Alfredo Bonilla @brolag

  2. Problema • Necesitamos validar y presentar datos en tiempo real

    de manera efectiva.
  3. ¿Qué son los WebSockets? • “WebSockets es una tecnología basada

    en el protocolo ws, este hace posible establecer una conexión continua full-duplex, entre un cliente y servidor. Un cliente websocket podría ser el navegador del usuario, pero el protocolo es una plataforma independiente.” – Mozilla MDN
  4. ¿Cómo funcionan los WebSockets? • Para establecer una conexión de

    WebSocket, el cliente envía una petición de negociación, a la cual el servidor responde, a esta se le denomina handshake. Cliente Servidor Handshake Conexión bidireccional persistente
  5. ¿Cuándo utilizar WebSockets? • Vienen a reemplazar el concepto de

    long-polling, en donde el cliente debía enviar una petición al servidor, obtener una respuesta e inmeditamente enviar otra petición para mantener la conexión HTTP abierta. • Para mostrar cambios y validaciones de datos en tiempo real. • Excelentes para la implementación de aplicaciones de baja latencia como juegos en línea.
  6. Objeto WebSocket WebSocket WebSocket( in DOMString url, in optional DOMString

    protocols ); WebSocket WebSocket( in DOMString url, in optional DOMString[] protocols );
  7. Interfaces de WebSocket WebSocket El interfaz principal para conectar a

    un servidor Websocket y así enviar y recibir datos a través de la conexión. CloseEvent El evento enviado por el objeto WebSocket cuando se cierra la conexión. MessageEvent El evento enviado por el objeto WebSocket cuando se recibe un mensaje enviado desde el servidor.
  8. Interfaces de WebSocket WebSocket El interfaz principal para conectar a

    un servidor Websocket y así enviar y recibir datos a través de la conexión. CloseEvent El evento enviado por el objeto WebSocket cuando se cierra la conexión. MessageEvent El evento enviado por el objeto WebSocket cuando se recibe un mensaje enviado desde el servidor.
  9. Angular y RxJS La programación reactiva es un paradigma de

    programación asíncrona que abarca los flujos de datos la propagación de los cambios. RxJS es una librería de JavaScript que utiliza observables que facilita el manejo del llamados asíncronos y el código basado en call-backs.
  10. Observables Permiten pasar mensajes a subscriptores, permiten el manejo de

    múltiples valores y eventos de manera síncrona o asíncrona. Define una función para publicar valores que pueden ser mensajes, literales o eventos. En otras palabras, es posible suscribirse a un observable y cuando los valores están listos, este va a emitirlos a un subscriptor.
  11. Subjects • Son como los observables en el sentido de

    que permiten subscriciones, tienen los métodos next(), error() y complete() con la diferencia que permiten emitir valores a múltiples subscriptores en una misma ejecución y no en ejecuciones separadas con es el caso de los observables.
  12. Patrón Observer

  13. Uniendo todos los conceptos Cliente https://github.com/brolag/websockets-client Servidor https://github.com/brolag/websockets-server

  14. ¡Conversemos! Alfredo Bonilla Instagram: @brolag Twitter: @brolag Facebook: @brolag