Permalink
Browse files

makes the view customizable by the user

  • Loading branch information...
videlalvaro committed May 15, 2011
1 parent 6fdd51d commit 67353f90dc0d2b7ae2f7114ebc3c7eb3fe69e77d
Showing with 107 additions and 70 deletions.
  1. +34 −5 README.md
  2. +35 −0 priv/www/index.html
  3. +38 −65 priv/www/js/rmqws.js
View
@@ -42,7 +42,9 @@ You can publish test messages by calling the following helper function inside th
rabbit_websockets_util:publish_msg(Exchange, Msg, RKey).
-All three parameters are binaries.
+All three parameters are binaries, for example:
+
+ rabbit_websockets_util:publish_msg(<<"amq.fanout">>, <<"Hello Websockets!">>, <<"">>).
## Configuration ##
@@ -66,13 +68,40 @@ You can modify such settings on your `rabbitmq.config` file like this:
## Modifying the UI ##
-The Web UI is not easily modifiable as of now. You still can implement your own view.
+To implement your own UI you need to have the following javascript files in your HTML:
+
+ <script type="text/javascript" src="/js/jquery.min.js"></script>
+ <script type="text/javascript" src="/js/rmqws.js"></script>
+
+A sample view can be found on `priv/www/index.html`
+
+The `RabbitMQWs` object will fire the following events:
+
+`rmqws-connection-status`: passes the connection status as parameter to the event handler.
+
+`rmqws-onmessage`: passes the message received from RabbitMQW to the event handler.
+
+`rmqws-onerror`: signals an error to the event handler.
+
+Some sample callbacks can be added like this:
+
+ $(document).ready(function() {
+ var rmqws = new RabbitMQWs();
+
+ rmqws.start();
-The important bits are the Websockets event handling and the function `RabbitMQWs.prototype.switchExchange = function(exchange, routing_key)`.
+ $(rmqws).bind('rmqws-onconnection-status', function(event, status){
+ console.log(status);
+ });
-The `switchExchange` function expects two parameters, the exchange name and the routing key. They are sent to the server using the following format:
+ $(rmqws).bind('rmqws-onmessage', function(event, msg){
+ console.log(msg);
+ });
- exchange_name:routing_key
+ $(rmqws).bind('rmqws-onerror', function(event, error){
+ console.log("#info", error);
+ });
+ };
## License ##
View
@@ -42,5 +42,40 @@ <h3>Info:<h3>
</div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/rmqws.js"></script>
+ <script type="text/javascript">
+ (function($) {
+
+ function displayMessage(where, message) {
+ $(where).append("<li>"+message+"</li>").attr({ scrollTop: $(where).attr("scrollHeight") });
+ };
+
+ $(document).ready(function() {
+ var rmqws = new RabbitMQWs();
+
+ rmqws.start();
+
+ $(rmqws).bind('rmqws-onconnection-status', function(event, status){
+ displayMessage("#info", status);
+ });
+
+ $(rmqws).bind('rmqws-onmessage', function(event, msg){
+ displayMessage("#messages", msg);
+ });
+
+ $(rmqws).bind('rmqws-onerror', function(event, error){
+ displayMessage("#info", error);
+ });
+
+ $('form#exchange').submit(function(e) {
+ e.preventDefault();
+ var exchange = $.trim($('#name').val());
+ var routing_key = $.trim($('#routing_key').val());
+ rmqws.switchExchange(exchange, routing_key);
+ displayMessage("#info", "Connected to: " + exchange + " using: " + routing_key);
+ $('form#exchange').get(0).reset();
+ });
+ });
+ })(jQuery);
+ </script>
</body>
</html>
View
@@ -1,73 +1,46 @@
-(function($) {
- var RabbitMQWs = function() {
- this.ws = null;
- this.exchange = null;
- var that = this;
- window.onunload = function() {
- if(that.ws) {
- that.ws.close();
+var RabbitMQWs = function() {
+
+ var that = {
+ ws: null,
+
+ start: function() {
+ if ("WebSocket" in window) {
+ // browser supports websockets
+ this.ws = new WebSocket("ws://" + window.location.host + "/service");
+ var that = this;
+ this.ws.onopen = function() {
+ // websocket is connected
+ $(that).trigger('rmqws-onconnection-status', ['connected']);
+ };
+ this.ws.onmessage = function (evt) {
+ // that.displayMessage("#messages", evt.data);
+ $(that).trigger('rmqws-onmessage', [evt.data]);
+ };
+ this.ws.onclose = function() {
+ // websocket was closed
+ $(that).trigger('rmqws-onconnection-status', ['disconnected']);
+ };
+
+ } else {
+ // browser does not support websockets
+ $(that).trigger('rmqws-onerror', ["Sorry, your browser does not support websockets."]);
}
- }
- };
-
- RabbitMQWs.prototype.connect = function() {
- if ("WebSocket" in window) {
- // browser supports websockets
- this.ws = new WebSocket("ws://" + window.location.host + "/service");
- var that = this;
- this.ws.onopen = function() {
- // websocket is connected
- that.toggleConnStatus('connected');
- };
- this.ws.onmessage = function (evt) {
- that.displayMessage("#messages", evt.data);
- };
- this.ws.onclose = function() {
- // websocket was closed
- that.toggleConnStatus('disconnected');
- that.displayError("You got disconnected from the server");
- };
+ },
- } else {
- // browser does not support websockets
- this.displayError("Sorry, your browser does not support websockets.");
+ switchExchange: function(exchange, routing_key) {
+ var exchange = exchange;
+ var routing_key = routing_key;
+ if(exchange.length > 0) {
+ this.ws.send(exchange + ':' + routing_key);
+ }
}
};
- RabbitMQWs.prototype.displayError = function(msg) {
- alert(msg);
- };
-
- RabbitMQWs.prototype.toggleConnStatus = function(status) {
- this.displayMessage("#info", status);
- };
-
- RabbitMQWs.prototype.displayMessage = function(where, message) {
- $(where).append("<li>"+message+"</li>").attr({ scrollTop: $(where).attr("scrollHeight") });
- };
-
- RabbitMQWs.prototype.switchExchange = function(exchange, routing_key) {
- var exchange = $.trim(exchange);
- var routing_key = $.trim(routing_key);
- if(exchange.length > 0) {
- this.ws.send(exchange + ':' + routing_key);
- this.displayMessage("#info", "Connected to: " + exchange + " using: " + routing_key);
- this.exchange = exchange;
+ window.onunload = function() {
+ if(that.ws) {
+ that.ws.close();
}
- $('form#exchange').get(0).reset();
- };
-
- RabbitMQWs.prototype.start = function(name, email) {
- this.connect();
};
- $(document).ready(function() {
- var rmqws = new RabbitMQWs();
- rmqws.start();
- $('form#exchange').submit(function(e) {
- e.preventDefault();
- rmqws.switchExchange($('#name').val(), $('#routing_key').val());
- return false;
- });
- });
-})(jQuery);
+ return that;
+};

0 comments on commit 67353f9

Please sign in to comment.