vue xterm4.x自定义请求报文

 
<script>
    import 'xterm/css/xterm.css'
    import { Terminal } from 'xterm'
    import { FitAddon } from 'xterm-addon-fit'
    import { AttachAddon } from 'xterm-addon-attach'
    import {getShellUrl,getShellSessionId,fetchBusiPodList,getShellInfo} from '@/api/iresource/workplatform'
    import { getToken,get } from '@/utils/auth'
 
 
    export default {
        name: 'Xterm',
        props: {
            taskId:String,
            taskName:String
        },
        data () {
            return {
                serverId:"",
                listQuery: {
                    busiId: this.taskId,
                    busiType: "WorkPlatform",
                    oneself: 1,
                    pageNum: 1,
                    pageSize: 50
                },
                list: null,
                total: null,
                totalPage: null,
                pageSize: null,
            }
        },
        created() {
            console.log("-----shell created-------");
 
            // this.getUrl()
            this.getList(); //取参数,请求shell
        },
        // mounted() {
        //     console.log("-----shell mounted-------");
        //     // this.getShellUrlShow();
        //
        //
        // },
        beforeDestroy() {
            this.socket.close()
            this.term.dispose()
        },
        methods: {
                async getList() {
                    // this.listLoading = true;
                    console.log(this.listQuery)
                    fetchBusiPodList(this.listQuery).then(response => {
                        this.listLoading = false;
                        console.log("response.data111");
                        console.log(response.data);
                        this.list = response.data.items;
                        // this.list = response.data;
                        this.total = response.data.total;
                        this.totalPage = response.data.totalPages;
                        this.pageSize = response.data.pageSize;
 
                        this.showContent();
                    });
                },
 
                async showContent(){
                    console.log("showContent");
                    console.log(this.list);
                    let item  = this.list[0]
                    console.log(item);
                    console.log("item.busiID");
                    console.log(item.busiID);
 
                    getShellInfo(item.busiID).then(response => {
                        console.log("getShellInfo");
                        console.log(response.data);
                        let item = response.data[0];
                        this.serverId = response.data.id;
                        // this.initWebSocket();
 
                         
                        //测试2                   
                        // let url = "ws://192.168.3.32:32103/iresource/terminal/ws/"+item.namespace+"/"+item.podName+"/"+item.container+"/webshell"
                        let url = "wss://"+document.location.host+"/shell/iresource/terminal/ws/"+item.namespace+"/"+item.podName+"/"+item.container+"/webshell"
                        console.log(url);
 
 
                        //测试3,ok
                        // let url ="ws://127.0.0.1:4001"
                        this.initSocket(url);
                    });
 
            },
 
 
            initSocket(url) {
 
 
                const term = new Terminal({
                    fontSize: 14,
                    cursorBlink: true,
                    width:'100%',
                    height:'100%',
                });
                console.log("term");
                console.log(term);
                // const attachAddon = new AttachAddon(conn);
                const fitAddon = new FitAddon();
                // term.loadAddon(attachAddon);
                term.loadAddon(fitAddon);
                term.open(document.getElementById('xterm'));
                // let podName ="cdida9f1ilrqc9buiesg-0";
                // term.write("connecting to pod "+ podName + "...")
                fitAddon.fit();
 
 
 
 
                term.onData( function (data) {
                // term.onData('data', function (data) {
                    console.log("onData");
                    console.log(data);
                    let msg = {operation: "stdin", data: data}
                    conn.send(JSON.stringify(msg))
                });
 
                term.onResize( function (size) {
                // term.onData('resize', function (size) {
                    console.log("resize: " + size)
                    let msg = {operation: "resize", cols: size.cols, rows: rows}
                    conn.send(JSON.stringify(msg))
                });
 
 
                // term.focus();
                // this.term = term
 
 
                let conn =  new WebSocket(url);
                conn.onopen = function(e) {
                    term.write("\r");
                    let msg = {operation: "stdin", data: "export TERM=xterm && clear \r"}
                    conn.send(JSON.stringify(msg))
                    // term.clear()
                };
                conn.onmessage = function(event) {
                    let msg = JSON.parse(event.data)
                    if (msg.operation === "stdout") {
                        term.write(msg.data)
                    } else {
                        console.log("invalid msg operation: "+msg)
                    }
                };
                conn.onclose = function(event) {
                    if (event.wasClean) {
                        console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
                    } else {
                        console.log('[close] Connection died');
                        term.writeln("")
                    }
                    term.write('Connection Reset By Peer! Try Refresh.');
                };
                conn.onerror = function(error) {
                    console.log('[error] Connection error');
                    term.write("error: "+error.message);
                    term.destroy();
                };
 
            },
 
        }
    }
script>

服务端做了发布：http或https的端口，然后在请求头上增加安全token，接着再转中请求; 

全屏满屏处理：
xterm 3.x:
 term.toggleFullScreen(); //全屏 （未测试）

xterm 4.x:

  setTimeout(() => { //延时满屏
      this.fitAddon.fit()
    }, 60) // 而且不能是0 ,xterm 生成时间在2ms左右

错误：Vue中 xterm4.x报Uncaught TypeError: r[i].call is not a function

是没有增加term.onData方法；

term.onData( function (data) {
// term.onData('data', function (data) {
    console.log("onData");
    console.log(data);
    let msg = {operation: "stdin", data: data}
    conn.send(JSON.stringify(msg))
});

参考：

xterm.js + vue + websocket实现终端功能（xterm 3.x+xterm 4.x）_仙女爱吃鱼的博客-CSDN博客_xterm.js xterm.js + vue + websocket实现终端功能（xterm 3.x+xterm 4.x）

xterm.js 基于websocket 链接容器 命令行工具

通过浏览器连接docker容器_普通网友的博客-CSDN博客_浏览器连接docker 通过浏览器连接docker容器

vue xterm.js命令行使用及问题解决_潇蓝诺依的博客-CSDN博客_xtermjs vue xterm.js命令行使用及问题解决

https://blog.csdn.net/wbdisb/article/details/124278817
Vue父组件调用子组件的方法
https://blog.csdn.net/qq_31126175/article/details/121608015
xterm.js 使用及问题【新】