Django WebSocket combinarse para lograr el WebSSH

¿Cuál es webssh?

　　Se refiere a una técnica puede ser implementada en un terminal en la página. Sin la necesidad de herramientas para simular terminales tal conexión, serán las operaciones relativamente bajo nivel también se convirtió en torcida de la arquitectura Arquitectura tales arquitecturas utilizadas comúnmente en la operación y mantenimiento Fort hizo para desarrollar algunos otros sistemas, o la relativamente nueva educación en línea proporcionando un navegador puede estar directamente relacionado con la operación o aprender a escribir código que se basa principalmente de mensajería instantánea cliente y servidor para estudiantes

modelo

Esta aplicación, y se logrará mediante la unión a un extremo posterior, la tecnología necesaria para apilar la siguiente

# Extremo delantero 
VUE 
la WebSocket 
xterm.js

# 后端
django 
dwebsocket (canales) 
paramiko 
threading

Introducción de la tecnología　　

　　xterm

　　　　plug-ins de front-end construidos por medio caparazón negro ventana xterm, el plugin analizará automáticamente el comando con los resultados devueltos por el estilo marcado paramiko fondo y la representación en el navegador, muy fresco

　　WebSocket

　　　　Aquí un puente para tráfico de datos a través del navegador con Django WebSocket

　　paramiko

　　　　En este momento, asumir el papel de paramiko para interactuar con Django Linux medio ambiente, el extremo delantero envía los comandos enviados al fondo, el comando de fondo se envía al resultado se devuelve al xterm conjunto de extremo frontal

aplicación front-end

xterm instalación

instalar [email protected] --save CNPM   // se instala versión especificada

Xterm introdujo en el marco de archivo de estilo vue

// La versión de compilación Vue de carga con el comando `Por importación 
// (tiempo de ejecución de sólo o independiente) ha sido ajustada en webpack.base.conf con un alias. importación Vue de 'vue' 
importación App de './App' 
enrutador importación de './router' 
importación 'xterm / dist / xterm.css' // 看这里,添加xterm css文件样式 
Vue.config.productionTip = false 
/ * eslint-desactivar sin nueva * / 
nueva Vue ({ 
  EL: '#app' , 
  router, 
  componentes: {app}, 
  plantilla: '<app />' 
})

main.js

Utilice el comando xterm para enviar en tiempo real y WebSocket

<template> 
  <div class = "consola" id = "terminal"> </ div> 
</ template> 
<script> 
    importación {terminal} de 'xterm' 
    importación * como adjuntar a partir 'xterm / lib / complementos / attach / adjuntar ' 
    importación * tan en forma de 'xterm / lib / complementos / ajuste / ajuste' 
  de exportación por defecto { 
    nombre: 'webssh' , 
    los datos () { 
      retorno { 
        
        plazo: nula , 
        terminalSocket: nula , 
        de orden: '' 
      } 
    }, 
    métodos: { 
      
      
    },
    montado () { 

      //Los ejemplos de un WebSocket, para django lagos y 
      el este .terminalSocket = nuevo nuevo un WebSocket ( "WS: //127.0.0.1: 8000 / web /" );
       // Obtener la información devuelta al extremo posterior de 
      la presente .terminalSocket.onmessage = ( RES) => { 
          la console.log (res.data); 
          // var Message = el JSON.parse (res.data); 
          // los datos transmitidos de vuelta en el xterm 
          el este .term.writeln ( "\ R & lt \ n- "+ res.data);
           // información que se enviará a restablecer 
          el este .order =" "
           // línea de cambio, en el comienzo de la siguiente pantalla 
          el este .term.write (" \ R & lt \ n- $ " ); 
      } 
    // WS conectado cuando 
    // this.terminalSocket.onopen = function () {
    //      el console.log ( '... WebSocket conectado es') 
    // } 
    // WS cuando está cerrado 
    // this.terminalSocket.onclose = function () { 
    //      el console.log ( 'WebSocket cerrado ... ES' ) 
    // } 
    // WS error al 
    // this.terminalSocket.onerror = function () { 
    //      el console.log ( 'Maldita Broken WebSocket está!') 
    // } 
    // this.term.attach (this.terminalSocket ) 
    // unida a las ws} corriente, xterm 
      

      
      el dejar que terminalContainer = document.getElementById ( 'Terminal' )
       // Crear ejemplo xterm 
      la presente .term = new new Terminal ({
        cursorBlink: true , // mostrar un cursor 
        cursorStyle: "subrayado" // estilo del cursor 
        })                      // crear objetos de una nueva terminal de 
      
      la presente .term.open (terminalContainer)               // para montar el término nodo dom 

      
      // en xterm pantallas de línea de comandos pronta 
      la presente .term.write ( '$' )
       // detectar eventos de teclado xTERM 
      la presente .term.on ( 'Key', (Key, ev) => { 
         // caracteres de entrada clave es ev teclado evento 
        console.log ( "Key ==========" , ev.keyCode);
         el este .term.write (clave) // carácter para ser ingresado para imprimir en la pizarra 
        si(== 13 es ev.keyCode) { // pulse enter 
            // el console.log ( "Introduzca un carro") 
            // this.term.write ( '$') 
            // el console.log (this.order) 
            
            // webscoket utilizado para transmitir datos a Django 
            el este .terminalSocket.send ( el este .order)
             // this.order = '' 
            la console.log ( "dentro de Orden", el este .order) 
        } el otro  IF (ev.keyCode ==. 8) { // botón de eliminación 
          // cadena tomado [0, -lenth. 1] 
          este .order = esta .order.substr (0, este .order.length-. 1 ) 

          // Borrar un comando actual 
          esta.term.write ( "\ X1B [2K \ R ^" )
           // pantalla simplificada nuevo comando actual en 
          el presente .term.write ( "$" + la presente .order) 

          la console.log ( "cadena tomado" + el presente .order)
           typeof  la presente .order 
        } else { // la entrada de caracteres cada pieza juntos 
        el presente .order + = clave 
        del console.log ( "Orden exterior", la presente .order)} 
        
    }) 
    }, 
     
  }
 </ script>

webssh.vue