Django Websocket be combined to achieve the WebSSH

What is webssh?

　　Refers to a technique may be implemented in a terminal on the page. Without the need to simulate terminal tools such connection, will the relatively low-level operations also became twisted from architecture architecture such architectures commonly used in the operation and maintenance fort made to develop some other systems, or the relatively new online education by providing a browser can be directly related to the operation or learning to write code that is mainly based client and server instant messaging to students

model

This implementation, and will be achieved by binding to a rear end, the technology needed to stack the following

# Front end 
VUE 
the WebSocket 
xterm.js

# 后端 
django 
dwebsocket (channels)
paramiko 
threading

Technology Introduction　　

　　xterm

　　　　Front-end plug-ins built by xterm window black shell environment, the plugin will automatically parse the command with the results returned by the background markup style paramiko and rendering to the browser, very cool

　　websocket

　　　　Here a bridge for data traffic via the browser with django websocket

　　paramiko

　　　　At this time, assume the role of paramiko to interact with django linux environment, the front end sends the commands sent to the background, the background command is sent to the result is returned to the front end assembly xterm

Front-end implementation

Installation xterm

install [email protected] --save CNPM   // specified version is installed

Xterm introduced in the framework of vue style file

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue'
import App from './App'
import router from './router'
import 'xterm/dist/xterm.css' // 看这里，添加xterm css文件样式
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

main.js

Use xterm command to send real-time and websocket

<template>
  <div class="console" id="terminal"></div>
</template>
<script>
    import { Terminal } from 'xterm'
    import * as attach from 'xterm/lib/addons/attach/attach'
    import * as fit from 'xterm/lib/addons/fit/fit'
  export default {
    name: 'webssh',
    data () {
      return {
        
        term: null,
        terminalSocket: null,
        order:''
      }
    },
    methods: {
      
      
    },
    mounted () {

      //Examples of a websocket, for django lakes and 
      the this .terminalSocket = new new a WebSocket ( "WS: //127.0.0.1: 8000 / Web /" );
       // Get the information returned to the rear end of 
      the this .terminalSocket.onmessage = ( RES) => { 
          the console.log (res.data); 
          // var Message = the JSON.parse (res.data); 
          // the data transmitted back in the xterm 
          the this .term.writeln ( "\ R & lt \ n- "+ res.data);
           // information to be sent to reset 
          the this .order =" "
           // change line, at the beginning of the next display 
          the this .term.write (" \ R & lt \ n-$ " ); 
      } 
    // WS connected when 
    // this.terminalSocket.onopen = function () {
    //      the console.log ( '... Connected WebSocket IS') 
    // } 
    // WS when closed 
    // this.terminalSocket.onclose = function () { 
    //      the console.log ( 'WebSocket Closed ... IS' ) 
    // } 
    // WS error when 
    // this.terminalSocket.onerror = function () { 
    //      the console.log ( 'Broken Damn Websocket iS!') 
    // } 
    // this.term.attach (this.terminalSocket ) 
    // bound to the stream ws}, xterm 
      

      
      the let terminalContainer = document.getElementById ( 'Terminal' )
       // Create instance xterm 
      the this .term = new new Terminal ({
        cursorBlink: to true , // display a cursor 
        cursorStyle: "underline" // cursor style 
        })                      // Create a new Terminal objects 
      
      the this .term.open (terminalContainer)               // to mount the term dom node 

      
      // on xterm displays command-line prompt 
      the this .term.write ( '$' )
       // listen for keyboard events xterm 
      the this .term.on ( 'Key', (Key, ev) => { 
         // Key input characters is keyboard ev event 
        console.log ( "Key ==========" , ev.keyCode);
         the this .term.write (Key) // character to be entered to print to the blackboard 
        if(== 13 is ev.keyCode) { // press enter 
            // the console.log ( "Enter a carriage") 
            // this.term.write ( '$') 
            // the console.log (this.order) 
            
            // webscoket used to transmit data to Django 
            the this .terminalSocket.send ( the this .order)
             // this.order = '' 
            the console.log ( "inside Order", the this .order) 
        } the else  IF (ev.keyCode ==. 8) { // delete button 
          // taken string [0,-lenth. 1] 
          this .order = this .order.substr (0, this .order.length-. 1 ) 

          // Clear command current one 
          this.term.write ( "\ X1B [2K \ R & lt" )
           // simplified new command current display on 
          the this .term.write ( "$" + the this .order) 

          the console.log ( "taken string" + the this .order)
           typeof  the this .order 
        } the else { // the character input each piece together 
        the this .order + = Key 
        the console.log ( "outside Order", the this .order)} 
        
    }) 
    }, 
     
  }
 </ Script>

webssh.vue