Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebSocket For Web Rubyists

5,597 views

Published on

My talk for #oedo05

Published in: Technology
  • Be the first to comment

WebSocket For Web Rubyists

  1. 1. WebSocket for Web Rubyists @ryudoawaru at OEDO’05
  2. 2. はじめに 発表する機会をいただき ありがとうございます
  3. 3. 提 供提 供 五倍紅寶石五倍紅寶石
  4. 4. 自己紹介 鄧 慕凡(テン ムファン) a.k.a: 竜堂 終 両方どもある小説の登場人物 Github / Twitter: @ryudoawaru http://ryudo.tw
  5. 5. 台湾人であり
  6. 6. ルビーストRubeastであり
  7. 7. Rubyの肩書
  8. 8. RubyConf Taiwan 執行委員長
  9. 9. Rails Girls Taipei 主催人
  10. 10. 仕事は
  11. 11. 五倍の紅宝石 http://5xruby.tw/en
  12. 12. 無限虫制師 Unlimited Bug WorksGenerator
  13. 13. 弊社の業務
  14. 14. Ruby / Rails の 教育業者
  15. 15. コンサルタンシー / オフショア 海外の取引先は日本、シンガポールなどを持ちます
  16. 16. Rubyの広める RailsGirls / RubyConf…etc
  17. 17. RWC初めの海外スポンサーになりま した
  18. 18. ここから、英語で話す
  19. 19. Agenda Introduce WebSocket / EM-Websocket. Architectural Perception for Web Rubyists.
  20. 20. WebSocket RFC 6455
  21. 21. Websocket W3C / HTML5 Standard Standard Javascript API Full-duplex Pub-Sub between client and server
  22. 22. Search in rubygems.org
  23. 23. Gem Category EventMachine-Websocket Faye-Websokcet
  24. 24. EM-Websocket
  25. 25. EM-Websocket From 2009 Simple implementation Easily handle c10k by 1 process http://shokai.org/blog/archives/7149
  26. 26. Typical Server Side Code EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080) do |ws| ws.onopen { ws.send "Hello Client!"} ws.onmessage { |msg| ws.send "Pong: #{msg}" } ws.onclose { puts "WebSocket closed" } end
  27. 27. Typical Client Side Code var ws = new WebSocket('ws://host/uri'); ws.onopen = function() { show('websocket opened'); }; ws.onclose = function() { show('websocket closed'); } ws.onmessage = function(m) { show('websocket message: ' + m.data); }; ws.send('Hello Websocket!!');
  28. 28. How does it work Client Server Handshake Response Websocket Handshake Request GET /chat HTTP 1.1 Host: server.host.com Upgrade: Websocket Connection: Upgrade Origin: http://host.com Sec-Websocket-Key: “WwV7thr/Uwrg3mA57risrQ==" Sec-WebSocket-Version:"13" Connection:”Upgrade" Sec-WebSocket-Accept: F0VaFFGV/ JHx1hJWBlhuJAqdse8= Upgrade:"websocket"
  29. 29. Events onopen:When new connection is established onmessage:When new message comes from another side onclose:When connection is closed by the other side
  30. 30. Methods of Handshake Object send:Send message to client or server side. close:Close connection.
  31. 31. Message Flow Server Client Client Client 1. send msg 2. onmessage 3. Send to all clients 4. onmessage
  32. 32. Basic EM-WebSocket Code Style conns_in_channel = Set.new EM::WebSocket.start(...) do |ws| ws.onopen do |request| conns_in_channel.add ws end ws.onmessage do |msg| conns_in_channel.each do |conn| EM.next_tick{conn.send(msg)} end end ws.onclose do conns_in_channel.delete ws end end Store connection Remove connection on quit Set to store connection Send msg to connections 1 by 1
  33. 33. WebSocket Protocol is Simple.
  34. 34. But it’s never easy to make a great product.
  35. 35. Architectural Issue Application Stack Style Authentication
  36. 36. Application Stack Style Standalone or in App?
  37. 37. Two Styles Standalone In-App
  38. 38. Standalone Web Service Stack WebSocket Service Stack Normal HTTP Request WS Request
  39. 39. In App Style Web Service Logic Normal HTTP Logic Normal HTTP Request WS Request
  40. 40. Live with HTTP Service in the Rack Stack request.websocket? Rack Stack WebSocketOther Rack Stuffs YES NO
  41. 41. Identify by Request Headers # middlewares/chat_backend.rb def call(env) if Faye::WebSocket.websocket?(env) # WebSockets logic goes here ws.rack_response else @app.call(env) end end https://devcenter.heroku.com/articles/ ruby-websockets
  42. 42. Identify by Request Headers # config/routes.rb Example::Application.routes.draw do match "/websocket", :to => ActionCable.server, via: [:get, :post] end https://github.com/rails/actioncable
  43. 43. Standalone or In App?
  44. 44. Normal Web Services Keeps Connection for very short period. Process could be terminated w/o affecting any client. Client Server open close open close
  45. 45. WebSocket Service Long-running Connection Stop process means killing all connections. Server Client Client Client
  46. 46. Concurrency Model WebSocket Gems use one of following concurrency models: Reactor: EventMachine based Gems. Thread: Tubesock. Mixed: ActionCable This may conflicts with model of your normal Web Services.
  47. 47. Comparison of Connection Features Normal Web Works WebSocket Connection Period short long Concurrency Model Depend on App Server Reactor or Thread Process Long- Running? No Yes
  48. 48. Authenticate Confirm identity in handshake
  49. 49. Authentication Issue Client Server Handshake Request Handshake Response Websocket Confirm at this point!
  50. 50. Possible Methods to Confirm Identity Cookie Headers URL / Query Parameters
  51. 51. Identify by Cookie Easy approach for web developers. WebSocket may run at different host. Some browsers don’t support cookie on ws:// request. Most mobile APP’s http client may not support cookie/session by default.
  52. 52. Identify by Request Headers Unable to add custom header in the JavaScript WebSockets API.
  53. 53. Identify by URL Client GET http://host/chat WebSocketWeb Service Use ticket to handshake Identity confirmed Generate URL: ws://host2/abc1234 as “ticket”
  54. 54. Attention Security issue: The “ticket" should be removed from database after connection established. Should only be valid in a short time.
  55. 55. Showcase
  56. 56. Chatroom for Forum iOS APPWEB
  57. 57. http://www.focus-sport.club.tw/ Serve all platforms by one stack. Runs Permanently. Handle more than 1k concurrent connections very easily.
  58. 58. ご清聴ありがとうございました
  59. 59. Any Question?

×