Skip to content

P
pylibs
Switch branch/tag
Find file
Normal viewHistoryPermalink
index.html 4.41 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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 
<!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 type="text/javascript">
         var sess = null;
         var ellog = null;

         window.onload = function() {

            ellog = document.getElementById('log');

            var wsuri;
            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;
                  log("Connected to " + wsuri);

                  // establish a prefix, so we can abbreviate procedure URIs ..
                  sess.prefix("keyvalue", "http://example.com/simple/keyvalue#");
               },

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

                  sess = null;

                  if (code == ab.CONNECTION_UNSUPPORTED) {
                     window.location = "http://autobahn.ws/unsupportedbrowser";
                  } else {
                     alert(reason);
                  }
               }
            );
         };

         function setKeyValue() {

            var k = document.getElementById('form_key').value;
            var v1 = document.getElementById('form_value1').value;
            var v2 = document.getElementById('form_value2').value;
            var v3 = document.getElementById('form_value3').checked;

            sess.call("keyvalue:set",
                      k,
                      {value1: v1,
                       value2: v2,
                       value3: v3,
                       modified: new Date()}).then(function () {
               log("ok, value set");
            });
         }

         function getValue() {

            var k = document.getElementById('form_key').value;

            sess.call("keyvalue:get", k).then(function (val) {
               log(val);
               document.getElementById('form_value1').value = val.value1;
               document.getElementById('form_value2').value = val.value2;
               document.getElementById('form_value3').checked = val.value3;
            });
         }

         function deleteKey() {

            var k = document.getElementById('form_key').value;

            sess.call("keyvalue:set", k).then(function () {
               log("ok, key gone");
            });
         }

         function getAll() {
            sess.call("keyvalue:get").then(log);
         }

         function deleteAll() {
            sess.call("keyvalue:set").then(log);
         }

         function log(m) {
            ellog.innerHTML += JSON.stringify(m) + '\n';
            ellog.scrollTop = ellog.scrollHeight;
         };
     </script>
   </head>
   <body>
      <h1>Key-Value Store Client</h1>
      <noscript>
         <span style="color: #f00; font-weight: bold;">
            You need to turn on JavaScript.
         </span>
      </noscript>
      <div class="block"><button onclick="getAll()">Get all</button> Retrieve all key-value pairs from store and log to console.</div>
      <div class="block"><button onclick="deleteAll()">Delete all</button> Delete all data from store.</div>
      <div class="block">
         <form>
            <p>Key: <input id="form_key" type="text" size="50" maxlength="50"></p>
            <p>Value 1: <input id="form_value1" type="text" size="50" maxlength="50"></p>
            <p>Value 2: <input id="form_value2" type="text" size="50" maxlength="50"></p>
            <p>Value 3: <input id="form_value3" type="checkbox"></p>
         </form>
         <p><button onclick="setKeyValue()">Set Value</button> Set key-value pair.</p>
         <p><button onclick="deleteKey()">Delete Key</button> Delete key-value by key.</p>
         <p><button onclick="getValue()">Get Key</button> Get key-value by key.</p>
      </div>
      <pre id="log" style="height: 20em; overflow-y: scroll; background-color: #faa;"></pre>
   </body>
 </html>