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 >
< li class = "download" >< a class = "buttons" href = "https://github.com/flamingcowtv/cosmopolite/zipball/master" > Download ZIP</ a ></ li >
< li class = "download" >< a class = "buttons" href = "https://github.com/flamingcowtv/cosmopolite/tarball/master" > Download TAR</ a ></ li >
< li >< a class = "buttons github" href = "https://github.com/flamingcowtv/cosmopolite" > View On GitHub</ a ></ li >
</ ul >
</ header >
< section >
< h1 >
< a name = "cosmopolite" class = "anchor" href = "#cosmopolite" >< span class = "octicon octicon-link" ></ span ></ a > Cosmopolite Tutorial</ h1 >
< h3 > AppEngine prerequisites</ h3 >
< ol >
< li > Download and install the < a href = "https://developers.google.com/appengine/downloads" > Python AppEngine SDK</ a ></ li >
</ ol >
< h3 > Server-side setup</ h3 >
< ol >
< 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 >
</ ol >
< h3 > Test cosmopolite</ h3 >
< ol >
2014-05-22 12:17:46 -07:00
< 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 >
2014-05-22 12:27:51 -07:00
< li > Subscribe to a subject < i > testsubject</ i ></ li >
2014-05-22 11:38:45 -07:00
< li > Send a message to that subject; it should appear in the message list below</ li >
2014-05-22 11:35:21 -07:00
</ ol >
2014-05-22 12:17:46 -07:00
< h3 > Create a test page</ h3 >
< ol >
< 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 >
< li > Edit test.html. Replace "// Subsequent script examples go here" with:
2014-05-22 12:17:46 -07:00
< pre > var cosmo = new Cosmopolite();
cosmo.sendMessage('testsubject', 'test message');</ pre ></ li >
2014-06-03 22:14:02 -07:00
< li > Keep the < a href = "http://localhost:8080/cosmopolite/static/debug.html" target = "_blank" > debug page</ a > up and subscribed (to < i > testsubject</ i > ) in one browser tab</ li >
2014-05-23 11:46:15 -07:00
< li > Load < a href = "http://localhost:8080/test.html" target = "_blank" > your test page</ a ></ li >
2014-05-22 12:17:46 -07:00
< li > The debug page should show the message from the test page</ li >
< li > You've written code that uses cosmopolite!</ li >
</ ol >
< h3 > Subscribe to a subject</ h3 >
< ol >
2014-06-03 22:14:02 -07:00
< li > Change test.html:
2014-05-22 12:17:46 -07:00
< pre > var callbacks = {
onMessage: function(msg) {
alert(msg['message']);
},
};
var cosmo = new Cosmopolite(callbacks);
cosmo.subscribe('testsubject');</ pre ></ li >
2014-06-03 22:14:02 -07:00
< li > Load (or re-load) the < a href = "http://localhost:8080/test.html" target = "_blank" > test page</ a ></ li >
2014-05-22 12:27:51 -07:00
< li > Use the debug interface to send a message to < i > testsubject</ i ></ li >
2014-05-22 12:17:46 -07:00
< li > Your test page should generate an alert popup</ li >
</ ol >
2014-05-22 11:35:21 -07:00
2014-05-25 23:55:42 -07:00
< h3 > Key/value store</ h3 >
2014-05-22 13:14:58 -07:00
< ol >
< li > Cosmopolite can be used as a key/value store, with historical data and update notification</ li >
2014-05-25 23:55:42 -07:00
< li > When subscribing to a subject, you can request the most recent message for that subject</ li >
2014-06-03 22:14:02 -07:00
< li > Change test.html:
2014-05-22 13:14:58 -07:00
< pre > var cosmo = new Cosmopolite();
2014-05-25 23:55:42 -07:00
cosmo.subscribe('testsubject', 1).then(function() {
2014-05-26 10:03:27 -07:00
var msg = cosmo.getLastMessage('testsubject');
alert(msg['message']);
2014-05-22 13:14:58 -07:00
});</ pre ></ li >
2014-05-25 23:55:42 -07:00
< li > Your test page should generate an alert popup showing the last message sent</ li >
2014-05-22 13:14:58 -07:00
</ ol >
2014-05-26 16:51:58 -07:00
< 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 > Open the debug interface and subscribe to < i > testsubject</ i ></ li >
2014-06-03 22:14:02 -07:00
< li > Change test.html:
2014-05-26 16:51:58 -07:00
< pre > var cosmo = new Cosmopolite();
cosmo.pin('testsubject', 'browser is alive!');</ pre ></ li >
2014-06-03 22:14:02 -07:00
< li > Load the < a href = "http://localhost:8080/test.html" target = "_blank" > test page</ a > and watch the debug page; you should see the pin.</ li >
2014-05-26 16:51:58 -07:00
< li > Close the test page, and the pin disappears.</ li >
</ ol >
2014-05-22 11:35:21 -07:00
</ 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' );
2014-06-07 23:10:54 -07:00
ga ( 'create' , 'UA-37845853-2' , 'auto' );
2014-05-22 11:35:21 -07:00
ga ( 'send' , 'pageview' );
</ script >
</ body >
</ html >
