This document introduces WebSocket and how it can be used for real-time communication between a client and server. It discusses: 1. The basics of WebSocket including how the handshake process works and how events and messages are exchanged. 2. Two approaches for integrating WebSocket into a Ruby/Rails application - as a standalone service or within the application stack. Using it standalone allows the service to run independently while integrating it brings challenges in handling long-running connections. 3. Key considerations for WebSocket including authentication, concurrency models, and whether the server process needs to run permanently to maintain open connections.

1. WebSocket for Web
Rubyists
@ryudoawaru at OEDO’05

2. はじめに
発表する機会をいただき
ありがとうございます

3. 提 供提 供
五倍紅寶石五倍紅寶石

4. 自己紹介
鄧 慕凡（テン ムファン）
a.k.a: 竜堂 終
両方どもある小説の登場人物
Github / Twitter: @ryudoawaru
http://ryudo.tw

5. 台湾人であり

6. ルビーストRubeastであり

7. Rubyの肩書

8. RubyConf Taiwan
執行委員長

9. Rails Girls Taipei
主催人

10. 仕事は

11. 五倍の紅宝石
http://5xruby.tw/en

12. 無限虫制師
Unlimited Bug WorksGenerator

13. 弊社の業務

14. Ruby / Rails の 教育業者

15. コンサルタンシー / オフショア
海外の取引先は日本、シンガポールなどを持ちます

16. Rubyの広める
RailsGirls / RubyConf…etc

17. RWC初めの海外スポンサーになりま
した

18. ここから、英語で話す

19. Agenda
Introduce WebSocket / EM-Websocket.
Architectural Perception for Web
Rubyists.

20. WebSocket
RFC 6455

21. Websocket
W3C / HTML5 Standard
Standard Javascript API
Full-duplex
Pub-Sub between client and server

22. Search in
rubygems.org

24. Gem Category
EventMachine-Websocket
Faye-Websokcet

25. EM-Websocket

26. EM-Websocket
From 2009
Simple implementation
Easily handle c10k by 1 process
http://shokai.org/blog/archives/7149

27. 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

28. 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!!');

29. 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"

30. Events
onopen：When new connection is
established
onmessage：When new message comes
from another side
onclose：When connection is closed by
the other side

31. Methods of Handshake Object
send：Send message to client or server
side.
close：Close connection.

32. Message Flow
Server
Client
Client
Client
1. send msg
2. onmessage
3. Send to
all clients
4. onmessage

33. 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

34. WebSocket Protocol
is Simple.

35. But it’s never easy to
make a great product.

36. Architectural Issue
Application Stack Style
Authentication

37. Application Stack
Style
Standalone or in App?

38. Two Styles
Standalone
In-App

39. Standalone
Web Service
Stack
WebSocket
Service
Stack
Normal HTTP Request
WS Request

40. In App Style
Web Service
Logic
Normal HTTP
Logic
Normal HTTP Request
WS Request

41. Live with HTTP Service in the
Rack Stack
request.websocket?
Rack Stack
WebSocketOther
Rack
Stuffs
YES NO

42. 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

43. 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

44. Standalone or In
App?

45. Normal Web Services
Keeps Connection
for very short
period.
Process could be
terminated w/o
affecting any
client.
Client Server
open
close
open
close

46. WebSocket Service
Long-running
Connection
Stop process
means killing all
connections.
Server
Client
Client
Client

47. 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.

48. 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

49. Authenticate
Confirm identity in handshake

50. Authentication Issue
Client Server
Handshake Request
Handshake Response
Websocket
Confirm at this point!

51. Possible Methods to Confirm
Identity
Cookie
Headers
URL / Query Parameters

52. 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.

53. Identify by Request Headers
Unable to add custom header in the
JavaScript WebSockets API.

54. Identify by URL
Client
GET http://host/chat
WebSocketWeb Service
Use ticket to handshake
Identity
confirmed
Generate URL: ws://host2/abc1234 as
“ticket”

55. Attention
Security issue:
The “ticket" should be removed from
database after connection established.
Should only be valid in a short time.

56. Showcase

57. Chatroom for Forum
iOS APPWEB

58. http://www.focus-sport.club.tw/
Serve all platforms by one stack.
Runs Permanently.
Handle more than 1k concurrent
connections very easily.

59. ご清聴ありがとうございました

60. Any Question?