APE_JSF Sessions

Louis Charette edited this page Apr 19, 2014 · 1 revision

APE has a cool feature called sessions which allows you to make your application "persistent". When a user browses your website or reloads the page, session will restore your APE application environment.

How to enable sessions

If you are using APE JSF build, instead of using apeCore.js, use apeCoreSession.js. If you are using APE JSF multiple file loading, add this line to your config file:

APE.Config.scripts.push(APE.Config.baseUrl + 'Core/Session.js');

How sessions works

Maybe you already noticed the number before each request sent to the APE server:

http://2.ape.ape-project.org/?
-------^

This number is called frequency. Each time the APE JSF is loaded, the frequency is incremented. This allows the APE Server to detect that the user loaded a new page.

  • If APE JSF is loaded without sessions, the frequency is only used to bypass some browser limitations.
  • If APE JSF is loaded with sessions, instead of sending a connect command when start(); is called, it asks the APE server for the user's session.

The server then sends the Multi and Uni pipes the user was connected to, so the APE JSF will fire multiPipeCreate and uniPipeCreate events.

How to save custom data in session

APE allows you to store custom data (string, array, object) in sessions with setSession() and getSession()

TODO:

{

  • scenario, how is storing data in a session useful, channels and users can also have public properties and these are also resended on a page refresh. Is the difference with public variables, that stored data in an ape session is only retrievable by the client with the correct session?

Could this be usefull for:

  • storing message history?
  • storing data to be retained after a page refresh without the need to use cookies or localStorage?

Please add real word use scenarios

Please also append to APE Server Private Public and Session Properties

}

An example with sessions

This example connects a user to an APE server, joins a channel and saves a custom session named key1 with the value value1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
    <head>  
        <script type="text/javaScript" src="Clients/JavaScript.js"></script>
        <script type="text/javaScript" src="Demos/config.js"></script>
    </head>
 
    <body>
        <script type="text/javaScript">
        //Use APE JSF build with session
        APE.Config.scripts = [APE.Config.baseUrl + '/Build/uncompressed/apeCoreSession.js'];
 
        var client = new APE.Client();
 
        //Load the APE client and join the 'test' channel
        client.load({'channel':'test'});
 
        client.addEvent('load', function() {
                //core.options.restore is true if a session is active
                if (client.core.options.restore) {
                    //Calling start(); without arguments will ask the APE Server for a user session
                    client.core.start();
                } else {
                    //It's not a session restoration, ask user for his name
                    client.core.start({'name':prompt('name?')});
                }
        });
 
        client.addEvent('ready', function() {
            if (client.core.options.restore) {
                //If it's a session restoration, ask the APE server for the custom session 'key1'
                client.core.getSession('key1', function(resp) {
                    console.log('Receiving sessions data. key1 value is : ', resp.data.sessions.key1);
                });
            } else {
                //Saving custom session key1 one the server
                console.log('saving custom session data, key1 on the server');
                client.core.setSession({'key1':'value1'});
            }
        });
 
        client.addEvent('multiPipeCreate', function(pipe) {
                console.log('New pipe ' + pipe.name);
        });
        </script> 
    </body>
</html>