WebSocket實現手機遠程控制ppt的一個簡單例子

時間 2019-11-06

標籤 websocket 實現手機遠程控制 ppt 一個簡單例子欄目 Microsoft Office 简体版

原文原文鏈接

原文地址：http://www.pwhack.me/archives/mobile-remote-presentation-controller.htmljavascript

小弟最近有幸被邀請在杭電本部（我是東校區的屌絲）作了一個演講。同窗們可能對我用手機來控制ppt比較好奇，想知道到底是如何作到的。其實很是簡單，徹底經過websocket來發送指令，接收指令後用reveal.js的api來實現對幻燈片的控制。impress.js也有相應的api，只要修改幾行代碼就行了。css

以前原本想直接用remote-presentation-controller的，可是這個controller是使用express + socket.io來實現的，我認爲，只是一個ppt而已，不必弄得這麼重。特別是socket.io會把html代碼限制在socket.io服務器上，這樣缺少必要的靈活性，並且websocket自己就很是簡單好用，不必再用封裝的東西。html

因爲不滿意這個輪子，因而本身昨晚臨時趕了一個輪子出來，僅實現最簡單的控制功能，未實現安全驗證等功能。java

PPT端

index.html

<!-- reveal.js的ppt代碼，若是你不是一個coder能夠在http://slid.es上製做 -->
<script src="js/reveal.min.js"></script>
<!-- 引入咱們的js -->
<script type="text/javascript" src="js/remote.js"></script>
<script>
//reveal.js初始化代碼
Reveal.initialize({ ... });
</script>

remote.js

var PPT = 1;

var OP_UP = 0;
var OP_DOWN = 1;
var OP_LEFT = 2;
var OP_RIGHT = 3;

var socket = new WebSocket('ws://somewhere.com:3000');

socket.onopen = function (event) {
    console.log('connection has been established.');
};

socket.onmessage = function (event) {
    var data = JSON.parse(event.data);
    switch (data.action) {
        case OP_UP:
            Reveal.navigateUp();
            break;
        case OP_DOWN:
            Reveal.navigateDown();
            break;
        case OP_LEFT:
            Reveal.navigateLeft();
            break;
        case OP_RIGHT:
            Reveal.navigateRight();
            break;
    }
}

服務器端

server.js

這裏使用了node-websocket-server，一個經典的node.js websocket服務器模塊。我對其進行了必要的修改node

var CONTROLLER = 0;

var ws = require(__dirname + '/lib/ws/server');
var server = ws.createServer();

server.addListener('connection', function (conn) {
    console.log(conn.id + ' has connected to the server');

        conn.addListener('message', function (msg) {
                var data = JSON.parse(msg);

                if (data.sender === CONTROLLER) {
                        var command = {};
                        command.action = data.action;

                        server.broadcast(JSON.stringify(command));
                }
        });
});

server.listen(3000);
console.log('server listening on 3000');

控制檯端

這個佈局參考了remote-presentation-controller中控制檯的佈局，並增長了指示鏈接狀態的圓形指示燈。請原諒我因爲時間倉促而使用了醜陋的<center>，還有內嵌的css。但願這些糟糕的代碼沒能影響你的好心情。T.T
jquery

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title></title>
</head>
<body style="background-color: #34495e;">

    <div id="operation" style="border-radius: 300px; height: 50px; width: 50px; background-color:#c0392b;"></div>
    <center>
                <table>
                        <tr>
                                <td></td>
                                <td><img class="ctl_btn up" cmd="up" src="images/arrow_up.png" /></td>
                                <td></td>
                        </tr>
                        <tr>
                                <td><img class="ctl_btn left" cmd="left" src="images/arrow_left.png" /></td>
                                <td></td>
                                <td><img class="ctl_btn right" cmd="right" src="images/arrow_right.png" /></td>
                        </tr>
                        <tr>
                                <td></td>
                                <td><img class="ctl_btn down" cmd="down"  src="images/arrow_down.png" /></td>
                                <td></td>
                        </tr>


                </table>
    </center>

    <script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js></script>
    <script type="text/javascript">
    var CONTROLLER = 0;

    var OP_UP = 0;
    var OP_DOWN = 1;
        var OP_LEFT = 2;
        var OP_RIGHT = 3;

    $(function () {

            var socket = new WebSocket('ws://somewhere.com:3000');

        socket.onopen = function () {
            $('#operation').css('background-color', '#2ecc71');
        };

        socket.onclose = function () {
            $('#operation').css('background-color', '#c0392b');
        };

        socket.onerror = function (event) {
            console.dir(event);
        };

        $('.up').click(function () {
            var data = {};
                        data.sender = CONTROLLER;
                        data.action = OP_UP;

            console.log(JSON.stringify(data));

                        socket.send(JSON.stringify(data));  
        });

        $('.down').click(function () {
            var data = {};
                        data.sender = CONTROLLER;
                        data.action = OP_DOWN;

            console.log(JSON.stringify(data));

                        socket.send(JSON.stringify(data));  
        });

        $('.left').click(function () {
            var data = {};
                        data.sender = CONTROLLER;
                        data.action = OP_LEFT;

            console.log(JSON.stringify(data));

                        socket.send(JSON.stringify(data));  
        });

        $('.right').click(function () {
            var data = {};
                        data.sender = CONTROLLER;
                        data.action = OP_RIGHT;

            console.log(JSON.stringify(data));

                        socket.send(JSON.stringify(data));  
        });
    });
    </script>
</body>
</html>