使用 MQTT 在項目中實現數據收發

譯自： https://opensource.com/article/18/6/mqtt
作者： Sean Dague
譯者： Andy Song

從開源數據到開源事件流，了解一下 MQTT 發布/訂閱（pubsub）線路協議。

去年 11 月我們購買了一輛電動汽車，同時也引發了有趣的思考：我們應該什么時候為電動汽車充電？對于電動汽車充電所用的電，我希望能夠對應最小的二氧化碳排放，歸結為一個特定的問題：對于任意給定時刻，每千瓦時對應的二氧化碳排放量是多少，一天中什么時間這個值最低？

尋找數據

我住在紐約州，大約 80% 的電力消耗可以自給自足，主要來自天然氣、水壩（大部分來自于尼亞加拉(Niagara)大瀑布）、核能發電，少部分來自風力、太陽能和其它化石燃料發電。非盈利性組織紐約獨立電網運營商(New York Independent System Operator) （NYISO）負責整個系統的運作，實現發電機組發電與用電之間的平衡，同時也是紐約路燈系統的監管部門。

盡管沒有為公眾提供公開 API，NYISO 還是盡責提供了不少公開數據供公眾使用。每隔 5 分鐘匯報全州各個發電機組消耗的燃料數據。數據以 CSV 文件的形式發布于公開的檔案庫中，全天更新。如果你了解不同燃料對發電瓦數的貢獻比例，你可以比較準確的估計任意時刻的二氧化碳排放情況。

在構建收集處理公開數據的工具時，我們應該時刻避免過度使用這些資源。相比將這些數據打包并發送給所有人，我們有更好的方案。我們可以創建一個低開銷的事件流(event stream)，人們可以訂閱并第一時間得到消息。我們可以使用 MQTT 實現該方案。我的項目（ ny-power.org ）目標是收錄到 Home Assistant 項目中；后者是一個開源的家庭自動化(home automation)平臺，擁有數十萬用戶。如果所有用戶同時訪問 CSV 文件服務器，估計 NYISO 不得不增加訪問限制。

MQTT 是什么？

MQTT 是一個發布訂閱線路協議(publish/subscription wire protocol)，為小規模設備設計。發布訂閱系統工作原理類似于消息總線。你將一條消息發布到一個主題(topic)上，那么所有訂閱了該主題的客戶端都可以獲得該消息的一份拷貝。對于消息發送者而言，無需知道哪些人在訂閱消息；你只需將消息發布到一系列主題，并訂閱一些你感興趣的主題。就像參加了一場聚會，你選取并加入感興趣的對話。

MQTT 能夠構建極為高效的應用?？蛻舳擞嗛営邢薜膸讉€主題，也只收到它們感興趣的內容。不僅節省了處理時間，還降低了網絡帶寬使用。

作為一個開放標準，MQTT 有很多開源的客戶端和服務端實現。對于你能想到的每種編程語言，都有對應的客戶端庫；甚至有嵌入到 Arduino 的庫，可以構建傳感器網絡。服務端可供選擇的也很多，我的選擇是 Eclipse 項目提供的 Mosquitto 服務端，這是因為它體積小、用 C 編寫，可以承載數以萬計的訂閱者。

為何我喜愛 MQTT

在過去二十年間，我們為軟件應用設計了可靠且準確的模型，用于解決服務遇到的問題。我還有其它郵件嗎？當前的天氣情況如何？我應該此刻購買這種產品嗎？在絕大多數情況下，這種問答式(ask/receive)的模型工作良好；但對于一個數據爆炸的世界，我們需要其它的模型。MQTT 的發布訂閱模型十分強大，可以將大量數據發送到系統中。客戶可以訂閱數據中的一小部分并在訂閱數據發布的第一時間收到更新。

