Js remote conf

RabbitMQ + JavaScript
JS Remote Conf 2017

Presenter Info
Bart Wood
Distinguished Software Engineer at Henry Schein
(medical/dental company)
I work on large Single Page Applications for dentists
JavaScript + Java-esque Backend
Front end + Back end

What to talk about?
Message Queues and RabbitMQ
JavaScript + STOMP to communicate with RabbitMQ
Possibilities with this technology

Presentation Content
Slides here: https://www.slideshare.net/BartWood/js-remote-conf
Amusing pictures to compensate for bland slide design

Queues are useful
Decouple publishers and consumers.
Guaranteed (near 100%) message delivery.
Publishers and consumers can process at different rates. Auto-scale
Asynchronous (scalable) by default. Synchronous is possible.
Foundation for service integration.
Publisher Queue Magic Consumer

RabbitMQ
Based on a standard called AMQP (Advanced Message Queuing
Protocol (version 0-9-1)
Born around 2003 in the financial industry
Extremely flexible compared to previous queuing tech

RabbitMQ Installation
Takes around 15-30 minutes to install RabbitMQ on Linux etc.
https://www.rabbitmq.com/install-debian.html
How to install Web STOMP for RabbitMQ
http://www.rabbitmq.com/blog/2012/05/14/introducing-rabbitmq-web-stomp/
Demos running with RabbitMQ on Ubuntu VM

CloudAMQP.com
CloudAMQP.com is a hosted Rabbit solution.
Easy / no admin or local servers needed.
$99+ / month for instance that can use STOMP with JavaScript.
Need to use SockJS, native WebSockets not possible for now.

RabbitMQ Basics
Publisher
Java,
JavaScript,
Etc.
Exchange Queue
Consumer
Java,
JavaScript,
Etc.
Exchanges: Like a DNS routing table, routes message
Direct Exchange: Simple Routing Key
Topic Exchange: Complex Routing Key
publish: keyPartOne.keyPartTwo.keyPartThree
consume: keyPartOne.*.*
VHost: Like a sandbox in RabbitMQ
Auto Delete Queue
Routing Key
Durable Queue
Exclusive Queue
Queue ..
Exchange …
RK
Consumer ..Publisher ..
Queues can have many consumers.
Message only goes to a single consumer.
Round robin balancing.
Data persisted if no
consumers
Only a single consumer
Deleted when consumer
dies
Rabbit Cluster

JavaScript > RabbitMQ Stack
JavaScript code
Stomp.js / STOMP protocol
Web Sockets / optional SockJS
RabbitMQ Server rabbitmq_web_stomp plugin

STOMP Protocol
Streaming Text Oriented Message Protocol.
Basic commands such as CONNECT, SEND, SUBSCRIBE, ETC.
Sits on top of Web Sockets (ws or wss)
Rabbit also supports MQTT (internet of things) and HTTP(S)
Your refrigerator (MQTT) can communicate with your web app (STOMP)
via RabbitMQ

Stomp.js
Very small / simple.
http://jmesnil.net/stomp-websocket/doc/
No longer “supported” but it still works very well and it’s simple / small.
Supports older STOMP 1.1 but latest STOMP 1.2 isn’t very different
Fairly easy to update in the future.

SockJS.js (optional)
Websockets for older browsers
http://caniuse.com/#search=websocket
https://github.com/sockjs/sockjs-client
CloudAMQP appears to require it.
Custom RabbitMQ installs do not.

Bunny Draw Demo
http://xxx:15670/web-stomp-examples/bunny.html?ws
<script src="stomp.js"></script>
var ws = new WebSocket('ws://' + window.location.hostname + ':15674/ws');
var client = Stomp.over(ws);
var on_error = function() {console.log('error');};
var on_connect = function(x) {
client.subscribe('/topic/bunny', function(d) {
var point = JSON.parse(d.body); // code omitted …
});
};
client.connect(‘guest', ‘guest', on_connect, on_error, '/');
var send = function(data) {
client.send('/topic/bunny', {}, data);
};
// The security model is only for demo purposes.
// Using the default Vhost of ‘/’
// Using a simple routing key of ‘bunny’

RabbitMQ STOMP destination header
https://www.rabbitmq.com/stomp.html
client.send('/topic/bunny‘ …
client.subscribe('/topic/bunny‘ …
Publish / consume to queues managed by the STOMP gateway:
/queue/<simpleRoutingKey>
Publish / consume to queues NOT managed by the STOMP gateway: (queues not auto-created)
/amq/queue/<simpleRoutingKey>
Publish / consume to topics managed by the default exchange “amq.topic”:
/topic/< wildCardRoutingKey >
Publish / consume to named topic exchanges:
/exchange/<topicExchangeName>/<wildCardRoutingKey>

Stomp Protocol Headers
https://www.rabbitmq.com/stomp.html
client.subscribe('/exchange/topic-exchange/keyOne.*', function(msg) {
// message handler logic here
}, {id: 'my-durable-queue', durable: true, 'auto-delete': false});
STOMP Headers can be passed as argument to the Stomp.js functions:
connect
disconnect
subscribe
send
ack/nack
Possible header options:
destination, id, durable, auto-delete, reply-to, exclusive
Advanced options:
x-dead-letter-exchange, x-dead-letter-routing-key, x-expires, x-message-ttl, etc.

RabbitMQ Security
Anything that can be done with Http can be done with RabbitMQ (with a bit
of work). AMQP is simply another protocol like Http.
Demo rabbit security settings
https://www.rabbitmq.com/access-control.html
Delegate security to Web Service (filter before Rabbit handles requests)
https://github.com/rabbitmq/rabbitmq-auth-backend-http
Custom tokens in headers (like Oauth 2)

Demo Topic Exchange / Routing Keys
// Auto deleted queue example
console.log(msg.body);
});
// Durable queue example. Lost messages will be shown when browser re-connects
console.log(msg.body);
}, {id: 'my-durable-queue', durable: true, 'auto-delete': false});

Foundations for an
Enterprise Service Bus
Other simpler products out there for simple pub/sub over Http
WebSync, etc.
Same bus / channels to integrate state between servers, browsers,
micro-services, third party partners etc.

Foundation of Enterprise Service Bus
Service A
Cluster
Service B
Cluster
Third Party
Integration A
Third Party
Integration B
Browser 1 Browser 13,932
Rabbit
Cluster
Http
Load Balancer
Replace Http
With STOMP

Js remote conf

More Related Content

Viewers also liked (7)

Similar to Js remote conf (20)

Recently uploaded (20)

Js remote conf

Editor's Notes