手机+PC双屏显示：android端即时预览PC端修改的代码

前言

如何让手机充当第二个显示器，用来随时预览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[/code] 
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[/code] 
通过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[/code] 
如图



也可不使用cmd进行操作，你当然可以使用python或exe来实现不同响应方式。

其他
这只是一个简易的原理实现方法，可以进行更多的方案优化。

在看adb的相关网页时，我还看到使用adb直接屏幕录像的内容，这让我想到Chrome控制手机插件Vysor的实现原理应该也不复杂，它应该也是通过adb调试进行的，因为刚开始因为Vysor的驱动，我adb连接不上手机，误使我以为非root无法使用adb。这方面的内容以后有机会了可以深入研究。

总结：网络上的内容有很多不准确，比如fs.watch这块，百度上说什么原生模块不支持子文件监控，为此我还费劲写了好几个文件夹的监控。我看了官方文档才知道，加个参数就行了。有什么问题，还是以文档为主，切莫轻易看了网上几句话就否决一种想法。