Websockets talk at Rubyconf Uruguay 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

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

Use cases
•Chat (lame)
•Stocks (lame but challenging)
•Games
•Presence
•Collaboration
•Real-time notiﬁcations

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"
Messages
// 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
•Speak WebSockets (handshake)
•Keep connections alive
•Performant!
•Scalable
•Threads? Evented?

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

Multicast - example
github.com/ismasan/websockets_examples

Pick your protocol
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?)

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

Custom JSON format
{
“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” :

Implementation gist.github.com/299789
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 )
}
}
};

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

Ismael Celis
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 )
}
Implementation
WebSocket
gist.github.com/299789

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

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

Multicast - JSON data
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();
});

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

Websockets talk at Rubyconf Uruguay 2010

More Related Content

What's hot (20)

Similar to Websockets talk at Rubyconf Uruguay 2010 (20)

Recently uploaded (20)

Websockets talk at Rubyconf Uruguay 2010