131 lines
5.7 KiB
HTML
131 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<title>Cosmopolite Tutorial</title>
|
|
|
|
<link rel="stylesheet" href="stylesheets/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<header>
|
|
<h1 class="header"><a href="/">Cosmopolite</a></h1>
|
|
<p class="header">Client/server publish/subscribe, presence and key/value storage for AppEngine</p>
|
|
|
|
<ul>
|
|
<li class="download"><a class="buttons" href="https://github.com/flamingcowtv/cosmopolite/zipball/master" onclick="return trackOutboundLink(this.href);">Download ZIP</a></li>
|
|
<li class="download"><a class="buttons" href="https://github.com/flamingcowtv/cosmopolite/tarball/master" onclick="return trackOutboundLink(this.href);">Download TAR</a></li>
|
|
<li><a class="buttons github" href="https://github.com/flamingcowtv/cosmopolite" onclick="return trackOutboundLink(this.href);">View On GitHub</a></li>
|
|
<li><a class="buttons forum" href="https://groups.google.com/a/cosmopolite.org/forum/#!forum/discuss" onclick="return trackOutboundLink(this.href);">Mailing list</a></li>
|
|
</ul>
|
|
|
|
</header>
|
|
<section>
|
|
<h1>
|
|
<a name="cosmopolite" class="anchor" href="#cosmopolite"><span class="octicon octicon-link"></span></a>Cosmopolite Tutorial</h1>
|
|
|
|
<h3>Test cosmopolite</h3>
|
|
<ol>
|
|
<li>Load the cosmopolite playground <a href="https://playground.cosmopolite.org/cosmopolite/static/debug.html" target="_blank">debug page</a>.
|
|
<li>Subscribe to a subject <i>testsubject</i></li>
|
|
<li>Send a message to that subject; it should appear in the message list at right.</li>
|
|
</ol>
|
|
|
|
<h3>Send a message to a subject</h3>
|
|
<ol>
|
|
<li>Load the <a href="https://playground.cosmopolite.org/cosmopolite/static/debug.html" target="_blank">debug page</a>.
|
|
<li>Subscribe to <i>testsubject</i></li>
|
|
<li>Load <a href="https://playground.cosmopolite.org/cosmopolite-tutorial/1.html" target="_blank">tutorial page #1</a></li>
|
|
<li>Click <b>Execute JavaScript</b>, then click OK on the popup</li>
|
|
<li>The debug page should show the message from the tutorial page</li>
|
|
</ol>
|
|
|
|
<h3>Subscribe to a subject</h3>
|
|
<ol>
|
|
<li>Load <a href="https://playground.cosmopolite.org/cosmopolite-tutorial/2.html" target="_blank">tutorial page #2</a></li>
|
|
<li>Click <b>Execute JavaScript</b>, then click OK on the popup</li>
|
|
<li>Use the <a href="https://playground.cosmopolite.org/cosmopolite/static/debug.html" target="_blank">debug page</a> to send a message to <i>testsubject</i></li>
|
|
<li>The tutorial page should generate an alert popup</li>
|
|
</ol>
|
|
|
|
<h3>Key/value store</h3>
|
|
<ol>
|
|
<li>Cosmopolite can be used as a key/value store, with historical data and update notification</li>
|
|
<li>When subscribing to a subject, you can request the most recent message for that subject</li>
|
|
<li>Load <a href="https://playground.cosmopolite.org/cosmopolite-tutorial/3.html" target="_blank">tutorial page #3</a></li>
|
|
<li>Click <b>Execute JavaScript</b>, then click OK on the popup</li>
|
|
<li>The tutorial page should generate an alert popup showing the last message sent</li>
|
|
</ol>
|
|
|
|
<h3>Pin a value</h3>
|
|
<ol>
|
|
<li>Pins publish a message temporarily, until the source conncetion disconnects. This can be used for presence information</li>
|
|
<li>Load the <a href="https://playground.cosmopolite.org/cosmopolite/static/debug.html" target="_blank">debug page</a>.
|
|
<li>Subscribe to <i>testsubject</i></li>
|
|
<li>Load <a href="https://playground.cosmopolite.org/cosmopolite-tutorial/4.html" target="_blank">tutorial page #4</a></li>
|
|
<li>Click <b>Execute JavaScript</b>, then click OK on the popup</li>
|
|
<li>Watch the debug page; you should see the pin.</li>
|
|
<li>Close tutorial page #4; the pin disappears from the debug page.</li>
|
|
</ol>
|
|
|
|
<h3>Set up a local instance for further testing</h3>
|
|
|
|
<ol>
|
|
<li>Download and install the <a href="https://developers.google.com/appengine/downloads">Python AppEngine SDK</a></li>
|
|
<li>Create an application in your SDK client</li>
|
|
<li>Download cosmopolite via the links at left. Unpack it into your local application directory and rename the newly-created subdirectory to "cosmopolite"</li>
|
|
<li>Create an <a href="https://developers.google.com/appengine/docs/python/config/appconfig">app.yaml</a> file for your application.</li>
|
|
<li>Add a cosmopolite include to your app.yaml file:
|
|
<pre>includes:
|
|
- cosmopolite
|
|
|
|
inbound_services:
|
|
- channel_presence</pre></li>
|
|
<li>Start the application in your SDK client</li>
|
|
<li>Create a test.html page at the top level of your application:
|
|
<pre><html>
|
|
<head>
|
|
<script src="/cosmopolite/static/cosmopolite.js" charset="UTF-8"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
// Subsequent script examples go here
|
|
</script>
|
|
</body>
|
|
</html></pre></li>
|
|
<li>Add a mapping to app.yaml:
|
|
<pre>handlers:
|
|
- url: /test.html
|
|
static_files: test.html
|
|
upload: test.html</pre></li>
|
|
<li>Remove the mapping for main.app from app.yaml (if using the autogenerated file)</li>
|
|
<li>Retry the examples above using your new test page and your local debug page</li>
|
|
</ol>
|
|
|
|
</section>
|
|
</div>
|
|
<script>
|
|
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-37845853-2', 'auto');
|
|
ga('require', 'displayfeatures');
|
|
ga('send', 'pageview');
|
|
|
|
var trackOutboundLink = function(url) {
|
|
ga('send', 'event', 'outbound', 'click', url, {
|
|
'hitCallback': function () {
|
|
document.location = url;
|
|
}
|
|
});
|
|
return false;
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|