Broadcast Your Slideshow Presentations with Socket.io and Reveal.js

Broadcasting your Revealjs presentations LIVE on OpenShiftReveal.js has been my favorite project for producing web-based slideshow presentations for quite some time.

It looks great in modern browsers that have support for CSS 3D transformations, but it also degrades nicely, and remainins quite functional even when converted down to a static 2D format (as shown by the handy PDF export feature).

If you can handle a bit of html markup, or even a little markdown – then it’s quite simple to use as well.

Slide content is separated by <section> tags, which can be nested:

<section>
<h2>Slide Heading</h2>
<p>here is an example slide showing how easy it is to write, and <a href='#'>to link</a></p>
</section>

With markdown:

<section data-markdown>
## Slide Heading
 
here is an example slide showing how easy it is to write a paragraph [with a link](#)
</section>

Reveal also comes bundled with an extensive list of plugins and enhancements including speaker notes, themes, a Javascript API, and much more.

Over the last year I’ve used Reveal to share my slides at more than 20 different events, qualifying it as one of the real “killer apps” of the open cloud (at least for me).

This post shows you how to take advantage of the customizations that I’ve made in order to instantly launch your own slides, and easily broadcast your presentations out to an audience of connected web browsers in realtime.

Follow along to get started with your own hosted Reveal.js slide deck and Websocket-enabled broadcasting relay.

Easy Hosting on an Open Platform

My first two steps toward making this project easier to run on OpenShift involved updating the project’s package.json file, and including code that will check the system environment for application configuration strings.

I configured the project’s package.json file to load my new Reveal hosted script, available in the project’s plugin/hosted folder:

"scripts": {
  "start": "grunt serve"
},
"main": "plugin/hosted/index.js"

Then, I added references to the following environment variables (plugin/hosted/index.js):

var opts = {
  port: process.env.PORT || process.env.OPENSHIFT_NODEJS_PORT || 1948,
  ipAddr : process.env.IP_ADDR || process.env.OPENSHIFT_NODEJS_IP || '127.0.0.1',
  web_host: process.env.REVEAL_WEB_HOST || process.env.OPENSHIFT_APP_DNS || 'localhost:1948',
  socket_host: process.env.REVEAL_SOCKET_HOST || process.env.OPENSHIFT_APP_DNS || 'localhost',
  socket_secret : process.env.REVEAL_SOCKET_SECRET
};

The opts hash helps keep the project source clean and free of configuration details, increasing portability, while providing a list of fallback values that work well for local development purposes.

This helps enable support for spinning up your own OpenShift-hosted Reveal.js slide decks in a single command using the rhc command-line tool:

rhc app create revealjs nodejs-0.10 --from-code=http://github.com/ryanj/reveal.js.git REVEAL_SOCKET_SECRET=0P3N_S0URC3_5L1D35H0WZ

In the above command, I’ve supplied an initial value for my project’s REVEAL_SOCKET_SECRET.

Configuring a Device to Broadcast it’s Slide Transitions

If you don’t supply a secret token during your initial app creation step, the server will automatically generate a temporary secret socket value, and print the result to your server log.

You can monitor your server logs for this configuration info using the rhc tail command:

rhc tail revealjs

Here is some example output from my server logs, showing what to look for:

Tell OpenShift to save this broadcast token and publish it as an environment variable:
    rhc env set REVEAL_SOCKET_SECRET=0P3N_S0URC3_5L1D35H0WZ -a revealjs
Then, configure your browser as a presentation device by loading the following URL:
    http://revealjs-rjdemo.rhcloud.com/?setToken=0P3N_S0URC3_5L1D35H0WZ

Reloading your index page will cause the usage notes to be printed again.

The SocketIO relay won’t work correctly until a REVEAL_SOCKET_SECRET value has been made available to your app:

rhc env set REVEAL_SOCKET_SECRET="MY_RANDOM_SECRET_STRING"
rhc app restart revealjs

You may need to restart in order to help your server detect the new configuration strings.

Now that your server’s broadcast secrets are locked-in, you’ll need to configure your presentation device to broadcast it’s slide transitions via our SocketIO relay.

The URL listed in the server logs provides an easy way to set your broadcast secret via the querystring:

http://revealjs-rjdemo.rhcloud.com/?setToken=0P3N_S0URC3_5L1D35H0WZ

You can also clear a previous broadcast secret, resetting a device back to it’s default, client configuration (which listens for slide change events relayed from the SocketIO server):

http://revealjs-rjdemo.rhcloud.com/?clearToken

You browser’s secret token information ends up getting stored in your browser’s localStorage area.

When testing broadcasting: Make sure to use two different browser types (FireFox vs Chrome), or use an incognito window or another private browsing environment that provides it’s own sandboxed localStorage area.

Connecting to an Alternate SocketIO Server

If you would like to upgrade your SocketIO connections from Long-polling to WebSockets, add :8000 (or :8443) to the end of your application’s host url, and store the result in your application environment as the REVEAL_SOCKET_HOST:

rhc app set REVEAL_SOCKET_HOST="revealjs-rjdemo.rhcloud.com:8000"
rhc app restart

SocketIO will take advantage of WebSockets connections when available, but will also take advantage of other schemes such as long-polling, to simulate a streaming socket connection when one is not available.

Local Development

If you created your hosted application environment using the rhc command line tool, then you should already have a local copy of your application source to work with. Look for a new directory that matches your application name.

If you don’t already have a copy of the project source, rhc can help fetch a clone from your OpenShift environment:

rhc git-clone revealjs

To fire up a local server, run npm install, followed by npm start:

cd revealjs
npm install 
grunt serve

The server output will include alternative information for configuring your local host environment (using the export command), and your broadcasting client device.

Set your broadcast token as an environment variable and restart your server:
    export REVEAL_SOCKET_SECRET=0P3N_S0URC3_5L1D35H0WZ
    grunt serve
Then, configure your browser as a presentation device by loading the following URL:
    http://localhost:1948/?setToken=0P3N_S0URC3_5L1D35H0WZ

Adding Your Own Deck of Slides

Take a look at the project’s index.html, and README file for information on how to format your new presentation content.

The previous section on local hosting can help you test your changes before you commit them.

When you’re ready, add and commit your changes to the default slide deck (index.html):

git add index.html
git commit -m 'updating Revealjs slideshow content'
git push

Your updated slides should now be live and ready to broadcast on the web!

A live demo is available here: slide-shifter.rhcloud.com

Enjoy!

Next Steps?

  1. Deploy your own copy of our Revealjs Demo application to get started with your own web-hosted slides in just a few minutes.
  2. Sign up for a Free OpenShift Online account
  3. Learn how to adapt almost any Nodejs project to run on OpenShift in two simple steps
  4. Learn how to incorporate your own custom domain names and SSL into OpenShift
Categories
Educators, News, Node.js, OpenShift Container Platform, OpenShift Online, OpenShift Origin
Tags
, , , , , ,
Comments are closed.