MQTT 還有一些有趣的特性，其中之一是遺囑(last-will-and-testament)消息，可以用于區分兩種不同的靜默，一種是沒有主題相關數據推送，另一種是你的數據接收器出現故障。MQTT 還包括保留消息(retained message)，當客戶端初次連接時會提供相關主題的最后一條消息。這對那些更新緩慢的主題來說很有必要。

我在 Home Assistant 項目開發過程中，發現這種消息總線模型對異構系統(heterogeneous systems)尤為適合。如果你深入物聯網(Internet of Things)領域，你會發現 MQTT 無處不在。

我們的第一個 MQTT 流

NYSO 公布的 CSV 文件中有一個是實時的燃料混合使用情況。每 5 分鐘，NYSO 發布這 5 分鐘內發電使用的燃料類型和相應的發電量（以兆瓦為單位）。

這個 CSV 文件看起來像這樣：

表中唯一令人不解就是燃料類別中的混合燃料。紐約的大多數天然氣工廠也通過燃燒其它類型的化石燃料發電。在冬季寒潮到來之際，家庭供暖的優先級高于發電；但這種情況出現的次數不多，（在我們計算中）可以將混合燃料類型看作天然氣類型。

CSV 文件全天更新。我編寫了一個簡單的數據泵，每隔 1 分鐘檢查是否有數據更新，并將新條目發布到 MQTT 服務器的一系列主題上，主題名稱基本與 CSV 文件有一定的對應關系。數據內容被轉換為 JSON 對象，方便各種編程語言處理。

ny-power/upstream/fuel-mix/Hydro {"units": "MW", "value": 3229, "ts": "05/09/2018 00:05:00"}
ny-power/upstream/fuel-mix/Dual Fuel {"units": "MW", "value": 1400, "ts": "05/09/2018 00:05:00"}
ny-power/upstream/fuel-mix/Natural Gas {"units": "MW", "value": 2144, "ts": "05/09/2018 00:05:00"}
ny-power/upstream/fuel-mix/Other Fossil Fuels {"units": "MW", "value": 4, "ts": "05/09/2018 00:05:00"}
ny-power/upstream/fuel-mix/Wind {"units": "MW", "value": 41, "ts": "05/09/2018 00:05:00"}
ny-power/upstream/fuel-mix/Other Renewables {"units": "MW", "value": 226, "ts": "05/09/2018 00:05:00"}
ny-power/upstream/fuel-mix/Nuclear {"units": "MW", "value": 4114, "ts": "05/09/2018 00:05:00"}

這種直接的轉換是種不錯的嘗試，可將公開數據轉換為公開事件。我們后續會繼續將數據轉換為二氧化碳排放強度，但這些原始數據還可被其它應用使用，用于其它計算用途。

MQTT 主題

主題和主題結構(topic structure)是 MQTT 的一個主要特色。與其它標準的企業級消息總線不同，MQTT 的主題無需事先注冊。發送者可以憑空創建主題，唯一的限制是主題的長度，不超過 220 字符。其中 / 字符有特殊含義，用于創建主題的層次結構。我們即將看到，你可以訂閱這些層次中的一些分片。

基于開箱即用的 Mosquitto，任何一個客戶端都可以向任何主題發布消息。在原型設計過程中，這種方式十分便利；但一旦部署到生產環境，你需要增加訪問控制列表(access control list)（ACL）只允許授權的應用發布消息。例如，任何人都能以只讀的方式訪問我的應用的主題層級，但只有那些具有特定憑證(credentials)的客戶端可以發布內容。

主題中不包含自動樣式(automatic schema)，也沒有方法查找客戶端可以發布的全部主題。因此，對于那些從 MQTT 總線消費數據的應用，你需要讓其直接使用已知的主題和消息格式樣式。

那么應該如何設計主題呢？最佳實踐包括使用應用相關的根名稱，例如在我的應用中使用 ny-power。接著，為提高訂閱效率，構建足夠深的層次結構。upstream 層次結構包含了直接從數據源獲取的、不經處理的原始數據，而 fuel-mix 層次結構包含特定類型的數據；我們后續還可以增加其它的層次結構。

