NodeJs如何实现浏览器终端

最近要实现一个web终端,调研了几个开源的包,最后选择了Cloud Commander

选择Cloud Commander几个原因:

  • 功能更丰富,支持vim,支持查看多种文件(images, txt, video …),Hot keysTerminal
  • 文档详细。
  • 还在不断的完善,已经更新到v10.3.2

安装

1
npm install cloudcmd -g

因为Cloud CommanderTerminal功能默认是关闭的,如果使用需要安装grittygritty文档

1
npm i gritty -g

安装好之后要配置--terminal--terminal-path

安装中的错误

如果碰到下面两种错误,都是因为权限引起的错误:

解决:

1
2
3
4
npm config set user 0
npm config set unsafe-perm true
npm install cloudcmd -g
npm install gritty -g

简单使用

1
cloudcmd

安装好之后直接运行cloudcmd就会打开一个默认的端口8000,然后访问http://localhost:8000就可以了。

如果要使用terminal功能:

1
2
3
4
5
6
7
#查看gritty的路径
gritty --path
#输出
/usr/local/lib/node_modules/gritty
cloudcmd --terminal --terminal-path /usr/local/lib/node_modules/gritty --save

然后访问http://localhost:8000

关于更多配置使用查看Cloud Commander官方文档
如果只是想实现terminal功能,可以直接安装使用gritty

与Express集成

gritty与Express集成

1
npm i gritty socket.io express --save

创建服务端:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const gritty = require('gritty');
const http = require('http');
const express = require('express');
const io = require('socket.io');
const app = express();
const server = http.createServer(app);
const socket = io.listen(server);
const port = 1337;
app.use(gritty())
app.use(express.static(__dirname));
gritty.listen(socket);
server.listen(port);

页面index.html

1
2
3
4
5
<div class="gritty"></div>
<script src="/gritty/gritty.js"></script>
<script>
gritty('.gritty');
</script>

cloudcmd与Express集成

1
npm i cloudcmd socket.io express --save

创建服务端:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
const http = require('http');
const cloudcmd = require('cloudcmd');
const io = require('socket.io');
const app = require('express')();
const port = 1337;
const prefix = '/cloudcmd';
const server = http.createServer(app);
const socket = io.listen(server, {
path: `${prefix}/socket.io`
});
const config = {
prefix // base URL or function which returns base URL (optional)
};
const plugins = [
__dirname + '/plugin.js'
];
const filePicker = {
data: {
FilePicker: {
key: 'key'
}
}
};
// override option from json/modules.json
const modules = {
filePicker,
};
app.use(cloudcmd({
socket, // used by Config, Edit (optional) and Console (required)
config, // config data (optional)
plugins, // optional
modules, // optional
}));
server.listen(port);