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