用手機來實現遠程控制是不是很酷？你不需要去寫一個APP應用來實現這種功能-現在的手機瀏覽器已經支出了web socket技術，這提供了很多的可能。
這篇文章我們將用Node.js和Socket.io來實現手機控制PC的效果。
我們不必到處尋找基于HTML5的這種應用庫。我們將使用Reveal.js-它來處理幻燈片動畫效果，并支持鍵盤和觸摸事件。
我們不必自己來實現遠程控制的接口，我們將實現手機和電腦的同步。這樣不僅能控制進度，也能同步的顯示在你的手機上。
技術上很簡單。Reveal.js讓當前的幻燈片序號在URL的hash上(e.g. http://example.com/#/1).我們將這個hash發送到所有連接的設備上，
對應的將會根據這個hash來自動的顯示響應幻燈片。這樣的話，別人可以方便的直接通過url來直接訪問到顯示的頁面，所有我們需要輸入一個驗證碼
在連接之前進行驗證。
要說的是Reveal.js已經有一套API,我們可以直接調用來同步。但是hash變化的技術很簡單，我們可以直接來實現。
你可以本地運行示例，或者部署到能提供node.js環境的服務器上。本地運行更簡單些，但是必須本地有node.js并執行npm install.
下載示例代碼
確保本地已經安裝node.js。如果沒有，請安裝
解壓剛才下載的代碼包
打開終端進入相應的文件夾
運行npm install來安裝依賴包
運行node app.js來啟動應用
PC端在瀏覽器打開http://localhost:8080，并輸入連接碼(默認是kittens)
在手機端瀏覽器打開http://<your computer’s local ip address>，并輸入連接碼
請享受
思路說完，讓我們來看看代碼。這主要涉及2個js文件-app.js服務端控制，script.js瀏覽器端。你可以運行這個應用在Node.js 1.10+或者io.js.
后端，我們用到了express和Socket.io.它主要用來響應socket.io的事件監聽。用express.static來讓public下的文件可以訪問到。public/index.html文件保護顯示的代碼。express.static將會讓它自動顯示，所以我們不需要/來路由。
app.js
// This is the server-side file of our mobile remote controller app.// It initializes socket.io and a new express instance.// Start it by running 'node app.js' from your terminal.// Creating an express servervar express = require('express'),
app = express();// This is needed if the app is run on heroku and other cloud providers:var port = process.env.PORT || 8080;// Initialize a new socket.io object. It is bound to// the express app, which allows them to coexist.var io = require('socket.io').listen(app.listen(port));// App Configuration// Make the files in the public folder available to the worldapp.use(express.static(__dirname + '/public'));// This is a secret key that prevents others from opening your presentation// and controlling it. Change it to something that only you know.var secret = 'kittens';// Initialize a new socket.io applicationvar presentation = io.on('connection', function (socket) { // A new client has come online. Check the secret key and
// emit a "granted" or "denied" message.
socket.on('load', function(data){
socket.emit('access', {
access: (data.key === secret ? "granted" : "denied")
});
}); // Clients send the 'slide-changed' message whenever they navigate to a new slide.
socket.on('slide-changed', function(data){ // Check the secret key again
if(data.key === secret) { // Tell all connected clients to navigate to the new slide
presentation.emit('navigate', {
hash: data.hash
});
}
});
});
console.log('Your presentation is running on http://localhost:' + port);下面是前端的js文件，將監聽hashchange事件，并發送socket.io消息到服務器端。
public/assets/js/script.js
$(function() { // Apply a CSS filter with our blur class (see our assets/css/styles.css)
var blurredElements = $('.homebanner, div.reveal').addClass('blur'); // Initialize the Reveal.js library with the default config options
// See more here https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true // Every slide will change the URL
}); // Connect to the socket
var socket = io(); // Variable initialization
var form = $('form.login'),
secretTextBox = form.find('input[type=text]'); var key = "", animationTimeout; // When the page is loaded it asks you for a key and sends it to the server
form.submit(function(e){
e.preventDefault();
key = secretTextBox.val().trim(); // If there is a key, send it to the server-side
// through the socket.io channel with a 'load' event.
if(key.length) {
socket.emit('load', {
key: key
});
}
}); // The server will either grant or deny access, depending on the secret key
socket.on('access', function(data){ // Check if we have "granted" access.
// If we do, we can continue with the presentation.
if(data.access === "granted") { // Unblur everything
blurredElements.removeClass('blurred');
form.hide(); var ignore = false;
$(window).on('hashchange', function(){ // Notify other clients that we have navigated to a new slide
// by sending the "slide-changed" message to socket.io
if(ignore){ // You will learn more about "ignore" in a bit
return;
} var hash = window.location.hash;
socket.emit('slide-changed', {
hash: hash,
key: key
});
});
socket.on('navigate', function(data){ // Another device has changed its slide. Change it in this browser, too:
window.location.hash = data.hash; // The "ignore" variable stops the hash change from
// triggering our hashchange handler above and sending
// us into a never-ending cycle.
ignore = true;
setInterval(function () {
ignore = false;
},100);
});
} else { // Wrong secret key
clearTimeout(animationTimeout); // Addding the "animation" class triggers the CSS keyframe
// animation that shakes the text input.
secretTextBox.addClass('denied animation');
animationTimeout = setTimeout(function(){
secretTextBox.removeClass('animation');
}, 1000);
form.show();
}
});
});手機遠程訪問控制已經可以了。希望你能從中得到有趣的體驗。
參考：
http://tutorialzine.com/2015/02/smartphone-remote-control-for-presentations/https://github.com/hakimel/reveal.js/wiki/Example-Presentations
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