訂閱主題

在 MQTT 中，訂閱僅僅是簡單的字符串匹配。為提高處理效率，只允許如下兩種通配符：

# 以遞歸方式匹配，直到字符串結束
+ 匹配下一個 / 之前的內容

為便于理解，下面給出幾個例子：

ny-power/# - 匹配 ny-power 應用發布的全部主題
ny-power/upstream/# - 匹配全部原始數據的主題
ny-power/upstream/fuel-mix/+ - 匹配全部燃料類型的主題
ny-power/+/+/Hydro - 匹配全部兩次層級之后為 Hydro 類型的主題（即使不位于 upstream 層次結構下）

類似 ny-power/# 的大范圍訂閱適用于低數據量(low-volume)的應用，應用從網絡獲取全部數據并處理。但對高數據量(high-volume)應用而言則是一個災難，由于絕大多數消息并不會被使用，大部分的網絡帶寬被白白浪費了。

在大數據量情況下，為確保性能，應用需要使用恰當的主題篩選（如 ny-power/+/+/Hydro）盡量準確獲取業務所需的數據。

增加我們自己的數據層次

接下來，應用中的一切都依賴于已有的 MQTT 流并構建新流。第一個額外的數據層用于計算發電對應的二氧化碳排放。

利用美國能源情報署(U.S. Energy Information Administration) 給出的 2016 年紐約各類燃料發電及排放情況，我們可以給出各類燃料的平均排放率，單位為克/兆瓦時。

上述結果被封裝到一個專用的微服務中。該微服務訂閱 ny-power/upstream/fuel-mix/+，即數據泵中燃料組成情況的原始數據，接著完成計算并將結果（單位為克/千瓦時）發布到新的主題層次結構上：

ny-power/computed/co2 {"units": "g / kWh", "value": 152.9486, "ts": "05/09/2018 00:05:00"}

接著，另一個服務會訂閱該主題層次結構并將數據打包到 InfluxDB 進程中；同時，發布 24 小時內的時間序列數據到 ny-power/archive/co2/24h 主題，這樣可以大大簡化當前變化數據的繪制。

這種層次結構的主題模型效果不錯，可以將上述程序之間的邏輯解耦合。在復雜系統中，各個組件可能使用不同的編程語言，但這并不重要，因為交換格式都是 MQTT 消息，即主題和 JSON 格式的消息內容。

從終端消費數據

為了更好的了解 MQTT 完成了什么工作，將其綁定到一個消息總線并查看消息流是個不錯的方法。mosquitto-clients 包中的 mosquitto_sub 可以讓我們輕松實現該目標。

安裝程序后，你需要提供服務器名稱以及你要訂閱的主題。如果有需要，使用參數 -v 可以讓你看到有新消息發布的那些主題；否則，你只能看到主題內的消息數據。

mosquitto_sub -h mqtt.ny-power.org -t ny-power/# -v

只要我編寫或調試 MQTT 應用，我總會在一個終端中運行 mosquitto_sub。

從網頁直接訪問 MQTT

到目前為止，我們已經有提供公開事件流的應用，可以用微服務或命令行工具訪問該應用。但考慮到互聯網仍占據主導地位，因此讓用戶可以從瀏覽器直接獲取事件流是很重要。

MQTT 的設計者已經考慮到了這一點。協議標準支持三種不同的傳輸協議： TCP 、 UDP 和 WebSockets 。主流瀏覽器都支持 WebSockets，可以維持持久連接，用于實時應用。

Eclipse 項目提供了 MQTT 的一個 JavaScript 實現，叫做 Paho ，可包含在你的應用中。工作模式為與服務器建立連接、建立一些訂閱，然后根據接收到的消息進行響應。

