Chat App with Angelo and WebSockets in 15m

talk given at Cascadia Ruby 2014 about websockets, sse, ruby, and a gem called angelo that makes it super easy to work with these things.

Transcript

1. How to build a Blog Engine in 15 Minutes with Ruby on Rails http://rubyonrails.org By Kenichi Nakamura & Terence Lee
2. How to build a Blog Engine Social App in 15 Minutes with Ruby on Rails Angelo https://rubyonrails.org http://github.com/kenichi/angelo By Kenichi Nakamura & Terence Lee "Whoops!"
3. Kenichi Nakamura @kenichi_pdx
4. ESRI PDX
5. https://www.flickr.com/photos/stirwise/3871928490
6. http://ziggy.is
9. #rubykaraoke ← @headius @plexus →
10. ← @_zzak @danishkhan
11. A Whole New World... #RubyNation @hone02 @kenichi_pdx
12. 70's themed #rubykaraoke at SE voicebox, tonight @ 8pm
13. Terence Lee @hone02
16. Austin, TX
18. Agenda WebSockets Reactor Pattern Server Sent Events Bonus Round Profit Ken Terence Ruby Karaoke Friday Hug ps://www.flickr.com/photos/turbojoe/556776940
20. Agenda WebSockets Reactor Pattern Server Sent Events Bonus Round Profit Ken Terence Ruby Karaoke Friday Hug ps://www.flickr.com/photos/turbojoe/556776940
21. WebSockets https://www.flickr.com/photos/spavaai/3071630030
22. full duplex communication over a single TCP connection
23. WebSockets Handshake Request GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9... Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com
24. WebSockets Handshake Response HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept:HSmrc0sMlYUk... Sec-WebSocket-Protocol: chat
25. Reactor Pattern https://www.flickr.com/photos/oakridgelab/4092138191
26. design pattern for handling concurrent requests
27. Often used in GUIs like the DOM, etc.
28. The Reactor EM.run { ... }
29. Register Handlers EM.run { ws = Faye::WebSocket::Client.new('ws://www.example.com/') ws.on :open do |event| p [:open] ws.send('Hello, world!') end ws.on :message do |event| p [:message, event.data] end ws.on :close do |event| p [:close, event.code, event.reason] ws = nil end }
30. Modular: decouples application logic from event handling
31. Difficult to debug. Hard to reproduce. Nondeterministic.
34. Chat App v1
35. Backend
36. def initialize(app) @app = app @clients = [] uri = URI.parse(ENV["REDISCLOUD_URL"]) @redis = Redis.new(host: uri.host, port: uri.port, password: uri.password) Thread.new do redis_sub = Redis.new(host: uri.host, port: uri.port, password: uri.password) redis_sub.subscribe(CHANNEL) do |on| on.message do |channel, msg| @clients.each {|ws| ws.send(msg) } end end end end
37. def initialize(app) @app = app @clients = [] uri = URI.parse(ENV["REDISCLOUD_URL"]) @redis = Redis.new(host: uri.host, port: uri.port, password: uri.password) Thread.new do redis_sub = Redis.new(host: uri.host, port: uri.port, password: uri.password) redis_sub.subscribe(CHANNEL) do |on| on.message do |channel, msg| @clients.each {|ws| ws.send(msg) } end end end end
38. if Faye::WebSocket.websocket?(env) ws = Faye::WebSocket.new(env, nil, {ping: KEEPALIVE_TIME }) ws.on :open do |event| p [:open, ws.object_id] @clients << ws end ws.on :message do |event| p [:message, event.data] @redis.publish(CHANNEL, sanitize(event.data)) end ws.on :close do |event| p [:close, ws.object_id, event.code, event.reason] @clients.delete(ws) ws = nil end # Return async Rack response ws.rack_response
39. if Faye::WebSocket.websocket?(env) ws = Faye::WebSocket.new(env, nil, {ping: KEEPALIVE_TIME }) ws.on :open do |event| p [:open, ws.object_id] @clients << ws end ws.on :message do |event| p [:message, event.data] @redis.publish(CHANNEL, sanitize(event.data)) end ws.on :close do |event| p [:close, ws.object_id, event.code, event.reason] @clients.delete(ws) ws = nil end # Return async Rack response ws.rack_response
40. if Faye::WebSocket.websocket?(env) ws = Faye::WebSocket.new(env, nil, {ping: KEEPALIVE_TIME }) ws.on :open do |event| p [:open, ws.object_id] @clients << ws end ws.on :message do |event| p [:message, event.data] @redis.publish(CHANNEL, sanitize(event.data)) end ws.on :close do |event| p [:close, ws.object_id, event.code, event.reason] @clients.delete(ws) ws = nil end # Return async Rack response ws.rack_response
41. if Faye::WebSocket.websocket?(env) ws = Faye::WebSocket.new(env, nil, {ping: KEEPALIVE_TIME }) ws.on :open do |event| p [:open, ws.object_id] @clients << ws end ws.on :message do |event| p [:message, event.data] @redis.publish(CHANNEL, sanitize(event.data)) end ws.on :close do |event| p [:close, ws.object_id, event.code, event.reason] @clients.delete(ws) ws = nil end # Return async Rack response ws.rack_response
42. if Faye::WebSocket.websocket?(env) ws = Faye::WebSocket.new(env, nil, {ping: KEEPALIVE_TIME }) ws.on :open do |event| p [:open, ws.object_id] @clients << ws end ws.on :message do |event| p [:message, event.data] @redis.publish(CHANNEL, sanitize(event.data)) end ws.on :close do |event| p [:close, ws.object_id, event.code, event.reason] @clients.delete(ws) ws = nil end # Return async Rack response ws.rack_response
43. if Faye::WebSocket.websocket?(env) ws = Faye::WebSocket.new(env, nil, {ping: KEEPALIVE_TIME }) ws.on :open do |event| p [:open, ws.object_id] @clients << ws end ws.on :message do |event| p [:message, event.data] @redis.publish(CHANNEL, sanitize(event.data)) end ws.on :close do |event| p [:close, ws.object_id, event.code, event.reason] @clients.delete(ws) ws = nil end # Return async Rack response ws.rack_response
44. "Whoops!" still need some Javascript. Frontend
45. <input type="text" id="msg-input" placeholder="msg here"></input> <br/> <button id="send-msg">Send</button> <script> var ws = new WebSocket('ws://localhost:4567/'); ws.onmessage = function(e) { alert(e.data); }; $('#send-msg').on('click', function(e) { e.preventDefault(); ws.send($('#msg-input').val()); $('#msg-input').val(''); }); </script>
46. <input type="text" id="msg-input" placeholder="msg here"></input> <br/> <button id="send-msg">Send</button> <script> var ws = new WebSocket('ws://localhost:4567/'); ws.onmessage = function(e) { alert(e.data); }; $('#send-msg').on('click', function(e) { e.preventDefault(); ws.send($('#msg-input').val()); $('#msg-input').val(''); }); </script>
47. <input type="text" id="msg-input" placeholder="msg here"></input> <br/> <button id="send-msg">Send</button> <script> var ws = new WebSocket('ws://localhost:4567/'); ws.onmessage = function(e) { alert(e.data); }; $('#send-msg').on('click', function(e) { e.preventDefault(); ws.send($('#msg-input').val()); $('#msg-input').val(''); }); </script>
48. <input type="text" id="msg-input" placeholder="msg here"></input> <br/> <button id="send-msg">Send</button> <script> var ws = new WebSocket('ws://localhost:4567/'); ws.onmessage = function(e) { alert(e.data); }; $('#send-msg').on('click', function(e) { e.preventDefault(); ws.send($('#msg-input').val()); $('#msg-input').val(''); }); </script>
49. Heroku Button Demo github.com/heroku-examples/ruby-websockets-chat- demo faye-ws-chat.herokuapp.com https://www.flickr.com/photos/txmx-2/8974335557
52. Angelo
55. require 'angelo' class Casc < Angelo::Base websocket '/' do |ws| websockets << ws ws.on_message do |msg| websockets.each {|s| s << msg} end end end Casc.run Websocket Route Builder
56. require 'angelo' class Casc < Angelo::Base websocket '/' do |ws| websockets << ws ws.on_message do |msg| websockets.each {|s| s << msg} end end end Casc.run Websocket Route Builder
57. require 'angelo' class Casc < Angelo::Base websocket '/' do |ws| websockets << ws ws.on_message do |msg| websockets.each {|s| s << msg} end end end Casc.run Websocket Route Builder
58. https://www.flickr.com/photos/superamit/1043379069 Tasks
59. HEART = '❤' task :hearts do every 1 do websockets[:hearts].each {|ws| ws.write HEART} end end websocket '/hearts' do |ws| async :hearts websockets[:hearts] << ws end async - go off and do this thing
60. HEART = '❤' task :hearts do every 1 do websockets[:hearts].each {|ws| ws.write HEART} end end websocket '/hearts' do |ws| async :hearts websockets[:hearts] << ws end async - go off and do this thing
61. HEART = '❤' task :hearts do every 1 do websockets[:hearts].each {|ws| ws.write HEART} end end websocket '/hearts' do |ws| async :hearts websockets[:hearts] << ws end async - go off and do this thing
62. HEART = '❤' task :hearts do every 1 do websockets[:hearts].each {|ws| ws.write HEART} end end websocket '/hearts' do |ws| async :hearts websockets[:hearts] << ws end async - go off and do this thing
63. HEART = '❤' task :hearts do every 1 do websockets[:hearts].each {|ws| ws.write HEART} end end websocket '/hearts' do |ws| async :hearts websockets[:hearts] << ws end async - go off and do this thing
64. Chat App v2
65. websocket '/' do |ws| websockets << ws async :subscribe, Redis::CHANNEL_KEY unless @@subscribed ws.on_message do |msg| Redis.with do |r| r.publish Redis::CHANNEL_KEY, sanitize(msg) end end end
66. websocket '/' do |ws| websockets << ws async :subscribe, Redis::CHANNEL_KEY unless @@subscribed ws.on_message do |msg| Redis.with do |r| r.publish Redis::CHANNEL_KEY, sanitize(msg) end end end
67. websocket '/' do |ws| websockets << ws async :subscribe, Redis::CHANNEL_KEY unless @@subscribed ws.on_message do |msg| Redis.with do |r| r.publish Redis::CHANNEL_KEY, sanitize(msg) end end end
68. websocket '/' do |ws| websockets << ws async :subscribe, Redis::CHANNEL_KEY unless @@subscribed ws.on_message do |msg| Redis.with do |r| r.publish Redis::CHANNEL_KEY, sanitize(msg) end end end
69. task :subscribe do |channel| @@subscribed = true catch :empty do r = Redis.new_redis r.subscribe channel do |on| on.message do |c, msg| websockets.each {|ws| ws.write msg} throw :empty if websockets.length == 0 end end end @@subscribed = false end
70. task :subscribe do |channel| @@subscribed = true catch :empty do r = Redis.new_redis r.subscribe channel do |on| on.message do |c, msg| websockets.each {|ws| ws.write msg} throw :empty if websockets.length == 0 end end end @@subscribed = false end
71. Frontend
72. It just uses ruby everywhere
74. Live Running Demo http://github.com/kenichi/angelo-ws-heroku http://angelo-test.herokuapp.com https://www.flickr.com/photos/garryknight/2849850914
75. Server Sent Events https://www.flickr.com/photos/gchorus/3247847081
76. Originated from Opera in 2006
77. Internet Explorer does not support Server Sent Events :(
78. EventSource API allows continuous data streams or message updates to be sent to the Browser
79. Proxyable. Faster. Reconnects.
80. class Casc < Angelo::Base post '/' do sses.each {|sse| sse.write sse_message(params[:msg])} end eventsource '/' do |es| sses << es end end Casc.run Eventsource route builder
81. class Casc < Angelo::Base post '/' do sses.each {|sse| sse.write sse_message(params[:msg])} end eventsource '/' do |es| sses << es end end Casc.run Eventsource route builder
82. Eventsource route helper class Casc < Angelo::Base post '/' do sses.each {|sse| sse.write sse_message(params[:msg])} end get '/' do eventsource do |es| sses << es end end end Casc.run
83. class Casc < Angelo::Base post '/' do sses.each {|sse| sse.write sse_message(params[:msg])} end eventsource '/' do |es| sses << es end end Casc.run Eventsource route builder
84. Event creation helpers SSE_DATA_TEMPLATE = "data: %s\n\n" SSE_EVENT_TEMPLATE = "event: %s\ndata: %s\n\n" def sse_event event_name, data data = data.to_json if Hash === data SSE_EVENT_TEMPLATE % [event_name.to_s, data] end def sse_message data data = data.to_json if Hash === data SSE_DATA_TEMPLATE % data end
85. Chat App v2.1
86. Backend
87. post '/' do content_type :json Redis.with do |r| r.publish Redis::CHANNEL_KEY, sanitize(params[:msg].to_json) end PUBLISHED end eventsource '/sse/' do |es| sses << es async :subscribe, Redis::CHANNEL_KEY unless @@subscribed end
88. post '/' do content_type :json Redis.with do |r| r.publish Redis::CHANNEL_KEY, sanitize(params[:msg].to_json) end PUBLISHED end eventsource '/sse/' do |es| sses << es async :subscribe, Redis::CHANNEL_KEY unless @@subscribed end
89. task :subscribe do |channel| @@subscribed = true catch :empty do r = Redis.new_redis r.subscribe channel do |on| on.message do |c, msg| sses.each {|es| es.write sse_message(msg)} throw :empty if sses.length == 0 end end end @@subscribed = false end
90. Frontend
91. <input type="text" id="msg-input" placeholder="msg here"></input> <br/> <button id="send-msg">Send</button> <script> var ws = new WebSocket('ws://localhost:4567/'); ws.onmessage = function(e) { alert(e.data); }; $('#send-msg').on('click', function(e) { e.preventDefault(); ws.send($('#msg-input').val()); $('#msg-input').val(''); }); </script>
92. <input type="text" id="msg-input" placeholder="msg here"></input> <br/> <button id="send-msg">Send</button> <script> var es = new EventSource('/'); es.onmessage = function(e) { alert(e.data); }; $('#send-msg').on('click', function(e) { e.preventDefault(); $.post('/', {msg: $('#msg-input').val()}); $('#msg-input').val(''); }); </script>
93. Live Running Demo http://github.com/kenichi/angelo-sse-heroku http://sse.nakamura.io https://www.flickr.com/photos/txmx-2/9141685386
94. Use Web Sockets for duplex communication
95. Server Sent Events are faster. Updates to the browser. Also beware of IE.
96. Use Angelo. It just uses Ruby Everywhere*
97. "Whoops!" *still need some Javascript.
98. Look all the stuff I'm not doing!
99. Real Time Ruby, It's a Thing.
100. Thanks! @bascule et al @halorgium @jcoglan @mperham @kyledrake @andyet https://www.flickr.com/photos/thomashawk/2414327353 @tpitale @davystevenson
101. Bonus Round
104. http://mapattack.org/iphone http://mapattack.org/android
105. #Secret Levels
106. before do # runs before every route handler end get '/' do content_type :json raise RequestError.new foo: 'msg' end post '/' do halt 404 if params[:nope] end after do # runs after every route handler # unless RequestError is raised end
107. https://github.com/rtomayko/tilt
108. Angelo::Tilt::ERB class Casc < Angelo::Base include Angelo::Tilt::ERB get '/' do erb :index end end __END__ /views layout.html.erb index.html.erb
109. https://github.com/rkh/mustermann
110. Angelo::Mustermann class Casc < Angelo::Base include Angelo::Tilt::ERB include Angelo::Mustermann get '/:foo/bar' do @foo = params[:foo] erb :index end get '/(avatar|user)/(?<device_id>.*).jpg', type: :regexp do @img_name = params[:device_id] erb :avatar end end