Yesterday I started writing a blogpost about how to create a remote control for Hakim El Hattab´s Reveal.js with XSockets.NET (websockets). After writing miles of text I realized that the post would suck big time!
Soo… what to do? Only one way to go… And that was to build the remote control as a plugin for Reveal.js. No need to say, building javascript plugins is way out of my area… But I gave it a shoot and here is the result.
“You can view/download it from github”
But why… whyyyyyy?
Hakim and others has already developed stuff like this with nodejs etc, so why am I doing this? Well of course one reason is that XSockets is superior ;)
However, regarless of my feelings about XSockets I would like to use Hakims awesome tool without setting up a server, NodeJS, XSockets or whatever… So that´s why this plugin uses http://live.xsockets.net as communication platform. It´s a free Windows Azure based real time service.
Sooo, thats why :)
The goal…
was to create a plugin/extender for Reveal.js so that you only need to import some script-resources and write ONE line of code to get things running.
So last night I did some homework reading http://addyosmani.com/resources/essentialjsdesignpatterns/book/. Even though I do not understand it all (or read it all) it gave me lots of help in my task.
I believe I reached the goal (with the one-liner), but I am pretty sure that the code I wrote can be classified as near to garbage.. At least by a good JavaScript developer.
Example…
The source code is located at github (shown above), so I´ll just show you how to use it here. If you are following this example in your own project I presume that you´ve already downloaded reveal or downloaded my example (containing reveal).
1. Add references to index.html
We need references to some new js-files in Hakim´s example file index.html.
So, add the following references after the reference to reveal.
<!-- jQuery //-->
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<!-- XSOCKETS //-->
<script src="js/json2.js" type="text/javascript"></script>
<script src="js/jXSockets.1.0.6.beta.js" type="text/javascript"></script>
<!-- RemoteJS //-->
<script src="js/remoteConfig.js" type="text/javascript"></script>
<script src="js/remoteCommunication.js" type="text/javascript"></script>
<script src="js/remote.js" type="text/javascript"></script>
2. Enable remoting in the presentation
If you read Hakim´s notes you can see that you start Reveal by calling Reveal.Initialize(…)
After this is done we call the “plugin/extension” to enable remoting with Reveal.
We have two options starting the plugin.
- Call the plugin as shared, this will let one device control all instances of the preso world wide.
Reveal.SetupRemote({ shared:true });
- Call the plugin and set a sessionId so it will be unique for every instance… So every instance can be controlled by a device.
Reveal.SetupRemote({ sessionId: Communication.GUID() });
3. Add the remote page(s)
We have two html files on github for the remote (RemoteControl.htm and RemoteControlBusy.htm).
Just copy these pages to the same folder as Hakim´s index.html.
4. Now try it out…
If you have started the plugin with “{shared:true}” you might wanna start two instances of index.html. Remember to run the files on a webbserver so that you will get a correct origin (websocket will need it).
Since I am running on localhost I cant test the QR-code in the example, but I´ll use the link below the QR instead.
You should get something like this… Where it would be nice if the remote was an IPAD/IPHONE/ANDROID etc
Note that you also get speaker notes in the remote :)
5. Connecting to another account or selfhosted server
As you can see below we can pass in optional parameters for connecting to another account on live.xsockets.net, or connect to a selfhosted xsockets server.
//You could also pass in new information to your own live.xsockets.net account
Reveal.SetupRemote({ shared:true,
config : { xsLiveAccount: { apikey: 'your api key'
},
xHandler: 'XSockets.Live.Realtime.API',
wsUri: "ws://xsocketslive.cloudapp.net:10101/"
}
});
//Or if you want to connect to a self hosted server
Reveal.SetupRemote({ shared:true,
config : { xHandler: 'NameOfHandler probably Generic',
wsUri: "ws://127.0.0.1:4502/"
}
});
Regards
Uffe, Team XSockets
