}
在上面的代碼中，我們聲明chartEntry了我們打算存儲所有圖表數據的位置。然後，我們遍歷可用的，visitors併為他們每個人添加一個新的ChartDataEntry(x: Double(i), y: visitors[i])，告訴圖表X和Y的位置。
我們設置折線圖將顯示的顏色。我們創建LineChartData並添加line包含我們數據點的顏色。最後，我們將數據添加到chartView並設置圖表視圖描述。
讓我們的模擬按鈕調用一個端點
我們需要做的下一件事是讓我們的請求按鈕觸發一個後端，後者會將模擬數據發送到Pusher。
為此，我們需要再次更新視圖控制器。在ViewController圖表包中正確導入Alamofire包：
import Alamofire
現在用simulateButtonPressed下面的代碼替換函數：
@IBAction func simulateButtonPressed(_ sender: Any) {
Alamofire.request("http://localhost:4000/simulate", method: .post).validate().responseJSON { (response) in
switch response.result {
case .success(_):
_ = "Successful"
case .failure(let error):
print(error)
}
}
}
在下面的代碼中，我們使用Alamofire發送POST請求到http：// localhost：4000 /模擬哪一個是本地Web服務器（我們將很快創建該後端）。在實際的應用程序中，這通常會指向一個真正的Web服務器。
這個端點沒有使用任何參數來簡化教程。我們也不需要對回應做任何事情。我們只需要在每次按下模擬訪問按鈕時發送POST請求。
使用Pusher綁定實時功能
為了完成所有這些工作，我們將創建一個函數來偵聽來自Pusher的事件，並且當收到一個事件時，我們將該值保存visitors並然後觸發我們之前創建的更新圖表函數。
為此，請打開頂部的Alamofire軟件包ViewController並導入PusherSwiftSDK：
import PusherSwift
接下來，我們將為Pusher實例聲明一個類屬性。我們可以在visitors聲明行下正確執行此操作：
var pusher: Pusher!
然後聲明屬性後，我們需要將下面的函數添加到類中，以便它可以偵聽事件：
private func listenForChartUpdates() {
pusher = Pusher(key: "PUSHER_KEY", options: PusherClientOptions(host: .cluster("PUSHER_CLUSTER")))
let channel = pusher.subscribe("visitorsCount")
channel.bind(eventName: "addNumber", callback: { (data: Any?) -> Void in
if let data = data as? [String: AnyObject] {
let count = data["count"] as! Double
self.visitors.append(count)
self.updateChart()
}
})
pusher.connect()
}
在上面的代碼中，我們實例化Pusher並傳入我們的密鑰和集群（您可以從Pusher應用程序的儀表板獲取密鑰和集群）。然後，我們訂閱visitorsChannel並綁定到該addNumber頻道上的活動名稱。
當事件被觸發時，我們觸發回調中的邏輯，它只是將計數附加到visitors，然後調用updateChart函數，實時更新實際圖表。
最後我們調用pusher.connect()哪些形式連接到Pusher。
在viewDidLoad函數中只需添加一個調用listenForChartUpdates方法：
override func viewDidLoad() {
super.viewDidLoad()
// ...stuff
listenForChartUpdates()
}
就這樣！我們在Xcode中創建了我們的應用程序，我們已準備好進行測試。然而，為了測試，我們需要創建後端，POST當點擊按鈕時，我們發送請求到後端。為了創建這個後端，我們將使用Node.js. 現在我們來做。
為我們的實時iOS圖表應用程序創建後端服務
要開始，請為該Web應用程序創建一個目錄，然後在該目錄內創建一些新文件：
文件：index.js
// -------------------------------------------------------
// Require Node dependencies
// -------------------------------------------------------
let Pusher = require('pusher');
let express = require('express');
let bodyParser = require('body-parser');
let app = express();
// Instantiate Pusher
let pusher = new Pusher(require('./config.js'));
// -------------------------------------------------------
// Load express middlewares
// -------------------------------------------------------
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// -------------------------------------------------------
// Simulate multiple changes to the visitor count value,
// this way the chart will always update with different
// values.
// -------------------------------------------------------
app.post('/simulate', (req, res, next) => {
var loopCount = 0;
let sendToPusher = setInterval(function(){
let count = Math.floor((Math.random() * (100 - 1)) + 1)
pusher.trigger('visitorsCount', 'addNumber', {count:count})
loopCount++;
if (loopCount === 20) {
clearInterval(sendToPusher);
}
}, 2000);
res.json({success: 200})
})
// Handle index
app.get('/', (req, res) => {
res.json("It works!");
});
// Handle 404's
app.use((req, res, next) => {
let err = new Error('Not Found');
err.status = 404;
next(err);
});
// -------------------------------------------------------
// Serve application
// -------------------------------------------------------
app.listen(4000, function(){
console.log('App listening on port 4000!')
});
上面的文件是一個用JavaScript編寫的簡單的Express應用程序。我們實例化所有我們需要的包，並使用我們即將創建的配置文件來配置推送器。然後我們創建一條路線，/simulate並在此路線中觸發頻道中的addNumber事件visitorCount。這是應用程序正在偵聽的同一頻道和事件。
為了使它更簡單一些，我們使用setInterval每2000毫秒向Pusher後端發送隨機訪問者數量。循環20次後，循環停止。這應該足以測試我們的應用程序。
創建下一個文件config.js：
module.exports = {
appId: 'PUSHER_APP_ID',
key: 'PUSHER_APP_KEY',
secret: 'PUSHER_APP_SECRET',
cluster: 'PUSHER_APP_CLUSTER',
};
用PUSHER_APP_*您自己的Pusher應用程序中的憑證替換密鑰。
下一個也是最後一個文件是package.json：
{
"main": "index.js",
"dependencies": {
"body-parser": "^1.16.0",
"express": "^4.14.1",
"pusher": "^1.5.1"
}
}
現在打開終端並連接cd到Web應用程序目錄的根目錄並運行以下命令以分別安裝NPM依賴項和運行應用程序：
$ npm install
$ node index.js
安裝完成並且應用程序準備就緒後，您應該看到以下輸出：
測試應用程序
一旦運行了本地節點Web服務器，您需要進行一些更改，以便您的應用程序可以與本地Web服務器通信。在該info.plist文件中，進行以下更改：
通過這一改變，您可以構建並運行您的應用程序，並且可以直接與您的本地Web應用程序通話。
結論
本文向您展示瞭如何結合Pusher和Charts包創建實時iOS圖表應用程序。還有許多其他圖表類型可以使用該包創建，但為簡潔起見，我們已經完成了最簡單的操作。您可以瀏覽其他圖表類型，甚至可以為每個請求傳遞多個數據點。
如果您有任何問題，反饋或更正，可以將它們發佈在下面的評論部分。
上面的分享的源代碼需要的朋友可私信我“源碼”領取。
閱讀更多 浪小九 的文章
