前言
如何让手机充当第二个显示器,用来随时预览PC端的代码?前一阵子写代码时,一直在琢磨这个问题。
因为办公室电脑配置低下,且只配备一个17寸显示器,每当反复调试预览网页时,都要保存,刷新。用过
brackets即使预览功能,总是不太习惯。于是就想到手头的高配android,完全可以当做第二块屏。
原理
当我修改*.html/*.css/*.js
时,按下Ctrl + S
的瞬间,文件监控就捕捉到了这个变动,于是执行adb命令,向android发送浏览器请求,打开本机localhost。
方法
文件监控:node.js fswatch
网上扫了一眼监控程序,没有自己想要的。看了手头现有的python、node.js,网上给的python代码好怪异,还是使用node.js,最初想的是把网页服务器与监控模块写到一个文件中,后来试了试,没搞定,就单独写了。
watch.js
'use strict';
var exec = require('child_process').exec;
var fs = require('fs');
var count = 0;
var time = 0;
var phoneScreenTime = 30;
//手机暗屏的时间,我的是30秒。后面要根据这个加点亮屏幕的判断
var id, cmd;
setInterval(function() {
time++;
}, 1000)
//每秒自增的time,为每次发生更改时,执行操作的间隔,用来判断手机是否黑屏的依据
fs.watch('./resume/', { persistent: true, recursive: true }, function(event, filename) {
//recursive参数作用是fs.watch的监控子目录,不支持linux系统
//./resume/ 是我监控的文件目录
count++;
if (filename && count == 2) {
//此处count==2的意味为,只执行一次操作。
//因为nodepad++修改文件后保存,是先删除文件所有内容,再保存修改后的内容,相当于更改了两次文件的状态。(不晓得为什么)
if (time <= phoneScreenTime) {
cmd = '1.cmd';
} else {
cmd = 'screen.cmd';
}
//exec只能call,我贴上完整的命令会报错,不知道为什么
exec('call ' + cmd, function(error, stdout, stderr) {
if (error !== null) {
console.log('exec error: ' + error);
}
});
//清除时间、文件二次更改
count = 0;
time = 0;
}
});
console.log('watcher is running');
控制android打开指定网页:cmd + adb
两个watch.js调用的cmd
1.cmd
不包含点亮屏幕的命令,只有浏览器访问localhost
@echo off
F:\Users\liu\Downloads\adb.exe shell am start -a android.intent.action.VIEW -d http://192.168.1.100/resume/index.html
"F:\Program Files\Google\Chrome\Application\chrome.exe" http://192.168.1.100/resume/index.html
screen.cmd
@echo off
F:\Users\liu\Downloads\adb.exe shell input keyevent 82
F:\Users\liu\Downloads\adb.exe shell am start -a android.intent.action.VIEW -d http://192.168.1.100/resume/index.html
"F:\Program Files\Google\Chrome\Application\chrome.exe" http://192.168.1.100/resume/index.html
通过adb执行命令需要注意的是,手机要与电脑用USB连接好,在同一网络内(WIFI ?)(安装USB驱动,开启调试模式,与电脑连接调试好,手机无需ROOT)。
完成
配置好上面的内容。开启node watch.js,修改保存你的html,等待手机响应。
不出意外,应该有如图效果。
当然,你可以随意配置cmd内容,如不使用android,只需要PC随即预览,可将cmd内容改为
@echo off
"F:\Program Files\Google\Chrome\Application\chrome.exe" http://192.168.1.100/resume/index.html
如图
也可不使用cmd进行操作,你当然可以使用python或exe来实现不同响应方式。
其他
这只是一个简易的原理实现方法,可以进行更多的方案优化。
在看adb的相关网页时,我还看到使用adb直接屏幕录像的内容,这让我想到Chrome控制手机插件Vysor的实现原理应该也不复杂,它应该也是通过adb调试进行的,因为刚开始因为Vysor的驱动,我adb连接不上手机,误使我以为非root无法使用adb。这方面的内容以后有机会了可以深入研究。
总结:网络上的内容有很多不准确,比如fs.watch这块,百度上说什么原生模块不支持子文件监控,为此我还费劲写了好几个文件夹的监控。我看了官方文档才知道,加个参数就行了。有什么问题,还是以文档为主,切莫轻易看了网上几句话就否决一种想法。
更多推荐
手机+PC双屏显示:android端即时预览PC端修改的代码
发布评论