先看一张效果图：
嘿嘿，只要在手机上就可以实现控制电脑中的 PPT 展示哦。上一页、下一页、步骤，都可以实现（需要有前端基础的噢~，不懂的可以绕过，知道能有这个东西就好）。
实现的思路和方案：
思路：投影仪访问 PPT 的展示页面，手机访问 PPT 的控制页面。手机控制 PPT 的动作，通过服务器同步到电脑上的 PPT，从而实现手机控制 PPT 的功能。
- 网页版的 PPT 使用 reveal-js。
- 通过 Socket 来实现动作的同步信息。
- 页面基于 NodeJs 来完成。
实现的细节：
首先需要在 NodeJs 上把 2 个页面渲染出来，一个是control，另外一个是show。具体的实现方法就不讲了，在 Express 的框架上非常简单。
引入socket.io，例如在处理页面跳转和渲染的路由里面——也就是服务器端，require并定义端口号，设置为广播。
/**
* 定义 socket 的端口号，处理广播
*/
var io = require('socket.io').listen(3001);
io.sockets.on('connection', function (socket) {
socket.on('message', function(data) {
socket.broadcast.emit('message', data);
});
});
其次是，在页面引入并制作 PPT，详细教程请看 reveal-js 官网。为什么会试用 reveal， 很简单的一个原因，它提供的 API 足以并且胜任实现这个功能。
PPT 制作好了之后，分别把代码拷贝到control和show，其实在没有接入 socket 的前提下，这 2 个页面都可以播放的。
制作「控制台页面」的负责监控和发送指令：
/**
* ppt 更换的时候，获取当前的 PPT 参数，拼装成为数组发送到服务器。
*/
Reveal.addEventListener( 'slidechanged', function( event ) {
var arr = [event.indexh, event.indexv];
socket.send(arr);
});
/**
* ppt 单页有步骤的时候，发送套接字
*/
Reveal.addEventListener( 'fragmentshown', function( event ) {
var indexf = $(event.fragment).data('fragment-index') + 1;
var arr = [Reveal.getIndices().h, Reveal.getIndices().v, indexf];
socket.send(arr);
});
/**
* ppt 单页有步骤的时候，回退发送套接字
*/
Reveal.addEventListener( 'fragmenthidden', function( event ) {
var indexf = $(event.fragment).data('fragment-index');
var arr = [Reveal.getIndices().h, Reveal.getIndices().v, indexf];
socket.send(arr);
});
发送的指令到达服务器端，第一段代码就会监控到。再通过「广播」的形式发送给展示页面「show」。在「show」页面，需要处理接到的指令，并按照指令执行动作：
/**
* 定义 socket，客户端用户接收数据，端口需要和服务器端的保持一致。
*/
var socket = io.connect('http://127.0.0.1:3001');
socket.on('connect', function () {
socket.on('message', function(data) {
next(data);
});
});
/**
* 处理幻灯片播放的进度函数，使用 Reveal 的 slide 接口。
*/
function next(data) {
var t = data.split(',');
if(t.length > 2) {
Reveal.slide(t[0], t[1], t[2]);
} else {
Reveal.slide(t[0], t[1]);
}
}
这个时候，已经能够实现在「控制页面」操作 PPT，而「展示页面」同步操作的功能了。但是手机上怎么办？再来一个「响应式布局」，把手机上的「控制台」放大，便于操作：
/**
* 响应式设计，在手机上放大控制台
*/
@media only screen and (max-width:320px) {
.reveal {
height: 200px;
}
.reveal .controls {
width: 100%;
height: 200px;
right: 0px;
background: rgba(0, 0, 0, 0.5);
bottom: 0px;
}
.reveal .controls div {
border-width: 30px;
}
.reveal .controls div.navigate-left {
border-right-width: 50px;
top: 73px;
left: 45px;
}
.reveal .controls div.navigate-right {
border-left-width: 50px;
top: 73px;
left: 195px;
}
.reveal .controls div.navigate-down {
border-top-width: 50px;
top: 140px;
left: 130px;
}
.reveal .controls div.navigate-up {
border-bottom-width: 50px;
left: 130px;
top: -15px;
}
}
嘿嘿，现在已经完成了。Reveal 提供了很多套主题，可以应不同的需求进行切换使用。今天把所有的逻辑都整理了一遍，代码托管在 GitHub，详见 用手机控制 PPT，有兴趣的同学欢迎 Fork 或者 Star。
如何安装？
- 前提：node 环境，npm 装好。
git clone这里的代码用手机控制 PPT 到本地，打开之后执行npm install。- 依赖安装完之后，执行
node app.js。 - 浏览器打开 2 个窗口，分别输入：
http://localhost:3000/control.html和http://localhost:3000/show.html。 - 在 congtrol 页面操作 PPT 的播放，或者手机上。
后续？恩。你可以把这个应用包装一下，做样式定义，使得写 PPT 可以很容易。其实我很喜欢的就是 slid.es 这样的在线 PPT ，效果很炫，用起来很爽。
