Websockets, Ruby y Pusher Webprendedor 2010

WebSockets in Ruby
(and things you can do with them)
Ismael Celis @ismasan github.com/ismasan
new bamboo
new-bamboo.co.uk pusherapp.com
Friday, 19 November 2010

Polling
Long-polling
Web socket
websockets.org/about.html
HTML5 Web sockets

Casos de uso
•Chat
•Aplicaciones ﬁnancieras
•Juegos
•Presencia de usuarios
•Colaboración
•Notiﬁcaciones Tiempo Real

WebSockets DOM API
<script type="text/javascript" charset="utf-8">
// Socket object
var socket = new WebSocket('ws://some.host.com');
// Callbacks
socket.onopen = function (evt) {
alert('Socket connected: ' + evt.data)
};
// Incoming server message
socket.onmessage = function (evt) {
alert( evt.data )
};
socket.onclose = function (evt) {
alert('Connection terminated')
// reconnect, etc.
};
</script>

WebSockets handshake
Request
Response
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Protocol: sample
Upgrade: WebSocket
Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5
Origin: http://example.com
^n:ds[4U
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Location: ws://example.com/demo
Sec-WebSocket-Protocol: sample
8jKS'y:G*Co,Wxa-
(draft 76)

"x00Hello Worldxff"
Mensajes
// Incoming server message
socket.onmessage = function (evt) {
alert( evt.data )
};
// Send message to server
socket.send("Hello server, this is a new client");

(Ruby) WebSockets server
•Hablar WebSockets (handshake)
•Mantener conexiones abiertas
•Rendimiento
•Escalable
•Threads? Eventos?

EventMachine rubyeventmachine.com
require 'eventmachine'
module EchoServer
def receive_data(data)
send_data data
end
end
EventMachine::run {
EventMachine::start_server 'localhost', 8080, EchoServer
puts 'running echo server on 8080'
}

EM-WebSocket
github.com/igrigorik/em-websocket
EventMachine.run {
EventMachine::WebSocket.start(:host=>'0.0.0.0',:port=>8080) do |socket|
socket.onopen {
# publish message to the client
socket.send 'Websocket connection open'
}
socket.onmessage {|msg|
# echo message to client
socket.send "Received message: #{msg}"
}
end
}

Multicast - subscribers
...
@channel = Channel.new
...
socket.onopen {
@channel.subscribe socket
}
socket.onmessage { |msg|
@channel.send_message msg
}
socket.onclose {
@channel.unsubscribe socket
}

Multicast - subscribers
# Server
socket.onopen {
@channel.subscribe socket
}
class Channel
def initialize
@sockets = []
end
def subscribe( socket )
@sockets << socket
end
...
end

Multicast - channel
class Channel
...
def subscribe( socket )
@sockets << socket
end
def send_message( msg )
@sockets.each do |socket|
socket.send msg
end
end
def unsubscribe( socket )
@sockets.delete socket
end
end

Multicast - ejemplo
var socket = new WebSocket('ws://localhost:8080');
socket.onmessage = function( evt ) {
$('<li>')
.text(evt.data)
.appendTo('#messages');
}
<ul id="messages">
</ul>
HTML
Javascript

Multicast - ejemplo
github.com/ismasan/websockets_examples

Elige tu protocolo
STOMP CONNECT
login: <username>
passcode: <passcode>
<message
from=”john@server.com/ruby”
to=”jane@server.com/ruby”>
<body>Hey Jane!</body>
</message>
XMPP
Your own (JSON?)

Formato personalizado
JSON

{
“event”: “user_connected”,
{
“name” : “Ismael”,
“total_users” : 10
}
}
Event name
Custom data
“data”:

{
“event”: “user_message”,
{
“message” : “Hello!”,
“date” : “23 2010 21:12:28”
}
}
“data”:

Javascript wrapper
var socket = new FancyWebSocket('ws://localhost:8080');
...
socket.bind( 'user_connected', function (user_data) {
// Add user to screen
$('#connected_users').append('<li>' + user_data.name + '</li>');
});
socket.bind( 'user_message', function (msg_data) {
// Add message to screen
$('#messages').append('<li>' + msg_data.message + '</li>');
});

// Broadcast message - jQuery example
$('form#user_input').submit(function () {
var msg = $(this).find('input[name=message]').val();
socket.send( 'user_message', {name: 'Ismael', message: msg} );
return false;
});
Javascript wrapper
{
“event” : “user_message”,
{
“name” : “Ismael”,
“message” : “hello!”
}
}
“data” :

Implementación
var FancyWebSocket = function(url){
var conn = new WebSocket(url);
var callbacks = {};
this.bind = function(event_name, callback){
callbacks[event_name] = callbacks[event_name] || [];
callbacks[event_name].push(callback);
};
this.send = function(event_name, event_data){
var payload = JSON.stringify({event:event_name, data: event_data});
conn.send( payload );
};
// dispatch to the right handlers
conn.onmessage = function(evt){
var json = JSON.parse(evt.data)
dispatch(json.event, json.data)
};
conn.onclose = function(){dispatch('close',null)}
conn.onopen = function(){dispatch('open',null)}
var dispatch = function(event_name, message){
var chain = callbacks[event_name];
if(typeof chain == 'undefined') return; // no callbacks for this event
for(var i = 0; i < chain.length; i++){
chain[i]( message )
}
}
};
gist.github.com/299789

Implementación
var callbacks = {};
};
var payload = JSON.stringify({event:event_name, data:
event_data});
};

Ismael Celis
Implementación
var callbacks = {};
};
var payload = JSON.stringify({event:event_name, data: event_d
};

};
if(typeof chain == 'undefined') return; // no callbacks
for this event
chain[i]( message )
}
}
Implementación
WebSocket

};
// no callbacks for this event
if(typeof chain == 'undefined') return;
chain[i]( message )
}
}
};
Implementación gist.github.com/299789

socket.send( 'user_message', {name: 'Ismael', message: msg} );
Implementación
var payload = JSON.stringify({event:event_name, data: event_data});
conn.send( payload ); // <= send JSON data to socket server
return this;
};

Multicast - datos JSON
github.com/ismasan/websockets_examples

$('#canvas').mousedown(function () {
drawing = true;
})
.mouseup(function () {
drawing = false;
})
.mousemove(function (evt) {
if(drawing) {
var point = [evt.pageX, evt.pageY];
socket.send('mousemove', point);
}
});

var ctx = document.getElementById
('canvas').getContext('2d');
ctx.lineWidth = 1;
ctx.strokeStyle = '#ffffff';
ctx.beginPath();
ctx.moveTo(0, 0);
// Listen to other user's moves
socket.bind('mousemove', function (point) {
ctx.lineTo(point[0],point[1]);
ctx.stroke();
});

Panel de actividad

Panel Rails Rumble

Escalando
?

pusherapp.com

pusherapp.com
Your app
REST
Browsers
Websockets
Existing HTTP

pusherapp.com
<script src="http://js.pusherapp.com/1.6/pusher.min.js"></script>
<script type="text/javascript" charset="utf-8">
var socket = new Pusher('293d8ae77496e1fc053b');
</script>

pusherapp.com
var socket = new Pusher('293d8ae77496e1fc053b');
// Subscribe to channels
var channel = socket.subscribe( 'test' );
channel.bind( 'new_message', function (data) {
alert( data.message );
})

pusherapp.com
// Subscribe to PRESENCE channel
var chat = socket.subscribe( 'presence-chat' );
// Listen to new members
chat.bind( 'pusher:member_added', function (member) {
alert( member.user_data.name );
})

require 'pusher'
require 'sinatra'
post '/messages' do
message = Message.create(params[:message])
Pusher['presence-chat'].trigger(:new_message, message.attributes)
redirect '/messages'
end
pusherapp.com
$ gem install pusher

pusherapp.com
github.com/
lifo/cramp
ismasan/websockets_examples
newbamboo/rumbledash
blog.new-bamboo.co.uk
blog.pusherapp.com

Tutorial
github.com/ismasan/pusher-chat-tutorial

Widgets
var chat = pusher.subscribe('presence-chat');
new Widgets.Messages( chat ); new Widgets.Members( chat );
new Widgets.SoundAlerts( chat );

Widgets
Widgets.Messages = function (chat) {
/*------------------------------------------------------
Listen to messages
-------------------------------------------------------*/
chat.bind( 'message', function (message) {
$('<li>')
.text(message.user + ' dice: ' + message.body)
.appendTo('#messages');
});
}
// new Widgets.Messages( chat );

github.com/ismasan/pusher-chat-tutorial
pusherapp.com/demos
pusherapp.com/docs

Websockets, Ruby y Pusher Webprendedor 2010

More Related Content

What's hot (20)

Similar to Websockets, Ruby y Pusher Webprendedor 2010 (20)

Websockets, Ruby y Pusher Webprendedor 2010