ジャンゴのWebSocketはWebSSHを達成するために組み合わせること

websshは何ですか？

　　ページ上の端末に実装することができる技術を指します。ターミナルツールこのような接続をシミュレートすることなく、比較的低レベルの操作にもなったアーキテクチャアーキテクチャ一般砦は、いくつかの他のシステムを開発するために作られた運用・保守で使用されるようなアーキテクチャ、または比較的新しいオンライン教育からねじれます直接操作に関連することができ、ブラウザを提供するか、主に学生に、クライアントとサーバのインスタントメッセージングをベースにコードを書くことを学ぶことにより、

モデル

この実装、および技術は、以下のことをスタックするために必要な、後端部に結合することによって達成されるであろう

＃フロントエンド
VUE 
のWebSocket 
xterm.js

＃后端
ジャンゴ
dwebsocket（チャネル）
paramiko 
スレッド

技術紹介　　

　　xtermの

　　　　xtermウィンドウ黒のシェル環境で構築されたフロントエンドプラグインは、プラグインが自動的にバックグラウンドのマークアップスタイルparamikoによって返され、ブラウザにレンダリング結果にコマンドを解析する、非常にクール

　　WebSocketを

　　　　ジャンゴのWebSocketでブラウザを介してデータトラフィックのためにここにブリッジ

　　paramiko

　　　　このとき、の役割を担うparamikoように相互作用するとジャンゴのLinux環境は、フロントエンドがバックグラウンドに送信されたコマンドを送信し、バックグラウンドコマンドは、フロントエンド・アセンブリのxtermに返された結果に送信されます

フロントエンドの実装

インストールのxterm

CNPM --save [email protected]をインストール   // 指定されたバージョンがインストールされています

xtermがVUEスタイルファイルのフレームワークで導入しました

// `import`コマンドを使用して、負荷へのVueのビルドバージョンは、
// （実行時のみ、またはスタンドアロン）の別名でwebpack.base.confで設定されています。輸入Vueの'VUE'から 
インポートするアプリケーション'./App'から
の輸入ルータ './router' 
輸入 'のxterm / DIST / xterm.css' // 看这里、添加xtermのCSS文件样式 
Vue.config.productionTip = 偽
/ * eslintディセーブル無新しい* / 
新しいヴュー（{ 
  EL： '#app' 、
  ルータ、
  コンポーネント：{アプリケーション}、
  テンプレート： '<APP />' 
}）

main.js

リアルタイムでのWebSocketを送信するために使用xtermのコマンド

<テンプレート> 
  <DIV CLASS = "コンソール" ID = "端末"> </ div> 
</テンプレート> 
<スクリプト> 
    からインポート{ターミナル} 'のxterm' 
    インポート *「としてのxterm / LIB /アドオン/アタッチ/アタッチからアタッチ「
    インポートのxterm / libに/アドオン/フィット/フィット'からフィットなど*' 
  輸出デフォルト{ 
    ：名前 webssh '' 、
    データ（）{ 
      リターン{ 
        
        用語：ヌル、
        terminalSocket：ヌル、
        順序： '' 
      } 
    }、
    メソッド：{ 
      
      
    }、
    {）（搭載

      //ジャンゴ湖やのためのWebSocketの例として、
      この .terminalSocket = 新しい新しい A用WebSocket（「：//127.0.0.1：WS 8000 /ウェブ/」）;
       // の後端に返された情報を取得
      、この .terminalSocket.onmessage =を（ RES）=> { 
          にconsole.log（res.data）; 
          // VARメッセージ= JSON.parse（res.data）; 
          // のxtermに戻って送信されたデータ
          この .term.writeln（「\ R＆LT \ N- "+ res.data）;
           // 情報をリセットするために送信されるように
          、この .ORDER =" "
           // 次の表示の開始時に、変更ラインを
          この .term.write（" \ R＆LT \ N- $ " ）; 
      } 
    // 接続WS場合
    // this.terminalSocket.onopen =関数（）{
    //      はconsole.log（ '...接続済みのWebSocketは'）
    // } 
    // WS閉じたとき
    // this.terminalSocket.onclose =関数（）{ 
    //      はconsole.log（ 'のWebSocketクローズを...'で）
    // } 
    // WSエラー
    // this.terminalSocket.onerror =関数（）{ 
    //      はconsole.log（ '切れくそのWebSocketである！'）
    // } 
    // this.term.attach（this.terminalSocket ）
    // 、}ストリームWSに結合しているxtermの
      

      
      terminalContainerましょう =のdocument.getElementById（ '末端' ）
       // インスタンスのxterm作成
      この .term = 新新をターミナル（{
        cursorBlinkは：trueに、// カーソル表示 
        「下線」：cursorStyle // カーソルのスタイルを 
        }）                      // 新しいターミナルは、オブジェクトを作成し
      
      、この）.term.open（terminalContainerを               // 用語DOMノードマウントする

      
      // xtermの上をディスプレイには、コマンドラインプロンプト
      この .term.write（「$」）
       //は、キーボードイベントがxtermのために耳を傾け
      、この .term.on（「キー」、（キー、EV）=> { 
         // キー入力した文字は、キーボードのEVでありますイベント 
        はconsole.log（「キー==========」、ev.keyCode）;
         この .term.write（キー）// 黒板に印刷するために入力する文字
        場合（== 13 ev.keyCodeある）{ // キーを押して入力します
            // はconsole.log（ "キャリッジを入力してください"）
            // this.term.write（ '$'）
            // はconsole.log（this.orderを）
            
            // ジャンゴに送信データに使用webscoket 
            この .terminalSocket.send（この.ORDER）
             // this.order = '' 
            はconsole.log（ "注文内側"、この.ORDER）
        } 他 IF（ev.keyCode == 8） { // 削除ボタン
          // 取らストリング[0、-lenth。1] 
          本 .ORDER = この .order.substr（0、この .order.length-。1 ）

          // クリアコマンド現在の
          この.term.write（ "\ X1B [2K \ R＆LT" ）
           // 上の簡素化新しいコマンド現在の表示
          この .term.write（ "$" + この.ORDER）

          はconsole.log（ "撮影した文字列" + この.ORDER）
           typeof演算 本.ORDER 
        } 他 { // 一緒に文字入力各ピース
        この .ORDER + = キー
        はconsole.log（ "外部オーダー"、この.ORDER）} 
        
    }）
    } 
     
  }
 </ SCRIPT>

webssh.vue