misc/cosmopolite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tutorial gets through subscribing to a subject

Browse Source
This commit is contained in:
Ian Gulliver
2014-05-22 12:17:46 -07:00
parent f2f191f118
commit e8ec10c26e
2 changed files with 55 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
stylesheets/styles.css
View File

@@ -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,

55
tutorial.html
View File

@@ -48,11 +48,64 @@
<h3>Test cosmopolite</h3>
<ol>
<li>Access your local cosmopolite debug page (replace port if necessary): <a href="http://localhost:8080/cosmopolite/static/debug.html">http://localhost:8080/cosmopolite/static/debug.html</a></li>
<li>Access your local cosmopolite debug page (replace port if necessary): <a href="http://localhost:8080/cosmopolite/static/debug.html" target="_blank">http://localhost:8080/cosmopolite/static/debug.html</a></li>
<li>Subscribe to a subject "testsubject"</li>
<li>Send a message to that subject; it should appear in the message list below</li>
</ol>
<h3>Create a test page</h3>
<ol>
<li>Create a test.html page at the top level of your application:
<pre>&lt;html&gt;
&lt;head&gt;
&lt;script src="/cosmopolite/static/cosmopolite.js" charset="UTF-8"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
// Subsequent script examples go here
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></li>
<li>Add a mapping to app.yaml:
<pre>handlers:
- url: /test.html
static_files: test.html
upload: test.html</pre></li>
<li>Have it create a cosmopolite instance and send a message to it:
<pre>var cosmo = new Cosmopolite();
cosmo.sendMessage('testsubject', 'test message');</pre></li>
<li>Keep the debug page (from above) up and subscribed (to "testsubject") in one browser tab</li>
<li>Load <a href="http://localhost:8080/test.html" target="_blank">your test page</a> <b>in an incognito window</b> (right click/control-click, Open Link in Incognito Window)</li>
<li>The debug page should show the message from the test page</li>
<li>You've written code that uses cosmopolite!</li>
</ol>
<h3>Time out for concepts</h3>
<ol>
<li><b>Subject</b>: a topic that clients that publish and subscribe to, e.g. "books"</li>
<li><b>Message</b>: a single chunk of data transmitted to a single subject, e.g. "I love books!"</li>
<li><b>Key</b>: 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)</li>
<li><b>Client</b>: an instance of Cosmopolite() in a browser</li>
<li><b>Profile</b>: a collection of clients that all speak as the same user (and so should appear the same to subscribers)</li>
</ol>
<h3>Subscribe to a subject</h3>
<ol>
<li>Change your test script:
<pre>var callbacks = {
onMessage: function(msg) {
alert(msg['message']);
},
};
var cosmo = new Cosmopolite(callbacks);
cosmo.subscribe('testsubject');</pre></li>
<li>Load (or re-load) the test page (still in an incognito window)</li>
<li>Use the debug interface to send a message to testsubject</li>
<li>Your test page should generate an alert popup</li>
</ol>
</section>
</div>