Having fun with ImpressJs and WebSockets, creating real-time presentations

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

About these ads

5 thoughts on “Having fun with ImpressJs and WebSockets, creating real-time presentations

  1. Impressive work! Moreover, I discovered Fleck, a much more elegant alternative to SignalR!

  2. Impressive work. Moreover, I discovered Fleck, a much more elegant alternative to SignalR

  3. Another interesting usage of Fleck. :-)

    I used Server Sent Events to do a similar thing for a presentation on SSE and WebSockets. Actually Fleck was a topic.

    I’ve found SSE to be useful in the case where most of the data is downstream. If you haven’t looked into them I’d certainly suggest it. No Flash fallback necessary.

    Thanks for putting Fleck to use though. I’m always glad to see it in use.

    See presentation here:
    http://polling4chumps.herokuapp.com/

    And the code:
    https://github.com/statianzo/chumps (see app.rb and the public folder)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s