From 976536d15ec7859313dcbce33c97fdfd69c00eb1 Mon Sep 17 00:00:00 2001
From: David Banham <david.banham@gmail.com>
Date: Sun, 5 Aug 2012 23:48:55 +1000
Subject: [PATCH] Added multiplexing server

---
 README.md                     |  12 +++-
 index.html                    |  20 ++++++-
 js/reveal.js                  |  20 ++++---
 package.json                  |  46 ++++++++------
 plugin/multiplex/client.js    |  12 ++++
 plugin/multiplex/index.js     |  62 +++++++++++++++++++
 plugin/multiplex/master.js    |  32 ++++++++++
 plugin/multiplex/notes.html   | 109 ++++++++++++++++++++++++++++++++++
 plugin/speakernotes/client.js |   2 +-
 9 files changed, 285 insertions(+), 30 deletions(-)
 create mode 100644 plugin/multiplex/client.js
 create mode 100644 plugin/multiplex/index.js
 create mode 100644 plugin/multiplex/master.js
 create mode 100644 plugin/multiplex/notes.html

diff --git a/README.md b/README.md
index 0e6da25c..8c583340 100644
--- a/README.md
+++ b/README.md
@@ -157,6 +157,16 @@ By default, the slides will be served at [localhost:1947](http://localhost:1947)
 
 You can change the appearance of the speaker notes by editing the file at `plugin/speakernotes/notes.html`.	
 
+### Multiplexing
+
+The multiplex plugin allows your audience to view the slides on their own phone, tablet or laptop. As the master navigates the slides, all clients will update in real time. See a demo at [http://revealjs.jit.su/](http://revealjs.jit.su)
+
+Configuration is via the multiplex object in index.html. To generate unique secret and token values, visit [revealjs.jit.su/token](revealjs.jit.su/token)
+
+multiplex.secret should only be configured on those pages you wish to be able to control slide navigatoin for all clients. Multi-master configurations work, but if you don't wish your audience to be able to control your slides, set the secret to null. In this master/slave setup, you should create a publicly accessible page with secret set to null, and a protected page containing your secret.
+
+You are very welcome to use the server running at reveal.jit.su, however availability and stability are not guaranteed. For anything mission critical I recommend you run your own server. It is simple to deploy to nodejitsu or run on your own environment.
+
 ### Known Issues
 
 - The notes page is supposed to show the current slide and the next slide, but when it first starts, it always shows the first slide in both positions. 
@@ -286,4 +296,4 @@ You can change the appearance of the speaker notes by editing the file at `plugi
 
 MIT licensed
 
-Copyright (C) 2012 Hakim El Hattab, http://hakim.se
\ No newline at end of file
+Copyright (C) 2012 Hakim El Hattab, http://hakim.se
diff --git a/index.html b/index.html
index c6decbfe..95bcd272 100644
--- a/index.html
+++ b/index.html
@@ -278,6 +278,15 @@ function linkify( selector ) {
 		<script src="lib/js/head.min.js"></script>
 
 		<script>
+
+			var multiplex = {
+				id: null
+				, secret: null
+				, url: 'revealjs.jit.su'
+			};
+
+			var notes = false;
+
 			head.ready( function() {
 
 				// Fires when a slide with data-state=customevent is activated
@@ -326,11 +335,20 @@ function linkify( selector ) {
 
 			// If we're runnning the notes server we need to include some additional JS
 			// TODO Is there a better way to determine if we're running the notes server?
-			if( window.location.host === 'localhost:1947' ) {
+			if( window.location.host === 'localhost:1947' || notes === true) {
 				scripts.push( 'socket.io/socket.io.js' );
 				scripts.push( 'plugin/speakernotes/client.js' );
 			}
 
+			if( multiplex.id !== null ) {
+				scripts.push( 'socket.io/socket.io.js' );
+				scripts.push( 'plugin/multiplex/client.js' );
+
+				if( multiplex.secret !== null ) {
+					scripts.push( 'plugin/multiplex/master.js' );
+				}
+			}
+
 			// Load the scripts and, when completed, initialize reveal.js
 			head.js.apply( null, scripts );
 			
diff --git a/js/reveal.js b/js/reveal.js
index 23629c30..7d726520 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -653,7 +653,7 @@ var Reveal = (function(){
 	 * Updates the visual slides to represent the currently
 	 * set indices. 
 	 */
-	function slide( h, v ) {
+	function slide( h, v, fireEvent ) {
 		// Remember where we were at before
 		previousSlide = currentSlide;
 
@@ -720,12 +720,14 @@ var Reveal = (function(){
 
 		// Dispatch an event if the slide changed
 		if( indexh !== indexhBefore || indexv !== indexvBefore ) {
-			dispatchEvent( 'slidechanged', {
-				'indexh': indexh, 
-				'indexv': indexv,
-				'previousSlide': previousSlide,
-				'currentSlide': currentSlide
-			} );
+			if( fireEvent !== false ) {
+				dispatchEvent( 'slidechanged', {
+					'indexh': indexh, 
+					'indexv': indexv,
+					'previousSlide': previousSlide,
+					'currentSlide': currentSlide
+				} );
+			}
 		}
 		else {
 			// Ensure that the previous slide is never the same as the current
@@ -901,8 +903,8 @@ var Reveal = (function(){
 	 * @param {Number} h The horizontal index of the slide to show
 	 * @param {Number} v The vertical index of the slide to show
 	 */
-	function navigateTo( h, v ) {
-		slide( h, v );
+	function navigateTo( h, v, fireEvent ) {
+		slide( h, v, fireEvent );
 	}
 	
 	function navigateLeft() {
diff --git a/package.json b/package.json
index fa85011b..823d9516 100644
--- a/package.json
+++ b/package.json
@@ -1,20 +1,30 @@
 {
-	"author": "Hakim El Hattab",
-	"name": "reveal.js",
-	"description": "HTML5 Slideware with Presenter Notes",
-	"version": "1.5.0",
-	"repository": {
-		"type": "git",
-		"url": "git://github.com/hakimel/reveal.js.git"
-	},
-	"engines": {
-		"node": "~0.6.8"
-	},
-	"dependencies": {
-		"underscore" : "1.3.3",
-		"express" : "2.5.9",
-		"socket.io" : "0.9.6",
-		"mustache" : "0.4.0"
-	},
-	"devDependencies": {}
+  "author": "Hakim El Hattab",
+  "name": "reveal.js",
+  "description": "HTML5 Slideware with Presenter Notes",
+  "version": "1.5.1",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/hakimel/reveal.js.git"
+  },
+  "engines": {
+    "node": "0.8.*"
+  },
+  "scripts": {
+    "start": "node ./plugin/multiplex/index.js"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/hakimel/reveal.js/raw/master/LICENSE"
+    }
+  ],
+  "dependencies": {
+    "underscore": "1.3.3",
+    "express": "2.5.9",
+    "socket.io": "0.9.6",
+    "mustache": "0.4.0"
+  },
+  "devDependencies": {},
+  "subdomain": "revealjs"
 }
diff --git a/plugin/multiplex/client.js b/plugin/multiplex/client.js
new file mode 100644
index 00000000..5e6b5562
--- /dev/null
+++ b/plugin/multiplex/client.js
@@ -0,0 +1,12 @@
+(function() {
+	var socketId = multiplex.id;
+	var socket = io.connect(multiplex.url);
+
+	socket.on(multiplex.id, function(data) {
+		// ignore data from sockets that aren't ours
+		if (data.socketId !== socketId) { return; }
+		if( window.location.host === 'localhost:1947' ) return;
+
+		Reveal.navigateTo(data.indexh, data.indexv, false);
+	});
+}());
diff --git a/plugin/multiplex/index.js b/plugin/multiplex/index.js
new file mode 100644
index 00000000..7e3f872a
--- /dev/null
+++ b/plugin/multiplex/index.js
@@ -0,0 +1,62 @@
+var express   = require('express');
+var fs        = require('fs');
+var io        = require('socket.io');
+var _         = require('underscore');
+var Mustache  = require('mustache');
+var crypto		= require('crypto');
+
+var app       = express.createServer();
+var staticDir = express.static;
+
+io            = io.listen(app);
+
+var opts = {
+	port :      1948,
+	baseDir :   __dirname + '/../../'
+};
+
+io.sockets.on('connection', function(socket) {
+	socket.on('slidechanged', function(slideData) {
+		console.log(slideData);
+		if (createHash(slideData.secret) === slideData.socketId) {
+			slideData.secret = null;
+			socket.broadcast.emit(slideData.socketId, slideData);
+		};
+	});
+});
+
+app.configure(function() {
+	[ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) {
+		app.use('/' + dir, staticDir(opts.baseDir + dir));
+	});
+});
+
+app.get("/", function(req, res) {
+	fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
+});
+
+app.get("/token", function(req,res) {
+	var ts = new Date().getTime();
+	var rand = Math.floor(Math.random()*9999999);
+	var secret = ts.toString() + rand.toString();
+	res.send({secret: secret, socketId: createHash(secret)});
+});
+
+var createHash = function(secret) {
+	var cipher = crypto.createCipher('blowfish', secret);
+	return(cipher.final('hex'));
+};
+
+// Actually listen
+app.listen(opts.port || null);
+
+var brown = '\033[33m', 
+	green = '\033[32m', 
+	reset = '\033[0m';
+
+var slidesLocation = "http://localhost" + ( opts.port ? ( ':' + opts.port ) : '' );
+
+console.log( brown + "reveal.js - Speaker Notes" + reset );
+console.log( "1. Open the slides at " + green + slidesLocation + reset );
+console.log( "2. Click on the link your JS console to go to the notes page" );
+console.log( "3. Advance through your slides and your notes will advance automatically" );
diff --git a/plugin/multiplex/master.js b/plugin/multiplex/master.js
new file mode 100644
index 00000000..cf629d96
--- /dev/null
+++ b/plugin/multiplex/master.js
@@ -0,0 +1,32 @@
+(function() {
+	// don't emit events from inside the previews themselves
+	if ( window.location.search.match( /receiver/gi ) ) { return; }
+
+	var socket = io.connect(multiplex.url);
+	
+	Reveal.addEventListener( 'slidechanged', function( event ) {
+		var nextindexh;
+		var nextindexv;
+		var slideElement = event.currentSlide;
+
+		if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') {
+			nextindexh = event.indexh;
+			nextindexv = event.indexv + 1;
+		} else {
+			nextindexh = event.indexh + 1;
+			nextindexv = 0;
+		}
+
+		var notes = slideElement.querySelector('aside.notes');
+		var slideData = {
+			indexh : event.indexh,
+			indexv : event.indexv,
+			nextindexh : nextindexh,
+			nextindexv : nextindexv,
+			secret: multiplex.secret,
+			socketId : multiplex.id
+		};
+
+		socket.emit('slidechanged', slideData);
+	} );
+}());
diff --git a/plugin/multiplex/notes.html b/plugin/multiplex/notes.html
new file mode 100644
index 00000000..88924c0d
--- /dev/null
+++ b/plugin/multiplex/notes.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Slide Notes</title>
+
+		<style>
+			body {
+				font-family: Helvetica;
+			}
+
+			#notes {
+				font-size: 24px;
+				width: 640px;
+				margin-top: 5px;
+			}
+
+			#wrap-current-slide {
+				width: 640px;
+				height: 512px;
+				float: left;
+				overflow: hidden;
+			}
+
+			#current-slide {
+				width: 1280px;
+				height: 1024px;
+				border: none;
+				-moz-transform: scale(0.5);
+				-moz-transform-origin: 0 0;
+				-o-transform: scale(0.5);
+				-o-transform-origin: 0 0;
+				-webkit-transform: scale(0.5);
+				-webkit-transform-origin: 0 0;
+			}
+
+			#wrap-next-slide {
+				width: 320px;
+				height: 256px;
+				float: left;
+				margin: 0 0 0 10px;
+				overflow: hidden;
+			}
+
+			#next-slide {
+				width: 1280px;
+				height: 1024px;
+				border: none;
+				-moz-transform: scale(0.25);
+				-moz-transform-origin: 0 0;
+				-o-transform: scale(0.25);
+				-o-transform-origin: 0 0;
+				-webkit-transform: scale(0.25);
+				-webkit-transform-origin: 0 0;
+			}
+
+			.slides {
+				position: relative;
+				margin-bottom: 10px;
+				border: 1px solid black;
+				border-radius: 2px;
+				background: rgb(28, 30, 32);
+			}
+
+			.slides span {
+				position: absolute;
+				top: 3px;
+				left: 3px;
+				font-weight: bold;
+				font-size: 14px;
+				color: rgba( 255, 255, 255, 0.9 );
+			}
+		</style>
+	</head>
+
+	<body>
+
+		<div id="wrap-current-slide" class="slides">
+			<iframe src="/?receiver" width="1280" height="1024" id="current-slide"></iframe>
+		</div>
+
+		<div id="wrap-next-slide" class="slides">
+			<iframe src="/?receiver" width="640" height="512" id="next-slide"></iframe>
+			<span>UPCOMING:</span>
+		</div>
+		<div id="notes"></div>
+
+		<script src="/socket.io/socket.io.js"></script>
+
+		<script>
+		var socketId = '{{socketId}}';
+		var socket = io.connect(window.location.origin);
+		var notes = document.getElementById('notes');
+		var currentSlide = document.getElementById('current-slide');
+		var nextSlide = document.getElementById('next-slide');
+
+		socket.on('slidedata', function(data) {
+			// ignore data from sockets that aren't ours
+			if (data.socketId !== socketId) { return; }
+
+			notes.innerHTML = data.notes;
+			currentSlide.contentWindow.Reveal.navigateTo(data.indexh, data.indexv);
+			nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv);
+		});
+		</script>
+
+	</body>
+</html>
diff --git a/plugin/speakernotes/client.js b/plugin/speakernotes/client.js
index 1aba8b8c..9f681737 100644
--- a/plugin/speakernotes/client.js
+++ b/plugin/speakernotes/client.js
@@ -2,7 +2,7 @@
 	// don't emit events from inside the previews themselves
 	if ( window.location.search.match( /receiver/gi ) ) { return; }
 
-	var socket = io.connect(window.location.origin);
+	var socket = io.connect('127.0.0.1:1947');
 	var socketId = Math.random().toString().slice(2);
 	
 	console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId);