Real-Time HTML5 and Ruby

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?