Presentación "Websockets: Aplicación práctica" Se comentarán qué es y cómo funcionan los Websockets y sus aplicaciones prácticas en un caso de ejemplo. Dirige la charla Daniel Romero Esteban @danielRomeroE

1. 1
Websockets
@danielRomeroE
https://github.com/danielRomero

2. 2
"Es una tecnología que proporciona un canal de comunicación
bidireccional y full-duplex sobre un único socket TCP."
– Wikipedia

3. 3
Similar al HTTP

4. 4
Bidireccional al mismo tiempo

5. 5
En su camino hacia el servidor, el protocolo websocket es compatible
independientemente de la conexión que exista entre proxy y cortafuegos.
La realidad es que no siempre funciona así y la conexión puede perderse.
La implementación de este protocolo en la infraestructura no est'a muy
extendida.

6. 6
Paquito TroncoServidor
Hola Tronco
Sí, Paquito te dice “Hola”
¿Tengo aĺgún mensaje?
Conexión tradicional
Paquito Tronco
Servidor
Hola Tronco Paquito te dice “Hola”
Conexión con websockets

7. 7
El W3C está trabajando en el borrador para especificar la API de
Websockets en navegadores web.
La IETF lo hace para el protocolo.
Ambos en un estado muy avanzado.

8. 8

9. 9
Implementación en RoR con la gema
Websocket-rails
API
Javascript
Navegador web
EventRouter
Controlador
Servidor
BD
Routes
WS
Respuesta

10. 10
http://websockets-betabeers-example.herokuapp.com
var dispatcher = new WebSocketRails('localhost:3000/websocket');
Estableciendo conexión desde el cliente:

11. 11
http://websockets-betabeers-example.herokuapp.com
dispatcher.trigger('new_message', {message: 'Hola', user: 8});
Mandando mensaje desde el cliente:

12. 12
http://websockets-betabeers-example.herokuapp.com
subscribe :new_message, to: ChatSocketController, with_method: :new_message
Recibiendo mensaje en el servidor: El enrutador de eventos.

13. 13
http://websockets-betabeers-example.herokuapp.com
def new_message
broadcast_message :new_message, {
content: "#{message[:message]}"
}
send_message :message_success, {content: 'Mensaje enviado.'}
end
Recibiendo mensaje en el servidor: El controlador

14. 14
http://wesockets-betabeers-example.herokuapp.com
dispatcher.bind('new_message', new_message_function);
function new_message_function(message) {
console.log('Mensaje nuevo: ' + message.content);
}
Recibiendo mensaje en el cliente.

15. 15
Aplicaciones prácticas
● Chat
● Notificaciones en tiempo real (Facebook, Twitter, GitHub)
● Videojuegos
● Aplicaciones empresariales que monitorizan datos en tiempo real

16. 16
Websockets
@danielRomeroE
https://github.com/danielRomero