Skip to content

P
pylibs
Switch branch/tag
Find file
Normal viewHistoryPermalink
index.html 3.88 KB
Newer Older
nextime's avatar
first commit
ad97104d
 
nextime committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 
<!DOCTYPE html>
 <html>
   <head>

      <style type="text/css">
         .block {
            background-color: #ccc;
            padding: 1em;
            margin: 1em;
         }
      </style>

      <!-- include AutobahnJS .. that's all you need -->
      <script src="http://autobahn.s3.amazonaws.com/js/autobahn.min.js"></script>

      <script>
         // WAMP session object
         var sess;
         var wsuri;

         window.onload = function() {

            if (window.location.protocol === "file:") {
               wsuri = "ws://localhost:9000";
            } else {
               wsuri = "ws://" + window.location.hostname + ":9000";
            }

            // connect to WAMP server
            ab.connect(wsuri,

               // WAMP session was established
               function (session) {

                  sess = session;
                  console.log("Connected!");

                  sess.subscribe("http://example.com/simple", onEvent);

                  sess.prefix("event", "http://example.com/event#");
                  sess.subscribe("event:myevent1", onEvent);
                  sess.subscribe("event:myevent2", onEvent);
               },

               // WAMP session is gone
               function (code, reason) {

                  sess = null;
                  alert(reason);
               }
            );
         };

         function onEvent(topicUri, event) {
            console.log(topicUri);
            console.log(event);
         }

         function publishEvent()
         {
            evt = {};
            evt.num = 23;
            evt.name = document.getElementById('form_message').value;
            evt.flag = document.getElementById('form_flag').checked;
            evt.created = new Date();
            evt.rand = Math.random();

            var excludeMe = document.getElementById('exclude_me').checked;
            if (document.getElementById('event1').checked) {
               sess.publish("event:myevent1", evt, excludeMe);
            } else {
               sess.publish("event:myevent2", evt, excludeMe);
            }
         }
     </script>
   </head>
   <body>
      <h1>AutobahnJS PubSub Client</h1>

      <div class="block">
         <p>
            Publish a simple event containing to data. Open a 2nd browser window/tab and you see events being received.
         </p>
         <button onclick="sess.subscribe('http://example.com/simple', onEvent);">Subscribe</button>
         <button onclick="sess.unsubscribe('http://example.com/simple');">Unsubscribe</button>
         <button onclick="sess.publish('http://example.com/simple', null);">Publish</button>
      </div>

      <div class="block">
         <p>
            Publish an event containing data.
         </p>
         <form>
            <p>Message: <input id="form_message" type="text" size="50" maxlength="50" value="Hello, world!"></p>
            <p>Flag: <input id="form_flag" type="checkbox"></p>
            <p>Event:
               <input id="event1" type="radio" name="eventtype" checked>Event 1
               <input type="radio" name="eventtype">Event 2
            </p>
            <p>Exclude Me: <input id="exclude_me" type="checkbox" checked>
            (By default, events published to a topic by a client will never be delivered to the client who published.
            This can be overridded, and then a publisher - who is also subscribed to the topic - will receive it's own event.)</p>
         </form>
         <button onclick="publishEvent()">Publish Event</button>
      </div>

      <div class="block">
         <p>
            Publish to a Topic URI which was never registered for PubSub on server side. Events published to
            such topics are transmitted to server, but silently ignored and never dispatched.
         </p>
         <button onclick="sess.publish('http://example.com/unregistered_topic', null);">Publish to unregistered Topic</button>
      </div>
   </body>
 </html>