// ny-power web console application
var client = new Paho.MQTT.Client(mqttHost, Number("80"), "client-" + Math.random());
// set callback handlers
client.onMessageArrived = onMessageArrived;
// connect the client
client.reconnect = true;
client.connect({onSuccess: onConnect});
// called when the client connects
function onConnect() {
// Once a connection has been made, make a subscription and send a message.
console.log("onConnect");
client.subscribe("ny-power/computed/co2");
client.subscribe("ny-power/archive/co2/24h");
client.subscribe("ny-power/upstream/fuel-mix/#");
}
// called when a message arrives
function onMessageArrived(message) {
console.log("onMessageArrived:"+message.destinationName + message.payloadString);
if (message.destinationName == "ny-power/computed/co2") {
var data = JSON.parse(message.payloadString);
$("#co2-per-kwh").html(Math.round(data.value));
$("#co2-units").html(data.units);
$("#co2-updated").html(data.ts);
}
if (message.destinationName.startsWith("ny-power/upstream/fuel-mix")) {
fuel_mix_graph(message);
}
if (message.destinationName == "ny-power/archive/co2/24h") {
var data = JSON.parse(message.payloadString);
var plot = [
{
x: data.ts,
y: data.values,
type: 'scatter'
}
];
var layout = {
yaxis: {
title: "g CO2 / kWh",
}
};
Plotly.newPlot('co2_graph', plot, layout);
}

上述應用訂閱了不少主題，因為我們將要呈現若干種不同類型的數據；其中 ny-power/computed/co2 主題為我們提供當前二氧化碳排放的參考值。一旦收到該主題的新消息，網站上的相應內容會被相應替換。

ny-power.org 網站提供的 NYISO 二氧化碳排放圖。

ny-power/archive/co2/24h 主題提供了時間序列數據，用于為 Plotly 線表提供數據。ny-power/upstream/fuel-mix 主題提供當前燃料組成情況，為漂亮的柱狀圖提供數據。

ny-power.org 網站提供的燃料組成情況。

這是一個動態網站，數據不從服務器拉取，而是結合 MQTT 消息總線，監聽對外開放的 WebSocket。就像數據泵和打包器程序那樣，網站頁面也是一個發布訂閱客戶端，只不過是在你的瀏覽器中執行，而不是在公有云的微服務上。

你可以在 http://ny-power.org 站點點看到動態變更，包括圖像和可以看到消息到達的實時 MQTT 終端。

繼續深入

ny-power.org 應用的完整內容開源在 GitHub 中。你也可以查閱架構簡介，學習如何使用 Helm 部署一系列 Kubernetes 微服務構建應用。另一個有趣的 MQTT 示例使用 MQTT 和 OpenWhisk 進行實時文本消息翻譯，代碼模式(code pattern)參考鏈接。

MQTT 被廣泛應用于物聯網領域，更多關于 MQTT 用途的例子可以在 Home Assistant 項目中找到。

如果你希望深入了解協議內容，可以從 mqtt.org 獲得該公開標準的全部細節。

想了解更多，可以參加 Sean Dague 在 OSCON 上的演講，主題為將 MQTT 加入到你的工具箱，會議將于 7 月 16-19 日在奧爾良州波特蘭舉辦。

via: https://opensource.com/article/18/6/mqtt

作者： Sean Dague 選題： lujun9972 譯者： pinewall 校對： wxy

本文由 LCTT 原創編譯， Linux中國榮譽推出

點擊“了解更多”可訪問文內鏈接

or...in語句解析

<script>
var json={a: 12, b: 5};
for(var i in json)
{
alert(i+'='+json[i]);
}
</script>

eval() 函數可計算某個字符串, 并執行其中的的 JavaScript 代碼。

服務器端腳本代碼：

<?php
$row=array('username'=>'lisi','password'=>'222222');
echo json_encode($row);
/*$data=array(
array('name'=>'zhangsan','age'=>18),
array('name'=>'lisi','age'=>30)
);
echo json_encode($data);
*/
?>

var json=eval('('+value+')'); 主要是針對關聯數組

返回："{name:'zhangsan',age:18}"

訪問方式:json.username+json.password

var json=eval(value); 主要是針對索引數組

返回："[{name:'zhangsan',age:18},{name:'lisi',age:20}]"

訪問方式:json[0].name+json[0].age

注意：索引數組的解析也可以采用 var json=eval(value);

<script language="javascript" src="public.js"></script>
<script>
var xhr=createxhr(); //創建ajax對象, 代碼見ajax | ajax封裝GET和POST
xhr.open('post','demo05.php');
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var value=xhr.responseText; //返回的是字符串
//1)
var json=eval('('+value+')'); //返回是json對象
alert(json.username+json.password);
//2)
//var json=eval(value); //返回是json數組對象
//alert(json[1].name+json[1].age);
}
};
xhr.send(null);
</script>

