Real-Time HTML5 and Ruby

Presented at RubyNation on March 24, 2012.

Transcript

1. Real-Time HTML5 and Ruby Luigi Montanez RubyNation 2012
2. Overview Part 1 - Real-time HTML5 Technologies Part 2 - EventMachine Part 3 - Ruby frameworks
3. tl;dw You can do this stu! in Ruby, you don’t need Node.js.
4. Part 1: Real-Time HTML5 Technologies
5. The Enemy: Page Refreshing
6. “Classic” Solutions AJAX AJAX Polling COMET (Long Polling)
7. “Classic” Solutions AJAX AJAX Polling COMET (Long Polling)
8. WebSockets TCP Socket between browser and server Bi-directional Remains open until explicitly closed
9. In the Browser var connection = new WebSocket('ws://example.com/echo'); connection.onopen = function () { connection.send('Ping'); }; connection.onerror = function (error) { // handle error }; connection.onmessage = function (e) { console.log('Server said: ' + e.data); }; connection.onclose = function () { // ensure you expected a close };
10. Just TCP A lower level than HTTP Developer de"nes protocol Support XMPP, IRC, AMQP, VNC Some proxy servers not compatible
11. No JS Poly!ll Flash-based fallback Socket.IO falls back using di!erent methods
12. Bi-directional communication usually overkill.
13. Server-Sent Events Forgotten little brother of WebSockets Downstream, server to browser push Just HTTP Browser handles reconnections Pure JS Poly"ll by Remy Sharp
14. In the Browser var source = new EventSource('/stream'); source.addEventListener('message', function(e) { console.log(e.data); }); source.addEventListener('open', function(e) { ... }); source.addEventListener('error', function(e) { ... });
15. Data data: first line\n data: second line\n\n --- data: {\n data: "msg": "hello world",\n data: "id": 12345\n data: }\n\n source.addEventListener('message', function(e) { var data = JSON.parse(e.data); console.log(data.id, data.msg); });
16. Data IDs and Events id: 12345\n data: AAPL\n data: 572.44\n\n --- data: {"msg": "First message"}\n\n event: userlogon\n data: {"username": "John123"}\n\n event: update\n data: {"username": "John123", "emotion": "happy"}\n\n source.addEventListener('userlogon', function(e) { ... source.addEventListener('update', function(e) { ...
17. Part 2: EventMachine
18. Why EM? Many concurrent, long-held connections Addresses the C10K Problem Can’t use Rails or Rack to support WebSockets and Server-Sent Events
19. Reactor Pattern Single-threaded event loop listens to many sources Dispatches synchronous work to handlers Handlers report when done
20. Timebomb require 'eventmachine' EM.run do EM.add_timer(5) do puts "BOOM" EM.stop_event_loop end EM.add_periodic_timer(1) do puts "Tick" end end $ ruby timer.rb Tick Tick Tick Tick BOOM
21. Other Constructs EM#next_tick EM#defer EM::Deferrable EM::Queue EM::Channel
22. Problem: Pyramid Code or Callback Spaghetti
23. Tip of the Pyramid EventMachine.run { page = EventMachine::HttpRequest.new('http://example.com/').get page.errback { p "Google is down! terminate?" } page.callback { about = EventMachine::HttpRequest.new('http://example2.com').get about.callback { # callback nesting, ad infinitum } about.errback { # error-handling code } } }
24. EM::Synchrony Ruby 1.9 Fibers Abstracts away callbacks and errbacks Code looks synchronous but is actually asynchronous
25. EM + Fiber def http_get(url) f = Fiber.current http = EM::HttpRequest.new(url).get # resume fiber once http call is done http.callback { f.resume(http) } http.errback { f.resume(http) } return Fiber.yield end EM.run do Fiber.new{ page = http_get('http://www.google.com/') puts "Fetched page: #{page.response_header.status}" if page page = http_get('http://www.google.com/search?q=eventmachine') puts "Fetched page 2: #{page.response_header.status}" end }.resume end
26. EM::Synchrony::Multi EventMachine.synchrony do multi = EventMachine::Synchrony::Multi.new multi.add :a, EventMachine::HttpRequest.new(uri1).aget multi.add :b, EventMachine::HttpRequest.new(uri2).apost multi.add :c, EventMachine::HttpRequest.new(uri3).aget res = multi.perform p "Look ma, no callbacks, and parallel HTTP requests!" p res EventMachine.stop end
27. Part 3: Ruby Frameworks
28. All built on top of EventMachine
29. Servers Thin Rainbows!
30. Cramp Built by Pratik Naik, “lifo” http://cramp.in Supports Fibers $ cramp new myapp
31. Server-Sent Events class TimeAction < Cramp::Action self.transport = :sse on_start :send_latest_time periodic_timer :send_latest_time, :every => 2 def send_latest_time data = {'time' => Time.now.to_i}.to_json render data end end
32. Goliath Built by Ilya Grigorik http://goliath.io Supports EM::Synchrony Both a server and a framework
33. Goliath App class Websocket < Goliath::API use Goliath::Rack::Favicon, ‘favicon.ico') map '/ws', WebsocketEndPoint end
34. WebSocket Endpoint class WebsocketEndPoint < Goliath::WebSocket def on_open(env) env.logger.info("WS OPEN") env['subscription'] = env.channel.subscribe { |m| env.stream_send(m) } end def on_message(env, msg) env.logger.info("WS MESSAGE: #{msg}") env.channel << msg end def on_close(env) env.logger.info("WS CLOSED") env.channel.unsubscribe(env['subscription']) end def on_error(env, error) env.logger.error error end end
35. Frameworks AsyncRack Cramp Faye::WebSocket Goliath
36. Caveats Separate app Ports vs. Paths Automated Testing
37. Credits HTML5 Rocks Ilya Grigorik Dan Sinclair Peepcode
38. Questions?