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" >
< script src = "javascripts/scale.fix.js" > < / script >
< meta name = "viewport" content = "width=device-width, initial-scale=1, user-scalable=no" >
< / head >
< body >
< div class = "wrapper" >
< header >
< h1 class = "header" > Cosmopolite< / 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 >
< li > Download cosmopolite via the links at left. Unpack it into a "cosmopolite" subdirectory of your local application< / 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< / pre > < / li >
< 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 >
< li > Have it create a cosmopolite instance and send a message to it:
< pre > var cosmo = new Cosmopolite();
cosmo.sendMessage('testsubject', 'test message');< / pre > < / li >
2014-05-22 12:27:51 -07:00
< li > Keep the debug page (from above) 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 > Time out for concepts< / h3 >
< ol >
< li > < b > Subject< / b > : a topic that clients that publish and subscribe to, e.g. "books"< / li >
< li > < b > Message< / b > : a single chunk of data transmitted to a single subject, e.g. "I love books!"< / li >
2014-05-25 23:55:42 -07:00
< li > < b > Pin< / b > : an ephemeral message that is deleted when the client that pinned it disconnects< / li >
2014-05-23 11:46:15 -07:00
< li > < b > Instance< / b > : a single instantiation of Cosmopolite() in a browser (destroyed on page close)< / li >
< li > < b > Client< / b > : a persistent identifier for a browser (consistent across browser restarts)< / li >
2014-05-22 12:17:46 -07:00
< li > < b > Profile< / b > : a collection of clients that all speak as the same user (and so should appear the same to subscribers)< / li >
< / ol >
< h3 > Subscribe to a subject< / h3 >
< ol >
< li > Change your test script:
< pre > var callbacks = {
onMessage: function(msg) {
alert(msg['message']);
},
};
var cosmo = new Cosmopolite(callbacks);
cosmo.subscribe('testsubject');< / pre > < / li >
2014-05-23 11:46:15 -07:00
< li > Load (or re-load) the test page< / 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-05-22 13:14:58 -07:00
< li > Change your test script:
< pre > var cosmo = new Cosmopolite();
2014-05-25 23:55:42 -07:00
cosmo.subscribe('testsubject', 1).then(function() {
var msgs = cosmo.getMessages('testsubject');
alert(msgs[msgs.length - 1]['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-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');
ga('create', 'UA-37845853-2', 'flamingcowtv.github.io');
ga('send', 'pageview');
< / script >
< / body >
< / html >
