浏览器加载项目流程（通过浏览器工作台启动本地项目）
浏览器加载项目流程（通过浏览器工作台启动本地项目）const express = require('express'); const app = express(); const fs = require('fs'); const path = require('path'); app.use('/*' (req res) => { let indexHtml = fs.readFileSync(path.j oin(__dirname './index.html')); res.set('Content-Type' 'text/html'); res.send(indexHtml); }) const server = app.list
一直对通过浏览器工作台启动本地项目感兴趣，类似 vue-cli3 中提供的 vue ui，在浏览器中打开工作台，就能够创建、启动、停止、打包、部署你的项目，很好奇这一系列背后的实现原理。
最近在用 umijs 写项目，就顺便看了它提供的 cli 工具，并解开了自己的疑问。正好自己项目中也要实现类似的功能，明白了原理，只需要再完善打磨就好了。
体验工作台的功能，自己会猜测对应功能的实现方式，换做是我的话，我大致会如何去写。带着自己的疑问去看别人写的源码，在这个过程中验证自己的猜测，去学习别人处理的技巧。
本文会删繁就简的实现启动项目这个功能来说明工作台的工作原理，对于边界和异常情况没有做过多处理，要投入使用中，可以做进一步的改进。
关键点
- 启动服务，访问可视化工作台 UI 界面
- 通过工作台，执行本地项目指定的命令
- 将执行命令的数据主动推送到客户端显示
细化：
第一点，在本地启动一个服务，能够访问到页面，选择使用 node 的框架express 完成，统一返回 index.html 页面。界面可以使用任意框架来做，选择Vue、react 甚至 jQuery 都可以。
第二点，在界面中完成一个交互，像点击 启动 按钮，后端要去指定的目录下，执行启动项目的命令，例如 Vue-cli3 构建的项目，需要用 npm run serve 来启动本地服务，就需要能够执行 shell 命令，使用 node 提供的 child_process模块完成。
第三点，执行命令时打印的信息，原本如果用系统的终端，就可以在终端打印出来，用到浏览器端 UI 界面来执行命令，要跟在终端中一样，需要把信息打印在页面中。执行的任务有些时间比较长，并且在执行过程中会有异步情况。如果用http 接口请求的方式，把服务端的信息发送给客户端，客户端需要去轮询接口，直到确定命令执行完成停止，这样会带来不少开销。选择 webSocket 在浏览器和服务器之间建立全双工的通信通道，服务端接收浏览器的命令，服务端主动推送数据到客户端。这里选择使用 sockjs 模块完成。
启动服务
const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');
app.use('/*' (req res) => {
let indexHtml = fs.readFileSync(path.j
oin(__dirname './index.html'));
res.set('Content-Type' 'text/html');
res.send(indexHtml);
})
const server = app.listen(3002 '0.0.0.0' ()=> {
console.log('服务启动');})
这段代码比较简单，起一个服务，返回 html 文档 打开浏览器，访问http://localhost:3002/ 即可。
创建通信通道
安装模块 npm i sockjs 并使用：
const sockjs = require('sockjs');
const ss = sockjs.createServer(); // 创建 sock 服务
// ... 省略上面的 express 代码
let conns = {}; // 存入连接实例
// 监听有客户端连接
ss.on('connection' (conn) => {
console.log('conn: ' conn.id);
console.log('有访问来了');
conns[conn.id] = conn; // 缓存本次访问者，可以在别处也能发送信息
// 向客户端发送数据
conn.write(JSON.stringify({message: '来了老弟'}))
;// 监控客户端发送的数据
conn.on('data' (messsage) => {
console.log('拿到数据' messsage);
})
// 客户端断开连接
conn.on('close' () => {
console.log('离开了 ');
delete conns[conn.id];
})
})
// 将sockjs服务挂载到http服务上
ss.installHandlers(server {
prefix: '/test'
log: () => {}
});
以上启动一个 sock 服务，和 express 启动的服务做了连接， 并设置了访问的前缀为/test， 这就可以在页面中通过 sockjs-client 访问到这个服务，访问的地址为http://localhost:3002/test。
事件 connection 监听有客户端成功连接，每次连接都会触发回调函数，回调中接收一个连接实例（Connection instance）。例子中用变量 conn 来接收。
连接实例下的事件 data，监听客户端发送的数据，消息是unicode字符串。所以如果用对象，需要 JSON.parse 解析。
连接实例下的事件 close，当客户端断开连接时触发。
连接实例下的方法 write()，向客户端发送数据。如果要发送对象，则先用 JSON.stringify 转成字符串。
具体可以参考https://github.com/sockjs/sockjs-node
以上用 conns 通过 id 缓存访问的实例实例，目的是可以封装一个通用的发送数据的方法，可以在任意需要的地方调用，让客户端都可以接收到，这个到后面会有用处。
index.html 中的代码实现：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>测试在浏览器中启动本地服务</title>
<linkrel="stylesheet"href="https://gw.alipayobjects.com/os/lib/xterm/3.14.5/dist/xterm.css">
<scriptsrc="https://gw.alipayobjects.com/os/lib/xterm/3.14.5/dist/xterm.js"></script>
<scriptsrc="https://cdn.jsdelivr.net/npm/sockjs-client@1.4.0/dist/sockjs.min.js"></script>
</head>
<body>
<script>
// 向浏览器写入打印信息
let term = newTerminal();
term.write('打印信息：\r\n');
term.open(document.getElementById('terminal'));
// 连接 webSocket 服务
var sock = newSockJS('http://localhost:3002/test');
// 初次连接成功后触发的事件
sock.onopen = function() {
sock.send(JSON.stringify({type: 'init' message: '成功连接'}));
};
// 接收服务器发送的消息
sock.onmessage = function(message){
console.log('message: ' message);
}
</script>
</body>
</html>
引入了 xterm.js 工具，把接收的消息打印在页面中。
引入 sockjs-client 文件，使用其中提供的方法，方便和服务端交互。
new SockJS 传入 sock 连接的 url 地址，与服务器建立通信通道。
onopen 和服务端连接成功后触发的事件
onmessage 当接收来自服务端的消息时触发
send() 方法 向服务端发送数据。
服务端和客户端建立 webSocket 通道后，就可以通信了。
这个例子是在初次加载页面就连接 webSocket 服务端，也可以在需要的时候再进行连接。
在这个过程中区分要做的不同的事情，可以在数据中自定义一些 type 类型，例如：
{type: 'task/init' message: '初始化服务'} 初始服务 {type: 'task/run' message: '启动服务'} 启动一个项目服务 {type: 'task/close' message: '停止服务'} 停止一个项目服务
服务端和客户端可以根据不同的 type 类型，做不同的事情。
服务端：
conn.on('data' (messsage) => {
// 解析为对象
const data = JSON.parse(messsage);
switch(data.type){
case'task/init':
// 初始服务
break;
case'task/run':
// 启动一个项目服务
break;
case'task/cancel':
// 停止一个项目服务
break;
}
})
客户端：
sock.send(JSON.stringify({type: 'task/init' message: '初始服务'}));
sock.send(JSON.stringify({type: 'task/run' message: '启动一个项目服务'}));
sock.send(JSON.stringify({type: 'task/cancel' message: '停止一个项目服务'}));
执行 shell 命令
使用 Node 内置模块 child_process 提供的 spawn 方法执行指定的命令，这个方法可以衍生一个新的子进程，不阻塞主进程的执行。
新建 runCommand.js
let{ spawn } = require('child_process');
// 封装可执行命令的方法。
function runCommand(script options={}){
options.env = {
...process.env
...options.env
}
options.cwd = options.cwd || process.cwd();
// 设置衍生的子进程与主进程通信方式
options.stdio = ['pipe' 'pipe' 'pipe' 'ipc'];
let sh = 'sh' shFlag = '-c';
return spawn(sh [shFlag script] options)
}
// 使用
runCommand('node test.js' {
cwd: "/users/node_files/"
env: {
ENV_TEST: '测试数据'
}
});
在目录 /users/test/node_files/（此目录由自己设定）， 新建 test.js：
//用 console.log 向终端输出内容
console.log(111);
console.log('获取自定义环境变量数据' process.env.ENV_TEST);
// 子进程向父进程发送数据
process.send('我是子进程发出的数据')
上面封装了一个通用执行命令的函数，接受两个参数：
- scripts 要执行的命令
- options 执行命令时额外设置
- 通过 cwd 设置执行命令的目录，省略取 Process.cwd() 目录
- 通过 env 设置一些项目中使用的环境变量，默认设置主进程的 process.env 。
- 其他要设置的参数，可参考 spawn 的文档
打开终端，此时运行 node runCommand.js，会发现运行后终端没有任何输出。明明有console.log，为什么没有输出呢？
这就需要简单了解下 stdio（标准输入输出）。
stdio（标准输入输出）
spawn 方法执行命令会新打开一个子进程，test.js 就在这个子进程中运行。如果关心子进程内部的输出，需要设置子进程与主进程通信的管道。通过设置参数的 stdio ，可以将子进程的 stdio 绑定到不同的地方。
可以给 stdio 设置数组
stdio : [输入设置 stdin 输出设置 stdout 错误输出 stdrr [其他通信方式]]
举例:
const fd = require("fs").openSync("./node.log" "w ");
child_process.spawn("node" ["-c" "test.js"] {
// 把子进程的输出和错误存在 node.log 这个文件中
stdio: [process.stdin fd fd]
});
以上这个例子，是把运行 test.js，输出的结果和错误信息打印在 node.log中。
如果设置 stdio 为 ['pipe' 'pipe' 'pipe']，子进程的 stdio 与父进程的 stdio通过管道连接起来。此时通过监听子进程输出（stdout）事件，来获取子进程的输出流数据。
// 创建子进程，执行命令
const ipc = runCommand('node test.js' {
env: {
ENV_TEST: '测试数据'
}
});
// 接收子进程的输出数据，例如 console.log 的输出
ipc.stdout.on('data' log => {
console.log(log.toString());
});
// 当子进程执行结束时触发
ipc.stdout.on('close' log => {
console.log('结束了');
});
// 当主程序结束时，无论子程序是否执行完毕，都kill掉
process.on('exit' () => {
console.log('主线程退出');
ipc.kill('SIGTERM'); // 终止子进程
});
以上运行 node runCommand.js，就可以在终端打印出 test.js 输出的内容。监听了ipc.stdout 的 data 事件，有数据输出就触发了。
但是，运行后，在终端并没有看到 test.js 中 我是子进程发出的数据，这句话。用的是process.send 发送的，这是要和主进程进行通信。那就需要额外的ipc（进程间通信），设置 stdio 为 ['pipe' 'pipe' 'pipe' 'ipc']，此时要监听子进程 process.send 发送的数据，需要监听 message 事件。
ipc.on('message' function(message){
console.log('message: ' message);
})
此时再运行 node runCommand.js，就可以在终端打印出所有数据了。
以上设置的 stdio，无论是 console.log 这种在进程中输出流的形式，或者是process.send 这种与主进程通信的形式，都可以拿到数据。
以上只是简略的说了下 stdio的一种设置方式，详细可以参考https://cnodejs.org/topic/5aa0e25a19b2e3db18959bee。
代码整合
回顾之前抛出的关键点：
- 启动服务，访问可视化工作台 UI 界面（已完成）
- 通过工作台，执行本地项目指定的命令（待整合）
- 将执行命令的数据主动推送到客户端显示（已完成）
通过上面对每一个点的单独实现，基本解决了上述问题，这时就需要将零散的代码整合起来，来实现一个相对完善的功能。
首先新建一个 taskManger.js，用来创建子进程执行命令，并将子进程输出的数据通知给调用方。
let{ spawn } = require('child_process');
let{EventEmitter} = require('events');
// 继承有 on emit 的方法
classTaskMangerextendsEventEmitter{
constructor(){
super();
}
// 初始调用，接收发送数据的方法
init(send){
// 监听 自定义事件
this.on('std-out-message' (message) => {
send({
type: 'task.log'
payload: {
log: message
}
});
}
)}
// 通用的执行命令函数
runCommand(script options={}){
options.env = {
...process.env
...options.env
}
options.cwd = options.cwd || process.cwd();
options.stdio = ['pipe' 'pipe' 'pipe' 'ipc'];
let sh = 'sh' shFlag = '-c';
return spawn(sh [shFlag script] options)}
// 开始任务
async run(script options){
this.ipc = awaitthis.runCommand(script options);
this.processHandler(this.ipc);
}
// 取消任务
cancel(){
this.ipc.kill('SIGTERM');
}
// 接收创建的子进程
processHandler(ipc){
// 子进程 **process.send** 发送的数据
ipc.on('message' (message) => {this.emit('std-out-message' message);
});
// 接收子进程的输出数据，例如 console.log 的输出
ipc.stdout.setEncoding('utf8');
ipc.stdout.on('data' log => {
this.emit('std-out-message' log);
});
// 当子进程执行结束时触发
ipc.stdout.on('close' log => {
console.log('结束了' log);
this.emit('std-out-message' '服务停止');
});
// 当主程序结束时，无论子程序是否执行完毕，都kill掉
process.on('exit' () => {
console.log('主线程退出');
ipc.kill('SIGTERM');// 终止进程
});
}}
module.exports = TaskManger;
以上在使用时调用 init()初始化接收一个将来发送给 socket 的方法（下面会有使用示例）。run() 方法接收命令并创建子进程执行，执行过程数据通过在定义事件 std-out-message，通知给监听方。进而调用方法通知 socket。
新建一个 socket.js 文件来使用:
let express = require('express');
let app = express();
let fs = require('fs');
let path = require('path');
letTaskManger= require('./taskManger');
let sockjs = require('sockjs');
const ss = sockjs.createServer();
app.use('/*' (req res) => {
let indexHtml = fs.readFileSync(path.join(__dirname './index.html'));
res.set('Content-Type' 'text/html');
res.send(indexHtml.toString());
})
const server = app.listen(3002 ()=> {
console.log('服务启动');
})
const task = newTaskManger();
// 发送给 访问者。
const send = (payload) => {
const message = JSON.stringify(payload);
Object.keys(conns).forEach(id => {
conns[id].write(message);
});
}
let conns = {};
ss.on('connection' (conn) => {
conns[conn.id] = conn;
conn.on('data' async(data) => {
const datas = JSON.parse(data);
switch(datas.type){
case'task/init': // 初始服务
task.init(send);
break;
case'task/run': // 启动一个项目服务
task.run('npm run serve' {
cwd: `/Users/test/vue-cli3-project`// cwd可以设置为你本地的vue-cli3创建的项目目录地址
});
break;
case'task/cancel':
// 停止一个项目服务
task.cancel()
break;
}
})
conn.on('close' () => {
delete conns[conn.id];
})
})
ss.installHandlers(
server {
prefix: '/test'
log: () => {}
});
以上通过自定义的 type 来区分不同的命令。cwd 目录路径，设置为你本地的vue-cli3 创建的项目目录地址，或者其他项目，并传入正确的启动命令即可。
index.html 完整代码：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>测试在浏览器中启动本地服务</title>
<linkrel="stylesheet"href="https://gw.alipayobjects.com/os/lib/xterm/3.14.5/dist/xterm.css">
<scriptsrc="https://gw.alipayobjects.com/os/lib/xterm/3.14.5/dist/xterm.js"></script>
<scriptsrc="https://cdn.jsdelivr.net/npm/sockjs-client@1.4.0/dist/sockjs.min.js"></script>
</head>
<body>
<buttonid="button">启动应用</button>
<buttonid="cancel">停止应用</button>
<divid="terminal"></div>
<script>
let term = newTerminal();
term.write('打印信息：\r\n');
term.open(document.getElementById('terminal'));
var sock = newSockJS('http://localhost:3002/test');
// 连接成功触发
sock.onopen = function() {
console.log('open');
// 初始化任务
let data = {
type: 'task/init'
}
sock.send(JSON.stringify(data));
};
// 后端推送过来的数据触发
sock.onmessage = function(message){
console.log('message: ' message);
const data = JSON.parse(message.data);
let str = data.payload.log.replace(/\n/g '\r\n');
// 将打印信息写在页面上
term.write(str);
}
// 启动项目服务
button.onclick = function(){
const task = {
type: 'task/run'
}
sock.send(JSON.stringify(task));
}
// 取消项目服务
cancel.onclick = function(){
const task = {
type: 'task/cancel'
}
sock.send(JSON.stringify(task));
}
</script>
</body>
</html>
总结
通过上述例子，关键点其实是两点，执行命令和建立 Socket 服务，如果对nodejs 的 API熟悉的话，很快就能完成这一功能。
