diff --git a/stylesheets/styles.css b/stylesheets/styles.css index 432d660..f1aa264 100644 --- a/stylesheets/styles.css +++ b/stylesheets/styles.css @@ -7,7 +7,7 @@ h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, -b, u, i, center, +center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, diff --git a/tutorial.html b/tutorial.html index 528276f..7c99076 100644 --- a/tutorial.html +++ b/tutorial.html @@ -48,11 +48,64 @@

Test cosmopolite

    -
  1. Access your local cosmopolite debug page (replace port if necessary): http://localhost:8080/cosmopolite/static/debug.html
    2. +
  2. Access your local cosmopolite debug page (replace port if necessary): http://localhost:8080/cosmopolite/static/debug.html
  3. Subscribe to a subject "testsubject"
  4. Send a message to that subject; it should appear in the message list below
+

Create a test page

+ +
    +
  1. Create a test.html page at the top level of your application: +
    <html>
+  <head>
+    <script src="/cosmopolite/static/cosmopolite.js" charset="UTF-8"></script>
+  </head>
+  <body>
+    <script>
+// Subsequent script examples go here
+    </script>
+  </body>
+</html>
    2. +
  2. Add a mapping to app.yaml: +
    handlers:
+- url: /test.html
+  static_files: test.html
+  upload: test.html
    3. +
  3. Have it create a cosmopolite instance and send a message to it: +
    var cosmo = new Cosmopolite();
+cosmo.sendMessage('testsubject', 'test message');
    4. +
  4. Keep the debug page (from above) up and subscribed (to "testsubject") in one browser tab
    5. +
  5. Load your test page in an incognito window (right click/control-click, Open Link in Incognito Window)
    6. +
  6. The debug page should show the message from the test page
    7. +
  7. You've written code that uses cosmopolite!
    8. +
+ +

Time out for concepts

+ +
    +
  1. Subject: a topic that clients that publish and subscribe to, e.g. "books"
    2. +
  2. Message: a single chunk of data transmitted to a single subject, e.g. "I love books!"
    3. +
  3. Key: an optional string associated with a message, that can be used to look up the last message with a given key, e.g. "title" (key) = "A place to talk about books" (message)
    4. +
  4. Client: an instance of Cosmopolite() in a browser
    5. +
  5. Profile: a collection of clients that all speak as the same user (and so should appear the same to subscribers)
    6. +
+ +

Subscribe to a subject

+ +
    +
  1. Change your test script: +
    var callbacks = {
+  onMessage: function(msg) {
+    alert(msg['message']);
+  },
+};
+var cosmo = new Cosmopolite(callbacks);
+cosmo.subscribe('testsubject');
    2. +
  2. Load (or re-load) the test page (still in an incognito window)
    3. +
  3. Use the debug interface to send a message to testsubject
    4. +
  4. Your test page should generate an alert popup
    5. +