So a friend of mine showed me ImpressJs today. He was going to have notes on another screen (well actually on an iPad) and I thought it would be cool if the presentation could be synced with notes on another screen as well. Fired up Visual Studio and put together a small socket server as well as a simple java script client. The result is shown in this video.

The code

The code is available at GitHub, https://github.com/danielwertheim/PreCoord

To get started I just pulled down the code from the ImpressJs repository at GitHub. I then put together a small JavaScript client (precoord.js) to interact with a WebSocket server. After this I just included the created client (precoord.js) in the index.html that was included in the sample demo at ImpressJs. You use it like this:

<script src="js/precoord.js" type="text/javascript"></script>
<script type="text/javascript">
    var preCoord = new PreCoordClient('ws://localhost:7777');
    preCoord.bind('presentationstarted', function(){
        impress().init();
        document.addEventListener("impress:stepenter", function (event) {
            preCoord.changeslide(event.srcElement.id);
        }, false);
    });
    preCoord.bind('joinedpresentation', function(event){
        var presentation = impress();
        presentation.init();
        presentation.goto(event.CurrentSlide);

        preCoord.bind('slidechanged', function(event) {
            presentation.goto(event.NewSlide);
        });
    });

    preCoord.startorjoinpresentation('my presentation');
</script>

In this simple demo I created a solution so that the first browser that opens the page becomes the Presenter. The rest becomes Attendees. I also made a copy of index.html named notes.html and stripped out most content and instead added simple text that represents notes for the Presenter. This way he/she could have the presentation on one display and notes on another.

To get a more snappy behavior I had to made a hook inside ImpressJS goto function, I’ve added this:

if(impressHooks && impressHooks.onGoto)
    impressHooks.onGoto(activeStep);

which changed to consumer code to:

var impressHooks = {}; //ADDED
var preCoord = new PreCoordClient('ws://localhost:7777');
preCoord.bind('presentationstarted', function(){
    impress().init();
    //REPLACED OLD LISTENER
    impressHooks.onGoto = function(step) {
        preCoord.changeslide(step.id);
    };
});
preCoord.bind('joinedpresentation', function(event){
    var presentation = impress();
    presentation.init();
    presentation.goto(event.CurrentSlide);

    preCoord.bind('slidechanged', function(event) {
        presentation.goto(event.NewSlide);
    });
});

preCoord.startorjoinpresentation('my presentation');

The socket server is built on top of Fleck. And I’ll just show the overview, here:

Note! This is just a small concept application I put together last night.

XSockets

Updated: Another nice WebSockets framework, or perhaps messaging/communication platform, is XSockets. It has a lots of built in features for managing subscriptions, fallback on Flash, server-server communication, JavaScript library etc. After I wrote my post, one of the creators of XSockets tipped about another resource. So, if you put in a little more time, you can do this.

//Daniel