cowboy rabbit-websockets
TRANSCRIPT
![Page 1: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/1.jpg)
Erlang +
Message Queue+
HTML 5 Tech
![Page 2: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/2.jpg)
=
Over-engineered Chat Server
![Page 3: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/3.jpg)
WhatCowboy ?https://github.com/extend/cowboy
Small, fast modular web server written in erlang.
![Page 4: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/4.jpg)
WhatGen Bunny https://github.com/mochi/gen_bunny
RabbitMQ client library for simple pubsub in erlang.
![Page 5: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/5.jpg)
WhatWebsocket ?https://www.websocket.org/
Bi-directional web communication mechanism.
![Page 6: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/6.jpg)
Over Architecturing
You want it.I deliver !
![Page 7: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/7.jpg)
Server
Moving parts
Cowboy
Gen Bunny
Browser
![Page 8: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/8.jpg)
Client
Moving parts
Cowboy
Gen Bunny
Browser
![Page 9: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/9.jpg)
Websockets
TechnicalDetour
![Page 10: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/10.jpg)
Client
Moving parts
BrowserBrowser
Server
HTTP
Port 80Port 80
![Page 11: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/11.jpg)
Client
Moving parts
BrowserBrowser
Server
WS
UpgradeUpgradePort 80Port 80
![Page 12: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/12.jpg)
WHY ?
WORKS WITH EXISTING PROXIES
![Page 13: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/13.jpg)
Client JS
Data is live chat stream
![Page 14: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/14.jpg)
JS Connection
wsUrl = "ws://server:8081/websocket";
websocket = new WebSocket(wsUrl);
![Page 15: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/15.jpg)
Websocket Setupwebsocket = new WebSocket(wsURL);
websocket.onopen = ...
websocket.onmessage =
function(evt){ onMessage(e) };
websocket.onerror = ...
![Page 16: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/16.jpg)
onMessage Handler
function onMessage(e) {
Msg = '<p>' + txt + '</p>'
$('#output').prepend(Msg);
};
![Page 17: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/17.jpg)
Smooth
Yeah
![Page 18: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/18.jpg)
Server SideServer
WS
![Page 19: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/19.jpg)
Cowboy
What comes to mind ?
![Page 20: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/20.jpg)
Kid Rock
![Page 21: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/21.jpg)
Fresh Leather
![Page 22: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/22.jpg)
Pretty Lil' web server
![Page 23: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/23.jpg)
Cowboy
Routes, REST, middleware, web sockets and more.
![Page 24: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/24.jpg)
Cowboy
follows OTP principals.
![Page 25: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/25.jpg)
Cowboy WS
Required Callbacks init websocket_init websocket_handle websocket_info websocket_terminate
![Page 26: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/26.jpg)
Cowboy WS
initUpgrades from http → web socket
![Page 27: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/27.jpg)
Cowboy WS
init({tcp, http}, _Req, _Opts) →{upgrade,protocol,cowboy_websocket}.
![Page 28: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/28.jpg)
Cowboy WS
websocket_initRun on each connection.
![Page 29: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/29.jpg)
Cowboy WS
websocket_init(_Name, Req, _Opts) → Pid = consumer:start_link(), {ok, Req, #state{pid=Pid}}.
![Page 30: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/30.jpg)
Cowboy WS
websocket_handleRecv data from client, optionally return data.
![Page 31: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/31.jpg)
Cowboy WS
websocket_handle(Data, Req, State) → {text, Msg} = Data, {reply, {text, << "recv: ", Msg/binary >>}, Req,
State};
![Page 32: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/32.jpg)
Cowboy WS
websocket_infoLive Push data to client
![Page 33: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/33.jpg)
Cowboy WS
websocket_info(Data, Req, State) → {reply, {text, Data}, Req,State};
![Page 34: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/34.jpg)
Sending to RabbitMQRabbitMQ
websocket_handle
![Page 35: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/35.jpg)
Recv from RabbitMQRabbitMQ
websocket_info
gen_bunnyCONSUMER
![Page 36: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/36.jpg)
Message Queues
gen bunny
![Page 37: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/37.jpg)
gen_bunny
follows OTP principals.
![Page 38: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/38.jpg)
callbacks
Required:● handle_message
● init ● handle_call● handle_cast● handle_info● terminate
![Page 39: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/39.jpg)
callbacks
handle_messageHandle messages from the message subscribed message queue.
![Page 40: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/40.jpg)
callbacks
handle_message(Msg, State) →NewState = act_on_msg(Msg,State){noreply, NewState};
![Page 41: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/41.jpg)
MQ perspectiveEx
chan
ge
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
![Page 42: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/42.jpg)
Live demoWireless Network:Name: rabbitPassword: carrot
VISIT:http://10.1.1.1:8081/
![Page 43: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/43.jpg)
Benchmarking
Method:
Connect to WebsocketWait for signal.Send 100 messages.Receive all messages
![Page 44: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/44.jpg)
Benchmarking
Results:(Didn't get this done in time, sorry)
0.5 1 1.5 2 2.5 3 3.5 4 4.50
2
4
6
8
10
12
Column 1
Column 2
Column 3
![Page 45: Cowboy rabbit-websockets](https://reader034.vdocuments.mx/reader034/viewer/2022052310/5560c0bad8b42af43b8b53d5/html5/thumbnails/45.jpg)
Source Codegithub.com/wmeal ing/
bunny-cowboy-websocket