How to use AMQP protocol in Browser (JavaScript)
In my previous 2 posts, Connect to Azure Event Hub in browser ( using AMQP over WebSockets ) and Connect to Azure IoT Hub in browser ( using AMQP over WebSockets ), I introduced the parameters needed to connect to IoT Hub and Event Hub. Since we chose to connect in front-end, so we have to find a JavaScript library for AMQP. However, it isn't quite easy to find one.
rhea is a reactive messaging library based on the AMQP protocol which meet our need.It is a NodeJS project, but it provides a browserify command in script. So all we have to do is to make a little changes.
1.In the type wrapper (types.js), it is designed for Node so it uses Buffer class in code.
[javascript]
if (o instanceof Buffer) {
return types.wrap_binary(o);
}
[/javascript]
The corresponding data structure in front-end JavaScript is ArrayBuffer. So here we make this code compatible with browser.
[javascript]
if (o instanceof Buffer || o instanceof ArrayBuffer) {
return types.wrap_binary(o);
}
[/javascript]
2.The library doesn't implement disconnect method. So let's add one in container.js
[javascript]
Container.prototype.disconnect = function () {
this.connection.close();
};
[/javascript]
Now let's try to browerify the project!
First we need to set dependency.In the terminal, point to project root folder, set the environment variable NODE_PATH to the parent folder of your rhea project. For example, my project folder is C:\Users\v-zhq\IoT\rhea then you will set NODE_PATH to C:\Users\v-zhq\IoT.
Then execute in project folder C:\Users\v-zhq\IoT\rhea:
npm run browserify
rhea.js get!
Then you can use example to test! Point to examples/websockets and start an HTTP server. Then visit https://localhost:8000, input websocket url.
client.html ( in line #31 I made a little change or client object can't be initialized )
[html]
<!DOCTYPE html>
<html>
<head>
<title>AMQP websockets example</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- This example was adapted from a chat example included in the
excellent 'JavaScript: The Definitive Guide', by David Flanagan and
published by O'Reilly. -->
<script src="rhea.js"></script>
</head>
<body>
<input type="text" id="request" style="width:100%"/>
<script>
var server = prompt("Enter details of server to use", "ws://localhost:5673");
var input = document.getElementById("request");
input.focus();
function append(txt) {
var node = document.createTextNode(txt);
var div = document.createElement("div");
div.appendChild(node);
document.body.insertBefore(div, input);
input.scrollIntoView();
}
input.onchange = function() {
sender.send({"body":input.value});
input.value = "";
};
var client = new(require("rhea"))();
client.on("message", function (context) {
append(context.message.body);
});
var ws = client.websocket_connect(WebSocket);
var connection = client.connect({"connection_details":ws(server, ["AMQPWSB10"]), "reconnect":false});
connection.open_receiver("examples");
var sender = connection.open_sender("examples");
</script>
</body>
</html>
[/html]