Cowboy - RabbitMQ and websockets

A quick overview on how to plug together some buzzword enabled tech for your enjoyment.

Transcript

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 Browser Browser Server HTTP Port 80 Port 80
11. Client Moving parts Browser Browser Server WS Upgrade Upgrade Port 80 Port 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” M S G M S G M S G M S G M S G M S G M S G M S G M S G M S G M S G M S G
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