Introduction to WAMP, a protocol enabling PUB/SUB and RPC over Websocket

transcript

The WAMP protocol

Autobahn + Crossbar.io

WAMP protocol(Web Application Messaging Protocol)

≠WAMP server stack

(Windows, Apache, MySQL, PHP)

WAMPis a protocol created to embrace the power of

websockets

(http://wamp.ws/)

It enables different technologies, processes and machines to communicate with each

others, in real time.

WAMP offers 2 tools

PUB/SUB

From and to :

● JS (Node & browser ≥ IE10)● Python (pure)● C++● Java● Objective-C● PHP● C#

RPC : Remote Procedure Call

● Allows to call a function from another code remotely via a websocket.

● Asynchronous, fast, clean, light. But Simple.● Parameters and return values can be: arrays,

mappings, numbers and strings.● Works between different langages.● Works between local processes or accross

Internet.

RPC – Example 1Everything you usually do with AJAX

Browser

Just like a GET /user/profile, but faster since via Websocket.

Server

getUserProfile()

{'user' : 'bob', 'id' : 1}

RPC – Example 2Communication between browsers

Bob's browser

If you code a chess game and Bob moves a piece, his browser candirectly tells Jane's to move the piece on her screen.

moveQueen('A', '5')

RPCJane's

browser

RPC – Example 3Push data to the browser

If you code a chess game with an AI and it's the bot's turn, the server can directly tell the human player's browser to move the piece on its screen.

moveQueen('A', '5')

RPCBrowser Server

RPC – Example 4Microservices

Instead of a big central application, you can have several separated processes, each of them doing one task. Benefits : you can reuse them, share them between

projects, restart them independantly, dispatch them on several servers...

moveQueen('A', '5')

Browser

Auth AI ChatTournament

SendMsg('yolo')getPool()login()

RPC – Example 5The browser is not everything

You can mix as many platforms as you need. You can control your Python powered Arduino Yun from a desktop app or just make it react to the sensor placed on

your JS powered Tessel. The IoT feels right at home.

Tessel + Accelerometer

Destop AppArduinoYun

startServo()

Show me the code !

Here is a simple example of a browser callinga function defined in another browser.

Visual resultIndex.html

button.html

Callback

Response

index.html<!DOCTYPE html><html> <head> <script src="https://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.min.jgz" type="text/javascript"></script></head><body><p id="baby">Call callMeMaybe() from another browser :)</p></body><script>// Connecting to the WAMP public test server.var connection = new autobahn.Connection({ url: 'wss://demo.crossbar.io/ws', realm: 'realm1'});

// This code runs once the connection is opened.connection.onopen = function (session) { // We expose this function so it can be called // by another client session.register('callMeMaybe', function(message){ // Let's change the content of the page. document.getElementById('baby').innerHTML = message // We return the browser userAgent so we can test it // on 2 different browsers and see they communicate return navigator.userAgent; });};

// Open the connection.connection.open();</script></html>

button.html<!DOCTYPE html><html> <head> <script src="https://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.min.jgz" type="text/javascript"></script></head><body><p><button onClick='callIt()'>Call It, bobby !</button></p></body><script>// Connection to the test servervar connection = new autobahn.Connection({ url: 'wss://demo.crossbar.io/ws', realm: 'realm1'});

// Runs this code once the connection is opened.connection.onopen = function(session) { callIt = function(){ // Call the function callMeMaybe() on the other browser session.call("callMeMaybe", ['I called baby !']) // This returns a promise */ .then(function(userAgent){ alert(userAgent); }); return false; }};

// Opens the connection.connection.open();</script></html>

How does it work ?

● Each piece of code using WAMP is a client, needing a dedicated library to do so.

● You need a central server between all clients. Like RabbitMQ for AMQP. It's not P2P like WebRTC.

● The libs and server are free, available now and ready to be used.

● There are security features (permissions, encryption). This is just a simple demo.

RPC – Under the hoodCommunication between browsers

Bob's browser

Even if you don't see it while coding, a router relays all the messages.This router needs to be installed somewhere for WAMP to work.

Jane'sbrowser

moveQueen('A', '5')

Router

RPC – Under the hoodCommunication between browsers

AutoBahnJS

moveQueen('A', '5')

AutoBahnJSCrossbar.io

AutobahnX (AutobahnPython, AutobahnJS, AutobahnCpp…) are the name of the de facto libs to enable your code, the client, to speak WAMP.

Crossbar.io is the name of the most full featured router.

From your perspective