返回："{name:’zhangsan’,age:18}"

解析格式：eval('('+value+')');

返回："[{name:'zhangsan',age:18},{name:'lisi',age:20}]"

解析格式：eval(value);

也可以采用eval('('+value+')');

實例1:

<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function f1(){
//ajax去服務器獲得json信息
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
//alert(xhr.responseText);//字符串{"north":"wolf","helan":"pig","germany":"dog"}
var info = eval('('+xhr.responseText+')');
//也可寫成：eval("var info="+xhr.responseText);
document.write(info.north);
document.write(info.helan);
document.write(info.germany);
}
}
xhr.open('get','03.php');
xhr.send(null);
}
//javascript把一個字符串變為對象
//var a = '{"north":"wolf","helan":"pig","germany":"dog"}';
//eval(參數字符串)
//eval("var obj="+a);//eval('var obj={"north":"wolf","helan":"pig","germany":"dog"}');
//document.write(obj);//訪問對象
</script>
</head>
<body>
<h2>靜態網站，javascript對json的接收處理</h2>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
<?php
//對外提供json信息
header("Cache-Control:no-cache,must-revalidate");
$animal = array('north'=>'wolf','helan'=>'pig','germany'=>'dog');
echo json_encode($animal); //{"north":"wolf","helan":"pig","germany":"dog"}
?>

在javascript解析{"north":"wolf","helan":"pig","germany":"dog"}

采用：var info = eval('('+xhr.responseText+')'); 語法

也可寫成：eval("var info="+xhr.responseText);

實例2：

<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function f1(){
//ajax去服務器獲得json信息
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
//alert(xhr.responseText);//數組 ["wolf","pig","dog"]
var info = eval(xhr.responseText);
document.write(info[0]+info[1]+info[2]);
}
}
xhr.open('get','03.php');
xhr.send(null);
}
</script>
</head>
<body>
<h2>靜態網站，javascript對json的接收處理</h2>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
<?php
//對外提供json信息
header("Cache-Control:no-cache,must-revalidate");
$animal = array('wolf','pig','dog');
echo json_encode($animal); //["wolf","pig","dog"]
?>

在javascript解析["wolf","pig","dog"]時

采用：var info = eval(xhr.responseText);語法

實例3:

<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function f1(){
//ajax去服務器獲得json信息
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
var s = "";
//alert(xhr.responseText);//數組對象[{"id":1,"name":"xutao","sex":"\u7537","age":30},...]
var info = eval(xhr.responseText);
for(var i=0;i<info.length;i++){
s += info[i].id + "--" + info[i].name + "--" + info[i].sex + "--" + info[i].age +"<br />";
}
document.getElementById("user").innerHTML = s;
}
}
xhr.open('get','info.php');
xhr.send(null);
}
</script>
</head>
<body>
<h2>靜態網站，javascript對json的接收處理</h2>
<input type="button" value="觸發" onclick="f1()" />
<div id="user"></div>
</body>
</html>
<?php
$info = array(
array("id"=>1,"name"=>"zhangsan","sex"=>"男","age"=>30),
array("id"=>2,"name"=>"lisi","sex"=>"女","age"=>27),
array("id"=>3,"name"=>"wangwu","sex"=>"男","age"=>6)
);
echo json_encode($info);
/* [{"id":1,"name":"zhangsan","sex":"\u7537","age":30},
{"id":2,"name":"lisi","sex":"\u5973","age":27},
{"id":3,"name":"wuwang","sex":"\u7537","age":6}] */
?>

