"websockets: aplicación práctica" por @danielromeroe - charla incluida en el 2º...
DESCRIPTION
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 @danielRomeroETRANSCRIPT
![Page 1: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/1.jpg)
1
Websockets
@danielRomeroE
https://github.com/danielRomero
![Page 2: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/2.jpg)
2
"Es una tecnología que proporciona un canal de comunicación bidireccional y full-duplex sobre un único socket TCP."
– Wikipedia
![Page 3: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/3.jpg)
3
Similar al HTTP
![Page 4: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/4.jpg)
4
Bidireccional al mismo tiempo
![Page 5: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/5.jpg)
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.
![Page 6: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/6.jpg)
6
Paquito TroncoServidor
Hola TroncoSí, Paquito te dice “Hola”
¿Tengo aĺgún mensaje?
Conexión tradicional
Paquito TroncoServidor
Hola Tronco Paquito te dice “Hola”
Conexión con websockets
![Page 7: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/7.jpg)
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.
![Page 8: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/8.jpg)
8
![Page 9: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/9.jpg)
9
Implementación en RoR con la gema Websocket-rails
APIJavascript
Navegador web
EventRouter
Controlador
Servidor
BD
Routes
WS
Respuesta
![Page 10: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/10.jpg)
10
http://websockets-betabeers-example.herokuapp.com
var dispatcher = new WebSocketRails('localhost:3000/websocket');
Estableciendo conexión desde el cliente:
![Page 11: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/11.jpg)
11
http://websockets-betabeers-example.herokuapp.com
dispatcher.trigger('new_message', {message: 'Hola', user: 8});
Mandando mensaje desde el cliente:
![Page 12: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/12.jpg)
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.
![Page 13: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/13.jpg)
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
![Page 14: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/14.jpg)
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.
![Page 15: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/15.jpg)
15
Aplicaciones prácticas
● Chat
● Notificaciones en tiempo real (Facebook, Twitter, GitHub)
● Videojuegos
● Aplicaciones empresariales que monitorizan datos en tiempo real
![Page 16: "Websockets: Aplicación práctica" por @danielRomeroE - Charla incluida en el 2º BetabeersGuada organizado por Beperk.com](https://reader033.vdocumento.com/reader033/viewer/2022052904/557e8924d8b42acf658b4fcc/html5/thumbnails/16.jpg)
16
Websockets
@danielRomeroE
https://github.com/danielRomero