遥控你的电脑:通过Node.js和Socket.io实现手机的远程控制

移动开发
用手机来实现远程控制是不是很酷?你不需要去写一个APP应用来实现这种功能,现在的手机浏览器已经支出了web socket技术,这提供了很多的可能。这篇文章我们将用Node.js和Socket.io来实现手机控制PC的效果。

用手机来实现远程控制是不是很酷?你不需要去写一个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变化的技术很简单,我们可以直接来实现。

[[140461]]

运行

你可以本地运行示例,或者部署到能提供node.js环境的服务器上。本地运行更简单些,但是必须本地有node.js并执行npm install.

运行本地代码

  • 下载示例代码
  • 确保本地已经安装node.js。如果没有,请安装
  • 解压刚才下载的代码包
  • 打开终端进入相应的文件夹
  • 运行npm install来安装依赖包
  • 运行node app.js来启动应用
  • PC端在浏览器打开http://localhost:8080,并输入连接码(默认是kittens)
  • 在手机端浏览器打开http://,并输入连接码
  • 请享受

代码

思路说完,让我们来看看代码。这主要涉及2个js文件-app.js服务端控制,script.js浏览器端。你可以运行这个应用在Node.js 1.10+或者io.js.

后端,我们用到了expressSocket.io。它主要用来响应socket.io的事件监听。用express.static来让public下的文件可以访问到。

public/index.html文件保护显示的代码。express.static将会让它自动显示,所以我们不需要/来路由。