在javascript解析[{"id":1,"name":"zhangsan","sex":"\u7537","age":30},

{"id":2,"name":"lisi","sex":"\u5973","age":27},

{"id":3,"name":"wuwang","sex":"\u7537","age":6}]時

采用：var info = eval(xhr.responseText);語法

從數據庫讀取出來的二維數組，通過json_encode()編碼后, 在javascript進行解析時也是采用上述語法。

章開始之前，我們先來看一個常見的問題：

接到一個任務，需要抓取某個網站上的數據內容，網頁上需要輸入搜索關鍵詞，然后點擊搜索按鈕，等待頁面加載完畢，獲取網頁上的搜索結果，而每一個搜索結果項，都需要點擊展開才能查看到具體內容。

對于該問題，我們可以從網上找到一些解決問題的途徑，但是大都不是很全面。這里小編對所有可能出現的問題做了一次調研，并匯總成如下的解決方案，希望對大家有所幫助。

首先，我們先來匯總一下python生態下爬取網站數據需要用到的工具。

1，selenium chromedriver，這個標準的自動化工具，可以幫助我們從后臺操控google瀏覽器，并能模擬鼠標移動和點擊事件，配合xpath快速定位網頁元素，從根本上解放了我們的雙手。

2，ajax-hook, 這個是用來攔截xhr的鉤子，可以快速獲取網站服務器的響應內容，而無需我們被動地從網頁上來獲取。

明確了我們處理任務的可用資源，下一步就是各種踩坑了。

這里小編先列舉一下，我所遇到的坑：

1，selenium的webdriver加載網頁，怎么判斷頁面是否加載完全，使用

wait = WebDriverWait(self.driver, timeout=10)

wait.until(lambda my_driver: my_driver.execute_script('return document.readyState') == 'complete')

發現這種方案不可行，遇到動態網頁異步加載就gameover，不通用，可行的方案應該wait for webelement loaded，也就是等待你所關注的網頁元素加載完畢才行。

2，xpath的相對路徑查找，是帶了position的向下查找，也就是說每次調用xpath find, 其position就往下移動一次。所以如果用xpath在同一個流程調用多次只有第一次可以找到元素，后面都是失敗的。所以對于需要反復查找的元素，最好要用絕對路徑，獲取xpath絕對路徑很簡單

打開瀏覽器的開發者工具，點擊左上角的小箭頭，移動鼠標到具體某個按鈕或者輸入框點擊一下就可以定位到html的標簽源代碼位置，鼠標右鍵，Copy xpath即可

3，怎么截獲并過濾xhr請求，將響應內容保存下來，而不會造成內存暴漲。

from selenium import webdriver

from selenium.webdriver.chrome.options import Options

from selenium.webdriver.support.ui import WebDriverWait

chrome_options = Options()

chrome_options.add_argument("--disable-extensions")

chrome_options.add_argument("--disable-gpu")

chrome_options.add_argument("--headless")

chrome_options.add_argument("--no-sandbox")

prefs = {

'download.default_directory': os.getenv('OS_LOG_PATH')

}

chrome_options.add_experimental_option('prefs', prefs)

capabilities = webdriver.DesiredCapabilities().CHROME

capabilities['acceptSslCerts'] = True

driver = webdriver.Chrome(options=chrome_options, desired_capabilities=capabilities)

