fetch、WebSocket、ActiveMQ和reqwest在前端場景中的應用

前端/客戶端的通訊需求有多種，常見的業務需求有：請求服務器數據、主動推送數據、消息通知和文件上傳。本文對比四種通訊方式，針對業務需求分析最適合採用的通訊方式。

fetch

請求服務器數據屬於請求-響應式通訊，是前端最多見的應用場景之一，先向服務器發送請求，收到服務器響應後得到數據。進入新頁面時請求頁面數據、點擊視頻時請求多媒體數據以及提交表單等行爲都屬於該場景。

fetch用於前端的網絡請求，是傳統XmlHttpRequest的改進替代方案。fetch對於異步請求網絡資源有着優秀的返回處理機制，一個異步請求發出後，fetch會返回一個promise對象，根據請求結果將狀態置爲fulfilled或rejected，咱們能夠爲promise對象指定回調函數。

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .catch(error => console.error('Error:', error))
  .then(response => console.log('Success:', response));
複製代碼

fetch在回調嵌套時的同步寫法以及對CORS和HTTP擴展的原生支持，使得fetch成爲請求-響應式通訊的優先選擇。在實際應用中，向服務器請求數據時適合採用fetch。

WebSocket

主動推送數據屬於推送式通訊，由前端向服務器，或服務器向客戶端主動推送數據，不要求響應，好比客戶端推送文本數據、服務器推送用戶數據。 WebSocket與Ajax、fetch不一樣的是，不須要根據響應的success狀態作針對處理，只負責推送數據。

const ws = new WebSocket("wss://localhost.websocket.org");
ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};
ws.onclose = function(evt) {
  console.log("Connection closed.");
};   
複製代碼

在主動推送場景中，WebSocket面向鏈接、性能高效且不受同源策略的限制，適合用於推送式通訊。

ActiveMQ

消息通知屬於消息-訂閱式通訊，通常由服務器向前端發送消息，消息只負責通知，不負責傳輸具體的數據，相似XmlHttpRequest中的請求頭。

ActiveMQ是消息中間件，通常用來發送消息，不傳輸數據。

window.onload = function(){
        const opts = {
        url: www.hostMQ.com,
        onConnected: (msg) => {
          mqService.subscribe(`www.hostMQMessage.com`, function (frame) {
            let message = JSON.parse(frame.body)
            switch (message.messageType) {
              case 'TypeA':
              ...
              break
            }
          })
        },
        onError: (msg) => {
              mqService.reconnect()
        },
      }
      mqService.createBroker(opts)
}
複製代碼

AcitveMQ發送的消息不要求響應，且支持訂閱，所以適合用來作消息通知，例如多端同步消息。

reqwest.js

文件上傳服務器也是前端的常見場景，上傳大文件時須要把文件切割分片並經過FormData對象傳輸。這種場景要求靈活地處理每一片文件的上傳結果，從而實現斷點續傳、上傳進度顯示等功能。

reqwest.js是Ajax的健壯版，reqwest.js的官方介紹上說「It's AJAX」。reqwest在GET請求、JSONP等寫法上進行了改進。 reqwest的GET請求：

reqwest({
    url: 'path/to/html'
  , method: 'get'
  , data: [ { name: 'foo', value: 'bar' }, { name: 'baz', value: 100 } ]
  , success: function (resp) {
      qwery('#content').html(resp)
    }
})
複製代碼

reqwest的JSONP請求：

reqwest({
    url: 'path/to/data.jsonp?foo=bar'
  , type: 'jsonp'
  , jsonpCallback: 'foo'
  , jsonpCallbackName: 'bar'
  , success: function (resp) {
      qwery('#content').html(resp.content)
    }
})
複製代碼

在文件傳輸時，reqwest.js不一樣於fetch的同步式回調，能夠方便得指定每片文件上傳成功或失敗的回調函數。所以，在文件傳輸場景中reqwest是比fetch、Ajax更優先的選擇。