xterm.js 基於websocket 連接容器 命令行工具

<template>
<div>

<el-dialog title="命令" :visible.sync="dialogTableVisible" v-loading="loading">

<el-row class="box-row"  style="width:780px;  ">
  
  <el-card class="box-card" style="width:580px;  background:#F5F5F5;height:400px;overflow-x:scroll;overflow-y:scroll; font-size:12px" >
      <div id="terminal"></div>
  </el-card>

  </el-row>

</el-dialog>

</div>
</template>
<script>
import { exec_socket } from '@/api/paasApi'
import "xterm/dist/xterm.css"
import { Terminal } from 'xterm';
//import {terminal}from 'terminal-kit'

  export default {
    name: 'terminal',
    
    data() {
      return {       
        dialogTableVisible: false,
        dialogFormVisible: false,     
        formLabelWidth: '120px',
        serviceid:null,
        loading:false,      
        loginfo:'',  
      };
    },
    methods:{
       terminal(id){

              exec_socket(id).then(response=>{
                    let linkpath=response.url+'?token='+response.token
                    this.socket(linkpath)
                    console.log('linkpath',linkpath)
              },function(err){

              })
       
       },
       socket(linkpath){
              let ws = new WebSocket(linkpath);
              var   that=this
              var xterm = new Terminal({
                  cols: 100,
                  rows: 20,
                  cursorBlink: 5,
                  scrollback: 30,
                  tabStopWidth: 4
              });  // Instantiate the terminal
               xterm.open(document.getElementById('terminal'));
              // xterm.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
               //xterm.attach(ws); 

               //xterm.fit();
              
              ws.onerror = function () { showErrorMessage('connect error.') };
              ws.onmessage = function(event) {
                  console.log('on message:',that.decodeBase64Content(event.data))

                  xterm.write(that.decodeBase64Content(event.data));
              };
              ws.onopen = function () { 
                console.log('ws onopen ')
                 
               }
            
               console.log(xterm.element.classList);

               // Log the keyCode of every keyDown event
              xterm.textarea.onkeydown = function (e) {
                console.log('User pressed key with keyCode: ', e.keyCode);
                //console.log('編碼',)
                //ws.send(that.encodeBase64Content(e.keyCode.toString()));
                //ws.send('bHM=');
              }

              xterm.attachCustomKeyEventHandler(function (e) {
                if (e.keyCode == 13) {
                  console.log('enter')                  
                   ws.send('DQ==')                
                  return false;
                }
              });
              xterm.on('data',function(data){
                 console.log('data xterm=>',data)
                 //xterm.write(data);
                 ws.send(that.encodeBase64Content(data.toString()))
              })

              xterm.on('output', arrayBuffer => {
                console.log('output===',arrayBuffer)
                xterm.write(arrayBuffer);
              });

              xterm.on('blur', arrayBuffer => {
                console.log('blur===',arrayBuffer)
                xterm.write(arrayBuffer);
              });

              xterm.on('focus', arrayBuffer => {
                console.log('focus===',arrayBuffer)
                xterm.write(arrayBuffer);
              });

            /*  xterm.on('key', arrayBuffer => {
                console.log('key===',arrayBuffer)
                xterm.write(arrayBuffer);
              });*/
              xterm.on('keydown', arrayBuffer => {
                console.log('keydown===',arrayBuffer)
                xterm.write(arrayBuffer);
              });
          

                xterm.on('lineFeed', arrayBuffer => {
                console.log('lineFeed===',arrayBuffer)
                xterm.write(arrayBuffer);
              });

              xterm.on('resize', size => {
                ws.send('resize', [size.cols, size.rows]);
                console.log('resize', [size.cols, size.rows]);
              })

              //xterm.on('data', data => socket.emit('input', data));
       },
      decodeBase64Content(base64Content) {
        // base64 解碼
        let commonContent = base64Content.replace(/\s/g, '+');
        commonContent = Buffer.from(commonContent, 'base64').toString();
        return commonContent;
      },
      encodeBase64Content(commonContent) {
        // base64 編碼
        let base64Content = Buffer.from(commonContent).toString('base64');
        return base64Content;
      },

    },
    created(){
     
      
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .marin{
    margin: 4px;
  }

  .padding-left10{
    padding-left: 10px;
  }

</style>