Bricks to build websocket applications on ruby and javascript.

1. Damian Martinelli
WebSockets en Ruby en 5 Minutos
(despues vemos qué hacemos con los 25 minutos restantes)
 Damian Martinelli
 Ingeniero en Informática (UBA)
 Sumavisos (www.sumavisos.com)
 DO2 Online Solutions (www.do2online.com)
 damianmarti@gmail.com
 @damianmarti

2. Damian Martinelli
Interacciones

3. Damian Martinelli
Sobre HTTP
 Internet-Draft
 http://www.whatwg.org/specs/web-socket-protocol/
 GET /demo HTTP/1.1
 Upgrade: WebSocket

4. Damian Martinelli
WebSocket API
 http://dev.w3.org/html5/websockets/
interface WebSocket {
....
attribute Function onopen;
attribute Function onmessage;
attribute Function onerror;
attribute Function onclose;
...
void send(in DOMString data);
void close();
};

5. Damian Martinelli
Servidor Ruby
 EM-WebSocket
 https://github.com/igrigorik/em-websocket
EventMachine.run {
EventMachine::WebSocket.start(:host=>'0.0.0.0',:port=>8080) do |socket|
socket.onopen {
socket.send 'Websocket connection open'
}
socket.onmessage {|msg|
socket.send "Received message: #{msg}"
}
end
}

6. Damian Martinelli
Cliente Ruby
 Web-socket-ruby
 https://github.com/gimite/web-socket-ruby
# Connects to Web Socket server at host example.com port 10081.
client = WebSocket.new("ws://example.com:10081”)
# Sends a message to the server.
client.send("Hello")
# Receives a message from the server.
data = client.receive()

7. Damian Martinelli
Cliente JavaScript
 Soporte de WebSocket JS en el Browser
var socket = new WebSocket('ws://localhost:8080');
socket.onmessage = function( evt ) {
$('<li>')
.text(evt.data)
.appendTo('#messages');
}
socket.send(message);

8. Damian Martinelli
Protocolo para los Mensajes
 JSON?
{
“event”: “new_car”,
“data”:{
“brand” : “VW”,
“model” : ”Golf”
}
}

9. Damian Martinelli
Cliente JavaScript Reloaded
 FancyWebSocket
 https://github.com/ismasan/websockets_examples
socket.bind( 'user_connected', function (user_data) {
$('#connected_users').append('<li>' + user_data.name + '</li>');
});
socket.bind( 'user_message', function (msg_data) {
$('#messages').append('<li>' + msg_data.message + '</li>');
});
socket.send( 'user_message', {name: 'Ismael', message: msg} );

10. Damian Martinelli
Casos de Uso
 Chat
 Juegos
 Colaboración
 Notificaciones en Tiempo Real
 Qué más?

11. Damian Martinelli
A Jugar!!
 Chat
 Pizarra
 ToDo List
 Sumavisos Parsers Activity Dashboard

12. Damian Martinelli
Preguntas?
@damianmarti
damianmarti@gmail.com
Gracias!!!