● You only need to code the clients, with one of the Autobahn libs.

● For your tests, you can use the public demo router (wss://demo.crossbar.io/ws). There is nothing to install.

● Once you get serious, you install crossbar.io. Just like you would do with Apache or Nginx for HTTP.

PUB/SUB

● A client SUBscribes to a topic.

● Another client PUBlishes a message about this topic.

● All subscribers interested in this topic receive the message.

PUB/SUB

● A client SUBscribes to a topic.

● Another client PUBlishes a message about this topic.

● All subscribers interested on this topic receive the message.

Same as with RPC, but you can send messages to 0 or N clients, not just 1. However, there is no way to get a return value.

PUB/SUB – Example 1Notifications

Browser

The server just made a new video available. All browsers receiveimmediately this information and display it on the page.

Server

{'title: 'Funny cat', 'id' : 2}

SUB : subscribed to « new video »

Browser Browser

PUB/SUB – Exemple 2Synchronisation

Web crawler

All your components are always aware of everything they need to know, wherever they are. Here, the admin changes a setting value,

and can notify all processes.

Encodingserver

Web site

SUB : subscribed to « setting changed »

{'settings': 'debug', 'oldValue' : false, 'newValue' : true}

Show me the code !

Same as RPC, but this time, you can open index.html in several tabs at the same time.

Visual resultIndex.html button.html

Callback

(Has SUB first)

If you open 10 tabs with index.html,the 10 of them will react. But button.html cannot get a returnvalue from any of them.

index.html<!DOCTYPE html><html> <head> <script src="https://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.min.jgz" type="text/javascript"></script></head><body><p id="baby">I'm expecting news about fascinatingSubject</p></body><script>// Connection to the WAMP test public servervar connection = new autobahn.Connection({ url: 'wss://demo.crossbar.io/ws', realm: 'realm1'});

// Runs this code once the connection is opened.connection.onopen = function (session) { // We ask for this function to be called if there // are any news about this topic. session.subscribe('fascinatingSubject', function(message){ // Let's change the content of the page. document.getElementById('baby').innerHTML = message // No return value, PUB/SUB is a one way lane. });};

button.html<!DOCTYPE html><html> <head> <script src="https://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.min.jgz" type="text/javascript"></script></head><body><p><button onClick='sayIt()'>Say It, bobby !</button></p></body><script>// Connection to the WAMP test servervar connection = new autobahn.Connection({ url: 'wss://demo.crossbar.io/ws', realm: 'realm1'});

// Runs this code once the connection is opened.connection.onopen = function(session) { sayIt = function(){ // We publish something about fascinatingSubject session.publish("fascinatingSubject", ['Amazing !']);

// No return value since we don't know which clients // are going to get the message. }};

The full stack

Protocol Client Router

What to do with all this ?

● Complete Web apps: WAMP is a great companion for frameworks such as AngularJS and replace AJAX or manual websockets to get real time updates.

● Small connected devices (IoT, Raspberry PI, Arduino…) : replace MQTT.

● Micro-services: authentication, logging, video encoding... Replace AMQP and ZeroMQ.

● Video games.● Collaborative apps (Google Doc-like).● Androids or iOS native apps.

About Crossbar.io

● Crossbar.io is a full featured WAMP router. Without router, clients can't talk to each others.

● It should be accessible via websockets. ● It can manage clients life cycle.● It can also manage non WAMP processes life

cycle (like supervisord) to make it easy for you to create micro-services oriented systems.

● It even packs a Web servers if you need it.

What's the catch?

● It's a young technology. WAMP V1 was recently deprecated by WAMP 2.

● Some tools still need to be created : user authentication, advanced debugging...

● Being asynchronous is a requirement: for now, it means WSGI (and so Django) is not compatible. An HTTP bridge is in discussion.

● The documentation is moving a lot. But somebody was hired to settle this.

Will it blend ?

If you stress a bit your WAMP stack, you can :

● Send 32+ bytes in 1,000 PubSub/sec to 1,000 clients with an average latency of 25 ms and 65% CPU load.

or● Send 6,000 RPC/sec, with an average latency of 400 ms.

or● Serve 6,000 clients, with an average latency of 850ms.

On a Raspberry Pi :)

Where to start ?

Choose your language, and start writing a small client using the public test server:

http://crossbar.io/docs/Choose-your-Weapon/

Or check out the demos :

https://demo.crossbar.io/

Introduction to WAMP, a protocol enabling PUB/SUB and RPC over Websocket

Software