xterm.js⽤法先看样式：
1、安装依赖包，注意版本：
2、代码部分：
<template>
<div>
<div id="xterm" class="xterm"/>
</div>
</template>
<script>
import {Terminal} from 'xterm'
import {FitAddon} from 'xterm-addon-fit'
import {AttachAddon} from 'xterm-addon-attach'
let socket = null;
export default {
name: "RttyImplement",
props: {
},
data() {
return {
id: ''
}
websocket和socket},
computed: {
url(){
return 'ws://'+window.location.host + '/api/v1/ws?dev_id='+this.id;
}
},
mounted() {
this.id = this.$route.query.id;
this.initSocket()
},
beforeDestroy() {
socket.close()
// dispose()
},
methods: {
initTerm() {
const term = new Terminal({
allowProposedApi: true,
fontSize: 14,
fontSize: 14,
cursorBlink: true,
disableStdin: false,
LogLevel: 'debug'
})
term.ElementById('xterm'))
const attachAddon = new AttachAddon(socket)
const fitAddon = new FitAddon()
term.loadAddon(attachAddon)
term.loadAddon(fitAddon)
fitAddon.fit()
term.focus()
< = term
},
initSocket() {
socket = new WebSocket(this.url);
console.log(socket)
this.socketOnClose()
this.socketOnOpen()
this.socketOnError()
},
socketOnOpen() {
// 链接成功后
console.log("--------------open socket-------------")                    this.initTerm()
}
},
socketOnClose() {
console.log('close socket')
this.$router.push({path: '/'})
}
},
socketOnError() {
console.log('socket 链接失败')
}
}
}
}
</script>
<style scoped>
.xterm {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
通过websocket建⽴连接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。