当前位置：首页 > 笔记 > node.js > [原创] koa2(nodejs)+vue3+xtermjs打造一个前端终端

[原创] koa2(nodejs)+vue3+xtermjs打造一个前端终端

🐥🐥🐥🐥🐥🐥🐥2年前 (2022-09-22)node.js608

> 我自己想要搭建一个线上终端，找了很多帖子，借鉴了他们的思路和代码。
[简书-嘻哈章鱼小丸子](https://www.jianshu.com/p/c53d5692b256?u_atoken=06f1bc3a-1165-4d4e-a08d-6acf0e1b63fa&u_asession=01nZ6Dt-4-nyPrTu-KYzPnlPUA8fIpkorwYA5dicQTnNb9bMAMPHl3aLtno5UI62EqX0KNBwm7Lovlpxjd_P_q4JsKWYrT3W_NKPr8w6oU7K8FOpO5ojg4Z6HslkntJPXUhVaMhQoQvxDmSarRnKyUVWBkFo3NEHBv0PZUm6pbxQU&u_asig=05vlpdZ2zPRTqXc7gG5tpHHnlby5KXZqTLow93pa6HRAVUi4MatkZK-OVSxtKJegf2ek5GPi6BGoDQrs4CeoKX3kBU-skSpMtbzIXgb6dJrciYC3_52hcJns1lK9Pr4JlUzRI-4VRb3-E0ePk2ehlOtGC0_gHUvfajGn60udXogIj9JS7q8ZD7Xtz2Ly-b0kmuyAKRFSVJkkdwVUnyHAIJzZYLK6oRde-A0JJuCU7LP_BcwZQKObVs-sfMR8IphkRfCNkNfzbmXGypMDlqpKRYAO3h9VXwMyh6PgyDIVSG1W8H6IpP69Omeye2Zhi2_H0n9oGHzFA7K8dANOlw0Q940nOgmsLCeCNxco8vwYUwVimMTqe4fU-QvjV1h3CNPvc4mWspDxyAEEo4kbsryBKb9Q&u_aref=Ba%2FFjjFiNS9zhlGrm0hrWmx97ic%3D "简书-嘻哈章鱼小丸子")
[掘金-红果汁](https://juejin.cn/post/6918911964009725959 "掘金")

## 前端
### 引入包
```shell
npm install xterm
```
### 前端代码
```html
<template>
	<div v-loading="loading" ref="terminal" element-loading-text="拼命连接中"></div>
</template>
<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		watch
	} from "vue";
	import {
		debounce
	} from 'lodash'
	import {
		Terminal
	} from "xterm";
	import {
		FitAddon
	} from "xterm-addon-fit";
	import "xterm/css/xterm.css";

const terminal = ref(null);
	const props = defineProps({
		terminalDetail: Object,
		type: String
	});
	const fitAddon = new FitAddon();

let first = ref(true);
	let loading = ref(true);
	let terminalSocket = ref(null);
	let term = ref(null);

const runRealTerminal = () => {
		loading.value = false;
	}

const onWSReceive = (message) => {
		// 首次接收消息,发送给后端，进行同步适配
		if (first.value === true) {
			first.value = false;
			resizeRemoteTerminal();
		}
		const data = message.data;
		term.value.element && term.value.focus()
		term.value.write(data)
	}

}
	const initTerm = () => {
		term.value = new Terminal({
			rendererType: "canvas", //渲染类型
			rows: 30, //行数
			cols: 80, // 不指定行数，自动回车后光标从下一行开始
			convertEol: true, //启用时，光标将设置为下一行的开头
			// scrollback: 50, //终端中的回滚量
			disableStdin: false, //是否应禁用输入
			// cursorStyle: "underline", //光标样式
			cursorBlink: true, //光标闪烁
			theme: {
				foreground: "#ECECEC", //字体
				background: "#000000", //背景色
				cursor: "help", //设置光标
				lineHeight: 20
			}
		});
		term.value.open(terminal.value);
		term.value.loadAddon(fitAddon);
		// 不能初始化的时候fit,需要等terminal准备就绪,可以设置延时操作
		setTimeout(() => {
			fitAddon.fit();
		}, 5)
	}
	// 是否连接中0 1 2 3 
	const isWsOpen = () => {
		const readyState = terminalSocket.value && terminalSocket.value.readyState;
		return readyState === 1
	}
	const fitTerm = () => {
		fitAddon.fit();
	}
	const onResize = debounce(() => fitTerm(), 800);

const termData = () => {
		// 输入与粘贴的情况,onData不能重复绑定,不然会发送多次
		term.value.onData(data => {
			console.log(data, isWsOpen());
			if (isWsOpen()) {
				console.log(data, isWsOpen());
				terminalSocket.value.send(
					data
				);
			}
		});

}
	const onTerminalResize = () => {
		window.addEventListener("resize", onResize);
	}
	const removeResizeListener = () => {
		window.removeEventListener("resize", onResize);
	}
	//监听类型变化，重置term
	watch(() => props.type, () => {
		first.value = true;
		loading.value = true;
		terminalSocket.value = null;
		initWS();
		// 重置
		term.value.reset();
	})

onMounted(() => {
		initWS();
		initTerm();
		termData();
		onTerminalResize();
	})
	onBeforeUnmount(() => {
		removeResizeListener();
		terminalSocket.value && terminalSocket.value.close();
	})
</script>
<style lang="scss" scoped>
	#terminal {
		width: 100%;
		height: 100%;
	}
</style>

```

## 后端

### 后端安装的包
首先需要下载koa2-websocket
```shell
npm i koa2-websocket
```
然后记得安装node-pty(必须安装的一个包，这样后端就能处理前端终端键入的指令)
```shell
npm i node-pty
```

### 后端代码

#### 引入koa-websocket
```js
const Koa = require('koa');//koa
const cors = require('koa2-cors')//解决跨域
const ws_router=require('../websocket')//扫描了websocket路由下的所有js文件
const app = websockify(new Koa())
app.ws.use((ctx, next) => {
    return next(ctx)
  })
app.ws.use(ws_router.routes()).use(ws_router.allowedMethods());
```

#### 路由`src/websocket/terminal.route.js`
```js
const Router = require('koa-router')
//中间件
const { firstDemo } = require('../controller/terminal.controller')
const router = new Router({ prefix: '/api/ws' })

router.all('/terminal', firstDemo)

module.exports = router
```

#### 路由配置`src/websocket/index.js`
```js
const fs = require('fs')

const Router = require('koa-router')

const ws_router = new Router()

fs.readdirSync(__dirname).forEach(file => {
    if (file !== 'index.js') {
        let r = require('./' + file)
        ws_router.use(r.routes())
    }
})

module.exports = ws_router
```

#### 控制层`src/controller/terminal.controller.js`
```js
const os = require('os');//nodejs原生的包
const cp = require('shelljs')//运行linux的包 比child-process好使
const pty = require('node-pty');
class TerminalController {
    async firstDemo(ctx) {
	//判断操作系统
        const shell = os.platform() === 'win32' ? 'powershell.exe' : 'bash';
		let term = pty.spawn(shell, ["--login"], {
            name: "xterm-color",
            cols:  80,
            rows:  24,
            cwd: process.env.HOME,
            env: process.env,
        });

term.on("data", function (data) {
            ctx.websocket.send(data);
        });
        ctx.websocket.on('message', data => {
            term.write(data);
        })
        ctx.websocket.on('close', () => {
            term.kill();
        })
    }
}
module.exports = new TerminalController()
```

打赏