查看: 66523|回复: 43

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

109 主题	115 帖子	6703 积分

Rank: 9 Rank: 9 Rank: 9

发表于 2018-5-8 10:36:05 | 显示全部楼层 |阅读模式

前言

如何让手机充当第二个显示器，用来随时预览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');