1. Erlang
+
Message Queue
+
HTML 5 Tech

2. =
Over-engineered
Chat Server

3. What
Cowboy ?
https://github.com/extend/cowboy
Small, fast modular web server written in
erlang.

4. What
Gen Bunny
https://github.com/mochi/gen_bunny
RabbitMQ client library for simple
pubsub in erlang.

5. What
Websocket ?
https://www.websocket.org/
Bi-directional web communication
mechanism.

6. Over Architecturing
You want it.
I deliver !

7. Server
Moving parts
Cowboy
Gen Bunny
Browser

8. Client
Moving parts
Cowboy
Gen Bunny
Browser

9. Websockets
Technical
Detour

10. Client
Moving parts
BrowserBrowser
Server
HTTP
Port 80Port 80

11. Client
Moving parts
BrowserBrowser
Server
WS
UpgradeUpgradePort 80Port 80

12. WHY ?
WORKS WITH
EXISTING
PROXIES

13. Client JS
Data is live chat
stream

14. JS Connection
wsUrl = "ws://server:8081/websocket";
websocket = new WebSocket(wsUrl);

15. Websocket Setup
websocket = new WebSocket(wsURL);
websocket.onopen = ...
websocket.onmessage =
function(evt){ onMessage(e) };
websocket.onerror = ...

16. onMessage Handler
function onMessage(e) {
Msg = '<p>' + txt + '</p>'
$('#output').prepend(Msg);
};

17. Smooth
Yeah

18. Server Side
Server
WS

19. Cowboy
What comes
to mind ?

20. Kid Rock

21. Fresh Leather

22. Pretty Lil' web server

23. Cowboy
Routes, REST, middleware,
web sockets and more.

24. Cowboy
follows OTP principals.

25. Cowboy WS
Required Callbacks
init
websocket_init
websocket_handle
websocket_info
websocket_terminate

26. Cowboy WS
init
Upgrades from
http → web socket

27. Cowboy WS
init({tcp, http}, _Req, _Opts) →
{upgrade,protocol,cowboy_websocket}.

28. Cowboy WS
websocket_init
Run on each
connection.

29. Cowboy WS
websocket_init(_Name, Req, _Opts) →
Pid = consumer:start_link(),
{ok, Req, #state{pid=Pid}}.

30. Cowboy WS
websocket_handle
Recv data from client,
optionally return data.

31. Cowboy WS
websocket_handle(Data, Req, State) →
{text, Msg} = Data,
{reply, {text, << "recv: ",
Msg/binary >>}, Req,
State};

32. Cowboy WS
websocket_info
Live Push data to
client

33. Cowboy WS
websocket_info(Data, Req, State) →
{reply, {text, Data}, Req,State};

34. Sending to RabbitMQ
RabbitMQ
websocket_handle

35. Recv from RabbitMQ
RabbitMQ
websocket_info
gen_bunny
CONSUMER

36. Message Queues
gen bunny

37. gen_bunny
follows OTP principals.

38. callbacks
Required:
● handle_message
● init
● handle_call
● handle_cast
● handle_info
● terminate

39. callbacks
handle_message
Handle messages from the message
subscribed message queue.

40. callbacks
handle_message(Msg, State) →
NewState = act_on_msg(Msg,State)
{noreply, NewState};

41. MQ perspective
Exchange
Exchange
“Fanout”
MSG
MSG
MSG
MSG
MSG
MSG
MSG
MSG
MSG
MSG
MSG
MSG

42. Live demo
Wireless Network:
Name: rabbit
Password: carrot
VISIT:
http://10.1.1.1:8081/

43. Benchmarking
Method:
Connect to Websocket
Wait for signal.
Send 100 messages.
Receive all messages

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. Source Code
github.com/wmealing/
bunny-cowboy-websocket