app.js

  1. // This is the server-side file of our mobile remote controller app. 
  2. // It initializes socket.io and a new express instance. 
  3. // Start it by running 'node app.js' from your terminal. 
  4. // Creating an express server 
  5. var express = require('express'),app = express(); 
  6. // This is needed if the app is run on heroku and other cloud providers: 
  7. var port = process.env.PORT || 8080
  8. // Initialize a new socket.io object. It is bound to 
  9. // the express app, which allows them to coexist. 
  10. var io = require('socket.io').listen(app.listen(port)); 
  11. // App Configuration 
  12. // Make the files in the public folder available to the world 
  13. app.use(express.static(__dirname + '/public')); 
  14. // This is a secret key that prevents others from opening your presentation 
  15. // and controlling it. Change it to something that only you know. 
  16. var secret = 'kittens'
  17. // Initialize a new socket.io application 
  18. var presentation = io.on('connection', function (socket) { 
  19.     // A new client has come online. Check the secret key and 
  20.     // emit a "granted" or "denied" message. 
  21.     socket.on('load', function(data){ 
  22.         socket.emit('access', { 
  23.             access: (data.key === secret ? "granted" : "denied"
  24.         }); 
  25.     }); 
  26.     // Clients send the 'slide-changed' message whenever they navigate to a new slide. 
  27.     socket.on('slide-changed', function(data){ 
  28.         // Check the secret key again 
  29.         if(data.key === secret) { 
  30.             // Tell all connected clients to navigate to the new slide 
  31.             presentation.emit('navigate', { 
  32.                 hash: data.hash 
  33.             }); 
  34.         } 
  35.     }); 
  36. }); 
  37. console.log('Your presentation is running on http://localhost:' + port); 

下面是前端的js文件,将监听hashchange事件,并发送socket.io消息到服务器端。

public/assets/js/script.js

 
  1. $(function() { 
  2.     // Apply a CSS filter with our blur class (see our assets/css/styles.css) 
  3.     var blurredElements = $('.homebanner, div.reveal').addClass('blur'); 
  4.     // Initialize the Reveal.js library with the default config options 
  5.     // See more here https://github.com/hakimel/reveal.js#configuration 
  6.     Reveal.initialize({ 
  7.         history: true        // Every slide will change the URL 
  8.     }); 
  9.     // Connect to the socket 
  10.     var socket = io(); 
  11.     // Variable initialization 
  12.     var form = $('form.login'), 
  13.         secretTextBox = form.find('input[type=text]'); 
  14.     var key = "", animationTimeout; 
  15.     // When the page is loaded it asks you for a key and sends it to the server 
  16.     form.submit(function(e){ 
  17.         e.preventDefault(); 
  18.         key = secretTextBox.val().trim(); 
  19.         // If there is a key, send it to the server-side 
  20.         // through the socket.io channel with a 'load' event. 
  21.         if(key.length) { 
  22.             socket.emit('load', { 
  23.                 key: key 
  24.             }); 
  25.         } 
  26.     }); 
  27.     // The server will either grant or deny access, depending on the secret key 
  28.     socket.on('access', function(data){ 
  29.         // Check if we have "granted" access. 
  30.         // If we do, we can continue with the presentation. 
  31.         if(data.access === "granted") { 
  32.             // Unblur everything 
  33.             blurredElements.removeClass('blurred'); 
  34.             form.hide(); 
  35.             var ignore = false
  36.             $(window).on('hashchange', function(){ 
  37.                 // Notify other clients that we have navigated to a new slide 
  38.                 // by sending the "slide-changed" message to socket.io 
  39.                 if(ignore){ 
  40.                     // You will learn more about "ignore" in a bit 
  41.                     return
  42.                 } 
  43.                 var hash = window.location.hash; 
  44.                 socket.emit('slide-changed', { 
  45.                     hash: hash, 
  46.                     key: key 
  47.                 }); 
  48.             }); 
  49.             socket.on('navigate', function(data){ 
  50.                 // Another device has changed its slide. Change it in this browser, too: 
  51.                 window.location.hash = data.hash; 
  52.                 // The "ignore" variable stops the hash change from 
  53.                 // triggering our hashchange handler above and sending 
  54.                 // us into a never-ending cycle. 
  55.                 ignore = true
  56.                 setInterval(function () { 
  57.                     ignore = false
  58.                 },100); 
  59.             }); 
  60.         } 
  61.         else { 
  62.             // Wrong secret key 
  63.             clearTimeout(animationTimeout); 
  64.             // Addding the "animation" class triggers the CSS keyframe 
  65.             // animation that shakes the text input. 
  66.             secretTextBox.addClass('denied animation'); 
  67.             animationTimeout = setTimeout(function(){ 
  68.                 secretTextBox.removeClass('animation'); 
  69.             }, 1000); 
  70.             form.show(); 
  71.         } 
  72.     }); 
  73. }); 

现在是幻灯放映时间

手机远程访问控制已经可以了。希望你能从中得到有趣的体验。这种高端的玩具,还不快点儿操练起来!!

责任编辑:倪明 来源: tutorialzine
相关推荐

2011-09-08 13:53:31

Node.js

2013-10-23 17:17:31

Node.jsdoT

2014-04-10 09:43:00

Node.jsTwilio

2021-05-25 11:55:30

Python手机监控远程

2014-04-10 09:55:46

手机Node.jswilio

2014-07-22 10:29:04

背包算法coffee

2019-07-26 14:40:58

Vue.jsSocket.IO前端

2016-11-22 13:25:28

Apache Spar大数据

2017-09-05 15:30:00

JavascriptSocket.ioNode.js

2011-12-23 10:51:24

Node.js

2014-01-17 17:33:32

远程开机

2017-03-13 10:00:25

Chrome浏览器Windows 10

2022-09-04 15:54:10

Node.jsAPI技巧

2012-01-09 13:24:27

2013-12-20 16:43:33

远程开机关机

2014-01-07 17:21:27

远程控制

2022-04-01 08:02:32

Node.js快照加速hooks

2022-04-02 06:04:03

Node.js代码缓存V8

2021-11-16 08:51:29

Node JavaScript变量类型

2021-09-10 06:50:03

Node.jsSocket端口
点赞
收藏

51CTO技术栈公众号