用手机实现远程控制是不是很爽？您无需编写APP应用程序即可实现此功能。现在的手机浏览器已经提供了websocket技术，这提供了很多可能性。在这篇文章中，我们将使用Node.js和Socket.io来实现手机控制PC的效果。这样的基于HTML5的应用程序库，我们不用再四处寻找了。我们将使用Reveal.js-它处理幻灯片动画并支持键盘和触摸事件。我们不用自己去实现远程控制界面，我们会实现手机和电脑的同步。这样不仅可以控制进度，还可以同步显示在手机上。实现思路在技术上很简单。Reveal.js在URL的散列上生成当前幻灯片编号（例如http://example.com/#/1）。我们将这个散列发送到所有连接的设备，相应的将自动根据这个散列显示响应幻灯片。这样其他人就可以直接通过url直接访问显示的页面，所以我们在连接前需要输入验证码进行验证。我想说的是Reveal.js已经有了一套API，我们可以直接调用同步。但是hash变化的技术很简单，我们直接实现即可。运行示例可以在本地运行，也可以部署到提供node.js环境的服务器上。本地运行比较简单，但是本地必须有node.js，执行npminstall。运行本地代码下载示例代码确保本地已经安装了node.js。如果没有，请安装并解压刚刚下载的代码包。打开终端，进入对应的文件夹。运行npminstall安装依赖包。运行nodeapp.js以启动应用程序。PC端浏览器打开http://localhost:8080，输入连接密码（默认是小猫）手机浏览器打开http://，输入连接密码请欣赏代码创意说完了，我们来看一下代码。这里主要涉及到2个js文件——app.js服务端控件，script.js浏览器端。您可以在Node.js1.10+或io.js上运行此应用程序。后端，我们使用了express和Socket.io。主要用于响应socket.io事件监听。使用express.static使public下的文件可访问。public/index.html文件保护显示的代码。express.static会让它自动显示，所以我们不需要/来路由。app.js//Thisistheserver-sidefileofourmobileremotecontrollerapp.//Itinitializessocket.ioandanewexpressinstance.//Startitbyrunning'nodeapp.js'fromyourterminal.//Creatinganexpressservervarexpress=require('express'),app=express();//如果应用程序在heroku和其他云提供商上运行，则需要此文件：varport=process。env.PORT||8080;//初始化一个新的socket.ioobject.Itisboundto//theexpressapp,whichallowsthemtocoexist.vario=require('socket.io').listen(app.listen(port));//AppConfiguration//Makethefilesinthepublicfolderavailabletotheworldapp.use(express.static(__dirname+'/public'));//Thisisasecretkeythatpreventsothersfromopeningyourpresentation//andcontrollingit.Changeittosomethingthatonlyyouknow.varsecret='kittens';//初始化一个newsocket.ioapplicationvarpresentation=io.on('connection',function(socket){//Anewclienthascomeonline.检查秘密密钥和//emita“授予”或“拒绝”消息.socket.on('load',function(data){socket.emit('access',{access:(data.key===secret?"granted":"denied")});});//客户端发送'slide-changed'消息，每当他们导航到一个newslide.socket.socket.on('slide-changed',function(data){//Checkthesecretkeyagainif(data.key===secret){//Tellallconnectedclientstonavigatetothenewslidepresentation.emit('navigate',{hash:data.hash});}});});console.log('Yourpresentationisrunningonhttp://localhost:'+port);下面是前端的js文件，会监听hashchange事件，向服务端发送socket.io消息public/assets/js/script.js$(function(){//ApplyaCSSfilterwithourblurclass(seeourassets/css/styles.css)varblurredElements=$('.homebanner,div.reveal').addClass('blur');//InitializetheReveal.jslibrarywiththedefaultconfigoptions//在这里查看更多https://github.com/hakimel/reveal.js#configurationReveal.initialize({history:true//EveryslidewillchangetheURL});//Connecttothesocketvarsocket=io();//Variableinitializationvarform=$('form.login'),secretTextBox=form.find('input[type=text]');varkey="",animationTimeout;//当页面被加载时，它要求你forakeyandsendsittotheserverform.submit(function(e){e.preventDefault();key=secretTextBox.val(.trim();//如果有key，发送到服务器端//通过socket.iochannelwitha'load'event.if(key.length){socket.emit('load',{key:key});}});//Theserverwilleithergrantordenyaaccess,dependingonthesecretkeysocket.on('access',function(data){//Checkifwehave"granted"access.//Ifwedo,wecancontinuewiththepresentation.if(data.access==="granted"){//UnblureverythingblurredElements.removeClass('blurred');form.hide();varignore=false;$(window).on('hashchange',function(){//Notifyotherclientsthatwehavenavigatedtoanewslide//通过发送“slide-changed”消息到socket.ioif(ignore){//你将了解更多关于“ignore”inabitreturn;}varhash=window.location.hash;socket.emit('slide-changed',{hash:hash,key:key});});socket.on('navigate',function(data){//Anotherdevicehaschangeditsslide.Changeitinthisbrowser,too:window.location.hash=data.hash;//"ignore"变量停止thehashchangefrom//triggeringourhashchangehandleraboveandsending//usintoanever-endingcycle.ignore=true;setInterval(function(){ignore=false;},100);});}else{//WrongsecretkeyclearTimeout(animationTimeout);//添加“动画”类触发CSSkeyframe//animationthatshakesthetextinput.secretTextBox.addClass('deniedanimation');animationTimeout=setTimeout(函数(){secretTextBox.removeClass('动画');},1000);form.show();}});});现在是幻灯片放映的时候了从您的手机远程访问控制已准备就绪希望您有一个有趣的体验。这种高级玩具赶紧练起来吧！！
