WebSocket最簡易理解，term.js插件的使用

介紹WebSocket

　　WebSocket我想大家並不陌生，無論你的的工作中是否用到了它，都或多或少聽說過，它是h5中新增的，在某些方面可以很好的替代我們一直沿用的ajax技術，甚至更加的出色。但是它究竟和http有什么區別呢。舉個最簡單的例子吧，我現在需要根據用戶不同的輸入來獲取后端不同的數據，http請求的方式就是每次用戶輸入我就發送一個http請求。然而websocket的解決是一次連接成功后，每次用戶輸入都會發送給后台，但是這個發送的數據卻是一直處在已經連接的狀態，並不是每次想http每一次都是一次新的連接。

　　現很多網站為了實現即時通訊，所用的技術都是輪詢(polling)。輪詢是在特定的的時間間隔(time interval)（如每1秒），由瀏覽器對服務器發出HTTP request，然后由服務器返回最新的數據給客服端的瀏覽器。這種傳統的HTTP request 的模式帶來很明顯的缺點 – 瀏覽器需要不斷的向服務器發出請求(request)，然而HTTP request 的header是非常長的，里面包含的數據可能只是一個很小的值，這樣會占用很多的帶寬。並且假設我現在需要命令行的格式不斷地發送給后台，后台需要不斷的把數據發送到我的電腦，使用傳統的http就顯得很頭疼。於是websocket應運而生，使得即使通訊也變的簡單起來。

　　　　　　　　　　　　　傳統http請求                                                                                                                        websocket請求

                                                     

WebSocket使用

　　　　　　/*只有支持websocket的瀏覽器才能運行*/
        var wsUrl = "ws://192.168.13.21:33333/v1.0/plugins/api/ftp/tree";//必須以ws開頭

        var websocket = new WebSocket(wsUrl);//new出一個 websocket 實例

        websocket.onopen = function(){//打開連接websocket
            websocket.send("connect");//發送你需要的數據

            websocket.onmessage = function(evt) {//接受返回的數據
                console.log('success',evt)
            }

            //失敗的監控
            websocket.onerror = function(evt) {//連接失敗或者返回失敗處理
                console.log('error',evt)
            }
        };

        // 關閉Socket.... 
        //socket.close() 

以上就是websocket簡單的使用，但是真正的工作中用到最多的還是即時的連接，於是配合term.js這個插件可以實現前端命令行的形式向后端發送數據，然后將接收到的數據顯示在屏幕上。

WebSocket結合term.js

我們先看我們的html文件：

 <div id="container-terminal"></div>//插件即將出現模擬屏幕的地方
        
<style type="text/css">
    #container-terminal{
        width:100%;
    }
</style>
<script type="text/javascript" src="ui_assets/js/terminal/term.js"></script>//引入插件js文件

在看我們的js文件：

　var term;
　　
  var wsUrl = "ws://192.168.13.21:33333/v1.0/plugins/api/ftp/tree"
  websocket = new WebSocket(wsUrl);//new 一個websocket實例
  websocket.onopen = function(evt) {//打開連接websocket
  　　term = new Terminal({  //new 一個terminal實例，就是數據展示的屏幕和一些見簡單設置，包括屏幕的寬度，高度，光標是否閃爍等等
      　　cols: 200,
      　　rows: 80,
      　　screenKeys: true,
      　　useStyle: true,
      　　cursorBlink: true,
    });

　　/*term實時監控輸入的數據，並且websocket把實時數據發送給后台*/
    term.on('data', function(data) {//term.on方法就是實時監控輸入的字段，
      　　websocket.send(data);//websocket發送給后台
    });
    term.on('title', function(title) {
      　　//document.title = title;
    });
    term.open(document.getElementById('container-terminal'));//屏幕將要在哪里展示，就是屏幕展示的地方
    websocket.onmessage = function(evt) {//接受到數據
      　　term.write(evt.data);//把接收的數據寫到這個插件的屏幕上
    }
    websocket.onclose = function(evt) {//websocket關閉
      　　term.write("Session terminated");
      　　term.destroy();//屏幕關閉
    }
    websocket.onerror = function(evt) {//失敗額處理
      　　if (typeof console.log == "function") {
        　　　　console.log(evt)
      　　}
    }
 }

  var close = function() {//關閉websocket
    websocket.close();
  };

現在我們可以看看我們的效果，值得注意的是你要將你的websocket地址改成有效的地址：

到此為止，簡單的websocket用法也就講完了，也可以完全的使用到你的工作之中。