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" >
< link rel = "stylesheet" href = "stylesheets/pygment_trac.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 >
