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 financieras

• Juegos

•Presencia de usuarios

•Colaboración

•Notificaciones 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 handshakeRequest

Response

GET /demo HTTP/1.1Host: example.comConnection: UpgradeSec-WebSocket-Key2: 12998 5 Y3 1 .P00Sec-WebSocket-Protocol: sampleUpgrade: WebSocketSec-WebSocket-Key1: 4 @1 46546xW%0l 1 5Origin: http://example.com

^n:ds[4U

HTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: UpgradeSec-WebSocket-Origin: http://example.comSec-WebSocket-Location: ws://example.com/demoSec-WebSocket-Protocol: sample

8jKS'y:G*Co,Wxa-

(draft 76)

"\x00Hello World\xff"

Mensajes

// Incoming server messagesocket.onmessage = function (evt) { alert( evt.data )};

// Send message to serversocket.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# Serversocket.onopen { @channel.subscribe socket}

class Channel def initialize @sockets = [] end def subscribe( socket ) @sockets << socket end ...end

Multicast - channelclass 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 endend

Multicast - ejemplo

var socket = new WebSocket('ws://localhost:8080');

socket.onmessage = function( evt ) {$('<li>')

.text(evt.data) .appendTo('#messages');}

Javascript

Multicast - ejemplo

github.com/ismasan/websockets_examples

Elige tu protocolo

STOMP CONNECTlogin: <username>passcode: <passcode>

</message>

Your own (JSON?)

Formato personalizado

{“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ónvar 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 FancyWebSocket = function(url){

var conn = new WebSocket(url);

var callbacks = {};

Ismael Celis

Implementaciónvar FancyWebSocket = function(url){ var conn = new WebSocket(url);

var callbacks = {};

Implementación

WebSocket

var FancyWebSocket = function(url){

var dispatch = function(event_name, message){ var chain = callbacks[event_name]; // no callbacks for this event if(typeof chain == 'undefined') return; for(var i = 0; i < chain.length; i++){ chain[i]( message ) } }};

Implementación gist.github.com/299789

socket.send( 'user_message', {name: 'Ismael', message: msg} );

Implementación

this.send = function(event_name, event_data){ 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

Multicast - datos JSON

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

Multicast - datos JSONvar ctx = document.getElementById('canvas').getContext('2d');ctx.lineWidth = 1;ctx.strokeStyle = '#ffffff';ctx.beginPath();ctx.moveTo(0, 0);

// Listen to other user's movessocket.bind('mousemove', function (point) { ctx.lineTo(point[0],point[1]); ctx.stroke();});

Panel de actividad

Panel Rails Rumble

Escalando

?Friday, 19 November 2010

pusherapp.com

Your appREST

Browsers

Websockets

Existing HTTP

pusherapp.com

pusherapp.com

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

pusherapp.com

// Subscribe to PRESENCE channelvar chat = socket.subscribe( 'presence-chat' ); // Listen to new memberschat.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_examplesnewbamboo/rumbledash

blog.new-bamboo.co.ukblog.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/demospusherapp.com/docs

Websockets, Ruby y Pusher Webprendedor 2010

Documents

Hacking websockets

WebSockets in Enterprise Applications

Using Websockets in Play !

Hacking with WebSockets - Black Hat Briefingsmedia.blackhat.com/.../Shekyan/...Hacking_Websocket_Slides.pdf · A Trip into HTML5! WebSockets background! ... WebSockets API describes

Hacking (with) WebSockets

Introduction to WebSockets

Presentación Webprendedor Desarrollo

WebSockets On Fire

Unity and WebSockets

Node.js and websockets intro

Using WebSockets with ColdFusion

HTML5 WebSockets {week 14 }

Programming WebSockets - OSCON 2010

HTML5 WebSockets {week 13 }

Realtime with websockets

Working with WebSockets in Perl

OVERVIEW OF WEB BASED SERVER PUSH TECHNOLOGIESindigoo.com/dox/itdp/05_WWW/Comet-WebSockets-HTML5.pdfComet –HTML5 –WebSockets indigoo.com 3. WebSockets (1/3) History of HTML and

Intro to WebSockets

Hacking with WebSockets

Taller Escribir Para El Web Webprendedor