搞死socket.io第四天，远程控制你的幻灯片

   原文：http://www.cnblogs.com/xiezhengcai/p/3964455.html

中秋休息了几天，今天又开始捣鼓socket.io了。今天的任务是通过socket.io控制你的Reveal幻灯片

工具&原料：socket.io   nodejs  Reveal.js

Reveal.js 是使用html5和css3实现的通过浏览器播放的幻灯片工具，不熟悉的请go http://lab.hakim.se/reveal-js/

完成今天的任务我们得知道几个方法：

滚动右边的显示页

Reveal.right();

滚动左边的显示页

Reveal.left();

滚动上边的显示页

Reveal.up();

滚动下边的显示页

Reveal.down();

前一页

Reveal.prev();

后一页

Reveal.next();

思路：pc页面与移动设备页面均通过socket连接到node,用户点击移动设备上的 前进后退 按钮， 设备向node发送相应的信息，node通过socket将信息转发给pc页面，页面根据该信息做出幻灯片的切换。

node端核心代码

var Server = require('socket.io');

var io = new Server(5555);

io.on('connection', function (socket) {

    socket.emit('msg',{data:'connection'});

    socket.on('msg', function (data) {

        if(data.directive =="phone"){

            if (typeof pcSocket != 'undefined') {

              pcSocket.emit(data);

            }

        }else if(data.directive == "pc"){

            pcSocket = socket;

        }

    });

});

上述代码将pc端的socket保存在pcSocket变量里，如果接收到一个移动设备发来的信息（data.directive == "phone"），则将该信息转发给pcSocket。

pc端的代码

var socket = io("ws://103.31.201.154:5555");

socket.on('msg',function(data){

    if(data.data == 'connection') {

        socket.emit('msg', {directive:"pc"});

    } else {

        console.log(data);

        Reveal.right();

    }

});

当连接上node服务器之后，pc端会给服务器发送一条指令，告诉服务器该连接是pc端的连接，当收到其它信息之后，直接切换幻灯片（可根据收到的信息选择切换的页面），

 

移动端的代码

var socket = io("ws://103.31.201.154:5555");

socket.on('msg',function(data){

    if(data.data = 'connection') {

        socket.emit('msg', {directive:"phone"});

        $().ready(function(){

            $("#top").click(function(){

                socket.emit('msg', {directive:"top"});

            });

            $("#bottom").click(function(){

                socket.emit('msg', {directive:"bottom"});

            });

            $("#left").click(function(){

                socket.emit('msg', {directive:"left"});

            });

            $("#right").click(function(){

                socket.emit('msg', {directive:"right"});

            });

        });

    }

});

移动端根据用户点击的按钮，向服务器发送相应的信息，

 

以上基本实现了移动设备控制幻灯片的播放效果，当然如果要做成产品化，那代码需要规划并考虑别的一些边缘情况。另外有一点，在实际测试中，出现了丢包现象。所以可能需要向服务器发送每一次请求的唯一id，当丢包或许一定间隔之后，重新向服务器发送数据。