Angular + Web Sockets

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

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