{% extends "layout.html" %}

{% block body %}

<h2>Square Variant 1</h2>
<p>
   Square a number by doing a HTTP/GET against
   a REST-like URL that includes the number to square.
   <ol>
      <li><a href="square/3">square/3</a></li>
      <li><a href="square/10">square/10</a></li>
      <li><a href="square/2323">square/2323</a></li>
   </ol>
</p>

<h2>Square Variant 2</h2>
<p>
   Square a number by doing a HTTP/POST from a
   HTML form that includes the number to square.
</p>
<form action="square/submit" method="post">
   <p>
      Square this <input type="number" name="x" value="{{ visits }}" />
   </p>
   <p>
      <input type="submit" />
   </p>
</form>

<script src="/autobahn.min.js"></script>
<script>
   var connection = new autobahn.Connection({
      url: "ws://127.0.0.1:9000",
      realm: 'realm1'
   });

   connection.onopen = function (session) {

      console.log("connected");

      // subscribe to the "onvisit" topic and receive
      // an event with total number of page visitors
      //
      session.subscribe('com.example.onvisit',

         function (args, kwargs) {

            console.log('Visits: ' + kwargs.visits);

            // upon receiving an event, call a remote
            // procedure to square the number received
            // in the event
            //
            session.call('com.example.square', [kwargs.visits]).then(
               function (res) {
                  console.log('square: ' + res);
               }
            );
         }
      ).then(
         function (sub) {
            console.log("subscribed")
         }
      );
   };

   connection.open();
</script>

{% endblock %}