Presentación de cómo utilizar Web Sockets en Angular.

1. Angular + WebSockets
Alfredo Bonilla
@brolag

2. Agenda
• ¿Qué son los WebSockets?
• ¿Cómo funcionan los WebSockets?
• ¿Cuándo es una buena idea utilizar WebSockets?
• Objeto WebSocket

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
Web Developer – Gorilla Logic
Instagram: @brolag
Twitter: @brolag
www.brolag.com