0
Erlang
+
Message Queue
+
HTML 5 Tech
=
Over-engineered
Chat Server
What
Cowboy ?
https://github.com/extend/cowboy
Small, fast modular web server written in
erlang.
What
Gen Bunny
https://github.com/mochi/gen_bunny
RabbitMQ client library for simple
pubsub in erlang.
What
Websocket ?
https://www.websocket.org/
Bi-directional web communication
mechanism.
Over Architecturing
You want it.
I deliver !
Server
Moving parts
Cowboy
Gen Bunny
Browser
Client
Moving parts
Cowboy
Gen Bunny
Browser
Websockets
Technical
Detour
Client
Moving parts
BrowserBrowser
Server
HTTP
Port 80Port 80
Client
Moving parts
BrowserBrowser
Server
WS
UpgradeUpgradePort 80Port 80
WHY ?
WORKS WITH
EXISTING
PROXIES
Client JS
Data is live chat
stream
JS Connection
wsUrl = "ws://server:8081/websocket";
websocket = new WebSocket(wsUrl);
Websocket Setup
websocket = new WebSocket(wsURL);
websocket.onopen = ...
websocket.onmessage =
function(evt){ onMessage(e)...
onMessage Handler
function onMessage(e) {
Msg = '<p>' + txt + '</p>'
$('#output').prepend(Msg);
};
Smooth
Yeah
Server Side
Server
WS
Cowboy
What comes
to mind ?
Kid Rock
Fresh Leather
Pretty Lil' web server
Cowboy
Routes, REST, middleware,
web sockets and more.
Cowboy
follows OTP principals.
Cowboy WS
Required Callbacks
init
websocket_init
websocket_handle
websocket_info
websocket_terminate
Cowboy WS
init
Upgrades from
http → web socket
Cowboy WS
init({tcp, http}, _Req, _Opts) →
{upgrade,protocol,cowboy_websocket}.
Cowboy WS
websocket_init
Run on each
connection.
Cowboy WS
websocket_init(_Name, Req, _Opts) →
Pid = consumer:start_link(),
{ok, Req, #state{pid=Pid}}.
Cowboy WS
websocket_handle
Recv data from client,
optionally return data.
Cowboy WS
websocket_handle(Data, Req, State) →
{text, Msg} = Data,
{reply, {text, << "recv: ",
Msg/binary >>}, Req,
State};
Cowboy WS
websocket_info
Live Push data to
client
Cowboy WS
websocket_info(Data, Req, State) →
{reply, {text, Data}, Req,State};
Sending to RabbitMQ
RabbitMQ
websocket_handle
Recv from RabbitMQ
RabbitMQ
websocket_info
gen_bunny
CONSUMER
Message Queues
gen bunny
gen_bunny
follows OTP principals.
callbacks
Required:
● handle_message
● init
● handle_call
● handle_cast
● handle_info
● terminate
callbacks
handle_message
Handle messages from the message
subscribed message queue.
callbacks
handle_message(Msg, State) →
NewState = act_on_msg(Msg,State)
{noreply, NewState};
MQ perspective
Exchange
Exchange
“Fanout”
MSG
MSG
MSG
MSG
MSG
MSG
MSG
MSG
MSG
MSG
MSG
MSG
Live demo
Wireless Network:
Name: rabbit
Password: carrot
VISIT:
http://10.1.1.1:8081/
Benchmarking
Method:
Connect to Websocket
Wait for signal.
Send 100 messages.
Receive all messages
Benchmarking
Results:
(Didn't get this done in time, sorry)
0.5 1 1.5 2 2.5 3 3.5 4 4.5
0
2
4
6
8
10
12
Column 1
Column 2
...
Source Code
github.com/wmealing/
bunny-cowboy-websocket
Upcoming SlideShare
Loading in...5
×

Cowboy rabbit-websockets

3,279

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,279
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Cowboy rabbit-websockets"

  1. 1. Erlang + Message Queue + HTML 5 Tech
  2. 2. = Over-engineered Chat Server
  3. 3. What Cowboy ? https://github.com/extend/cowboy Small, fast modular web server written in erlang.
  4. 4. What Gen Bunny https://github.com/mochi/gen_bunny RabbitMQ client library for simple pubsub in erlang.
  5. 5. What Websocket ? https://www.websocket.org/ Bi-directional web communication mechanism.
  6. 6. Over Architecturing You want it. I deliver !
  7. 7. Server Moving parts Cowboy Gen Bunny Browser
  8. 8. Client Moving parts Cowboy Gen Bunny Browser
  9. 9. Websockets Technical Detour
  10. 10. Client Moving parts BrowserBrowser Server HTTP Port 80Port 80
  11. 11. Client Moving parts BrowserBrowser Server WS UpgradeUpgradePort 80Port 80
  12. 12. WHY ? WORKS WITH EXISTING PROXIES
  13. 13. Client JS Data is live chat stream
  14. 14. JS Connection wsUrl = "ws://server:8081/websocket"; websocket = new WebSocket(wsUrl);
  15. 15. Websocket Setup websocket = new WebSocket(wsURL); websocket.onopen = ... websocket.onmessage = function(evt){ onMessage(e) }; websocket.onerror = ...
  16. 16. onMessage Handler function onMessage(e) { Msg = '<p>' + txt + '</p>' $('#output').prepend(Msg); };
  17. 17. Smooth Yeah
  18. 18. Server Side Server WS
  19. 19. Cowboy What comes to mind ?
  20. 20. Kid Rock
  21. 21. Fresh Leather
  22. 22. Pretty Lil' web server
  23. 23. Cowboy Routes, REST, middleware, web sockets and more.
  24. 24. Cowboy follows OTP principals.
  25. 25. Cowboy WS Required Callbacks init websocket_init websocket_handle websocket_info websocket_terminate
  26. 26. Cowboy WS init Upgrades from http → web socket
  27. 27. Cowboy WS init({tcp, http}, _Req, _Opts) → {upgrade,protocol,cowboy_websocket}.
  28. 28. Cowboy WS websocket_init Run on each connection.
  29. 29. Cowboy WS websocket_init(_Name, Req, _Opts) → Pid = consumer:start_link(), {ok, Req, #state{pid=Pid}}.
  30. 30. Cowboy WS websocket_handle Recv data from client, optionally return data.
  31. 31. Cowboy WS websocket_handle(Data, Req, State) → {text, Msg} = Data, {reply, {text, << "recv: ", Msg/binary >>}, Req, State};
  32. 32. Cowboy WS websocket_info Live Push data to client
  33. 33. Cowboy WS websocket_info(Data, Req, State) → {reply, {text, Data}, Req,State};
  34. 34. Sending to RabbitMQ RabbitMQ websocket_handle
  35. 35. Recv from RabbitMQ RabbitMQ websocket_info gen_bunny CONSUMER
  36. 36. Message Queues gen bunny
  37. 37. gen_bunny follows OTP principals.
  38. 38. callbacks Required: ● handle_message ● init ● handle_call ● handle_cast ● handle_info ● terminate
  39. 39. callbacks handle_message Handle messages from the message subscribed message queue.
  40. 40. callbacks handle_message(Msg, State) → NewState = act_on_msg(Msg,State) {noreply, NewState};
  41. 41. MQ perspective Exchange Exchange “Fanout” MSG MSG MSG MSG MSG MSG MSG MSG MSG MSG MSG MSG
  42. 42. Live demo Wireless Network: Name: rabbit Password: carrot VISIT: http://10.1.1.1:8081/
  43. 43. Benchmarking Method: Connect to Websocket Wait for signal. Send 100 messages. Receive all messages
  44. 44. Benchmarking Results: (Didn't get this done in time, sorry) 0.5 1 1.5 2 2.5 3 3.5 4 4.5 0 2 4 6 8 10 12 Column 1 Column 2 Column 3
  45. 45. Source Code github.com/wmealing/ bunny-cowboy-websocket
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×