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，當丟包或許一定間隔之后，重新向服務器發送數據。