index.js 2.75 KB
Newer Older
zhanghaozhe committed
1 2 3 4 5 6 7
import React, { Component } from 'react';
import './index.scss'
import { Terminal } from "xterm"
import 'xterm/css/xterm.css'
import { FitAddon } from "xterm-addon-fit";
import { http } from "@/utils"
import { Toast } from "antd-mobile";
zhanghaozhe committed
8
import axios from 'axios'
zhanghaozhe committed
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 43 44 45 46 47


class TerminalInterface extends Component {
  terminal = null
  termElem = null
  quit = '\u0003'
  socket = null

  state = {
    terminalWidth: '',
  }

  componentDidMount() {

    const content = document.querySelector('.container .content')
    const contentStyles = window.getComputedStyle(content)
    const contentWidth = content.clientWidth
    const contentPaddingLeft = parseFloat(contentStyles.getPropertyValue('padding-left'))
    this.setState({
      terminalWidth: `${contentWidth - contentPaddingLeft}px`,
    })

    this.terminal = new Terminal()
    const fitAddon = new FitAddon()
    this.terminal.loadAddon(fitAddon)
    this.terminal.open(this.termElem)

    const {result, executing} = this.props
    setTimeout(() => {
      fitAddon.fit()
      if (result) {
        this.terminal && this.terminal.write(this.props.result)
      } else if (executing) {
        this.getAuthenticationData()
      }
    })
  }

  getAuthenticationData = () => {
zhanghaozhe committed
48
    axios.post(`http://47.93.119.175:8888/auth`, {
zhanghaozhe committed
49 50 51
      username: '3guh394h3fhj0f4',
      password: 'okqdw029j038hrv3890cv',
    }, {
zhanghaozhe committed
52
      withCredentials: false,
zhanghaozhe committed
53
    }).then(res => {
zhanghaozhe committed
54
      const {code, msg, data} = res.data
zhanghaozhe committed
55 56
      if (code === 0) {
        this.getLinkId(data)
zhanghaozhe committed
57 58 59 60 61 62 63
      } else {
        Toast.fail(msg, 2)
      }
    })
  }

  getLinkId = token => {
zhanghaozhe committed
64
    axios.post(`http://47.93.119.175:8888`, {}, {
zhanghaozhe committed
65 66 67
      headers: {
        Token: token,
      },
zhanghaozhe committed
68
      withCredentials: false,
zhanghaozhe committed
69
    }).then(res => {
zhanghaozhe committed
70 71
      const {id} = res.data
      this.connectServer(id)
zhanghaozhe committed
72 73 74 75 76 77 78 79 80 81 82
    })
  }

  connectServer = (id) => {
    this.socket = new WebSocket(`${API.ws}?id=${id}`)
    this.socket.addEventListener('open', () => {
      this.socket.send(JSON.stringify({
        data: this.props.filename,
      }))
    })
    this.socket.onmessage = event => {
zhanghaozhe committed
83 84 85 86 87
      const reader = new FileReader()
      reader.onload = () => {
        this.terminal.write(this.ab2str(reader.result))
      }
      reader.readAsArrayBuffer(event.data)
zhanghaozhe committed
88
    }
zhanghaozhe committed
89 90
    this.socket.onerror = (event) => {
      console.log(event)
zhanghaozhe committed
91
      // this.connectServer(id)
zhanghaozhe committed
92
    }
zhanghaozhe committed
93
    this.socket.onclose = (event) => {
zhanghaozhe committed
94 95 96 97
      console.log('closed')
    }
  }

zhanghaozhe committed
98 99 100 101
  ab2str = buf => {
    return String.fromCharCode.apply(null, new Uint8Array(buf));
  }

zhanghaozhe committed
102 103 104 105 106 107 108 109 110 111 112
  render() {
    const {terminalWidth} = this.state
    return (
      <div className={'terminal-container'}>
        <div className={'terminal'} ref={el => this.termElem = el} style={{width: `${terminalWidth}`}}></div>
      </div>
    );
  }
}

export default TerminalInterface;