2014-05-22 11:35:21 -07:00
<!doctype html>
< html >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "chrome=1" >
2014-05-23 15:12:32 -07:00
< title > Cosmopolite Tutorial< / title >
2014-05-22 11:35:21 -07:00
< link rel = "stylesheet" href = "stylesheets/styles.css" >
< / head >
< body >
< div class = "wrapper" >
< header >
2014-06-08 01:23:42 -07:00
< h1 class = "header" > < a href = "/" > Cosmopolite< / a > < / h1 >
2014-05-25 23:55:42 -07:00
< p class = "header" > Client/server publish/subscribe, presence and key/value storage for AppEngine< / p >
2014-05-22 11:35:21 -07:00
< ul >
2014-06-08 18:22:46 -07:00
< 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 >
2014-06-08 18:57:29 -07:00
< 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 >
2014-05-22 11:35:21 -07:00
< / ul >
< / header >
< section >
< h1 >
< a name = "cosmopolite" class = "anchor" href = "#cosmopolite" > < span class = "octicon octicon-link" > < / span > < / a > Cosmopolite Tutorial< / h1 >
2014-06-08 19:46:10 -07:00
< 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 >
2014-05-22 11:35:21 -07:00
2014-06-08 19:46:10 -07:00
< h3 > Send a message to a subject< / h3 >
2014-05-22 11:35:21 -07:00
< ol >
2014-06-08 19:46:10 -07:00
< 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 >
2014-05-22 11:35:21 -07:00
< / ol >
2014-06-08 19:46:10 -07:00
< 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 >
2014-05-22 11:35:21 -07:00
2014-06-08 19:46:10 -07:00
< h3 > Key/value store< / h3 >
2014-05-22 11:35:21 -07:00
< ol >
2014-06-08 19:46:10 -07:00
< 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 >
2014-05-22 11:35:21 -07:00
< li > Create an application in your SDK client< / li >
2014-06-03 22:14:02 -07:00
< li > Download cosmopolite via the links at left. Unpack it into your local application directory and rename the newly-created subdirectory to "cosmopolite"< / li >
2014-05-22 11:35:21 -07:00
< 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:
2014-06-07 23:34:47 -07:00
- cosmopolite
inbound_services:
- channel_presence< / pre > < / li >
2014-05-22 11:35:21 -07:00
< li > Start the application in your SDK client< / li >
2014-05-22 12:17:46 -07:00
< 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 >
2014-06-03 22:14:02 -07:00
< li > Remove the mapping for main.app from app.yaml (if using the autogenerated file)< / li >
2014-06-08 19:46:10 -07:00
< li > Retry the examples above using your new test page and your local debug page< / li >
2014-05-26 16:51:58 -07:00
< / ol >
2014-05-22 11:35:21 -07:00
< / section >
< / div >
2014-06-08 18:22:46 -07:00
< 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 >
2014-05-22 11:35:21 -07:00
< / body >
< / html >