我們先來初始化一下webdriver，網上有很多資料，但是都不是很全面，上面是我整理的初始化內容，大家按照這個來，就不會有問題。

截獲https/http響應body內容，網上大致有三種實現思路：

1，開啟browser, performance log，再根據requestId，調用chrome-devtools protocal Network.getResponseBody, 獲取響應body。但是問題來了，我們需要大量采集response，而performance log都是存在內存中，還需要我們人為清理，并且performance log采集的信息很雜，沒有過濾的入口提供給開發者。而且最煩的是，還需要去解析log，需要為了查詢一個repsonse body，有時候需要人為過濾N行日志。。。。。（直接無語凝噎）

2，使用代理，網上傳的最多的是browsermob-proxy，但是這個玩意很無語的是只提供response的統計信息，不返回實質性的response body內容，配置各種參數都不會返回content.text字段，氣得跳腳，去github上看源碼發現，text被下放了，當前穩定版本都會省略這個參數。所以你辛辛苦苦安裝proxy，調整ssl參數，在python中配置各種proxy har，設置captureContent，結果卻得不到response body，不自覺就口吐芬芳了。所以想要其返回text字段，你需要改它的源碼，改源碼不難，但是很煩。

3，使用ajax-hook, 這個方案的思路是：在源網頁加載之前，實現一個XMLHttpRequest的代理對象，然后覆蓋全局的XMLHttpRequest，這樣一但上層調用 new XMLHttpRequest這樣的代碼時，其實創建的是Ajax-hook的代理對象實例

我們先新建一個hook.js腳本

(function(console){

console.save = function(data, filename){

if(!data) {

console.error('Console.save: No data')

return;

}

if(!filename) filename = 'console.json'

if(typeof data === "object"){

data = JSON.stringify(data, undefined, 4)

}

var blob = new Blob([data], {type: 'text/json'}),

e = document.createEvent('MouseEvents'),

a = document.createElement('a')

a.download = filename

a.href = window.URL.createObjectURL(blob)

a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')

e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)

a.dispatchEvent(e)

}

})(console)

ah.proxy({

//請求發起前進入

onRequest: (config, handler) => {

console.log(config.url)

handler.next(config);

//請求發生錯誤時進入，比如超時；注意，不包括http狀態碼錯誤，如404仍然會認為請求成功

onError: (err, handler) => {

console.log(err.type)

handler.next(err)

//請求成功后進入

onResponse: (response, handler) => {

if (response.config.url.startsWith('api/apps') && response.config.url.endsWith('/search')) {

timestamp = new Date().getTime().toString()

console.save(response.response, timestamp+'.json')

}

handler.next(response)

}

})

該hook.js是我改良之后的，可以拿來直接用，功能就是根據response.config.url過濾我們需要的請求，并將response body保存到本地的json文件中，注意到上文中webdriver初始化的字段中有個選項，download.default_directory

prefs = {

'download.default_directory': os.getenv('OS_LOG_PATH')

}

os.getenv('OS_LOGPATH')這個是獲取環境變量，環境變量的值為我們需要保存response body的文件夾路徑，每一個response body都是一個json文件。大功告成??！簡潔明了，不需要依賴于其他任何東西，就可以實現了，長舒一口氣。

總結經驗：

1，不要盲目使用網上的源碼，也不要死扣一種解決方案，不要輕易就相信網上的博文資料而不親自實踐，人云亦云。

2，解決問題最有效的途徑是：看清問題的本質，從問題的內部挖掘出解決文圖的思路，拆解成更容易解決的小問題。當一個問題關聯了太多變量因素時，要學會控制單一變量，用排除法一步步解決，省時省力，不容易走彎路。

在線咨詢

上一篇：html頁面中圖片長寬不一需要根據父級長寬全圖不拉伸顯示的做法
下一篇：讓Chrome“滾”得更流暢：微軟推薦Edge HTML風格滾動特性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商