adds sample HTML view usage

videlalvaro · May 15, 2011 · 74e16e0 · 74e16e0
1 parent dfacfc1
commit 74e16e0
Showing 1 changed file with 50 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -83,25 +83,56 @@ The `RabbitMQWs` object will fire the following events:
 
 `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();
-
-      $(rmqws).bind('rmqws-onconnection-status', function(event, status){
-          console.log(status);
-      });
-
-      $(rmqws).bind('rmqws-onmessage', function(event, msg){
-          console.log(msg);
-      });
-
-      $(rmqws).bind('rmqws-onerror', function(event, error){
-          console.log("#info", error);
-      });
-    };
+A basic Javascript view can be made like this:
+
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>RabbitMQ Websockets Plugin - Basic Test</title>
+        <link rel="icon" href="/favicon.ico">
+      </head>
+      <body>
+        <h1>RabbitMQ Websockets Plugin - Basic Test</h1>
+        <ul id="messages"></ul>
+        <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(message) {
+                    $("#messages").append("<li>"+message+"</li>").attr({ scrollTop: $("#messages").attr("scrollHeight") });
+                };
+
+                var RMQ_WS_PORT = 8080;
+
+                $(document).ready(function() {
+                  var rmqws = new RabbitMQWs();
+
+                  rmqws.start(window.location.hostname + ':' + RMQ_WS_PORT);
+
+                  $(rmqws).bind('rmqws-onconnection-status', function(event, status){
+                      if(status == 'connected') {
+                          rmqws.switchExchange('amq.fanout', "");
+                      }
+                      displayMessage(status);
+                  });
+
+                  $(rmqws).bind('rmqws-onmessage', function(event, msg){
+                      displayMessage(msg);
+                  });
+
+                  $(rmqws).bind('rmqws-onerror', function(event, error){
+                      displayMessage(error);
+                  });
+              });
+            })(jQuery);
+        </script>
+      </body>
+    </html>
+
+Copy the contents of the example to your `index.html` file and server that from your webserver. Modify `RMQ_WS_PORT` according to your settings.
+
+I created a sample project showing how to use this plugin: [rmq_ws_test](git clone git://github.com/videlalvaro/rmq_ws_test.git)
 
 ## License ##