如何在iOS中構建即時使用者的狀態更新

標籤：程式員   移動編程了   狀態更新   ios   ios開發   

在構建聊天應用程式時，看到朋友的列表和朋友的狀態並不少見。像WhatsApp這樣的應用程式具有此功能，檢查您的朋友的狀態非常有用，並知道在那時向他們發送訊息是否明智。

我們將在一個虛構的iOS聊天應用程式中構建一個類似的功能。我們將使用Pusher為應用程式實現即時功能，以便當有人發布新狀態更新時，您可以即時看到它發生變化。
這裡是我們完成應用程式後的畫面記錄。

要遵循本文，您必須具備以下要求：

• 有關Swift 3的一些知識?
• 有關如何使用Xcode的?知識?
• 基本JavaScript知識-?安裝在您電腦上的NPM和CocoaPods。
• 有關終端的基本知識（命令列）?
• Pusher應用程式（您將需要應用程式的ID，秘密，密鑰和群集）。如果您目前沒有帳戶，請建立一個Pusher帳戶。

我是iOS開發人員，打算深入瞭解這個行業的朋友，可以關注我或私信給我 。
iOS學習交流群：638302184，群裡有系統學習教程和學習路線以及詳細的規劃，希望協助開發人員少走彎路。

準備好我們的項目
要開始前，我們需要建立iOS項目，然後安裝應用程式正常運行所需的一些依賴關係。讓我們開始吧。
在Xcode中設定我們的項目在?您的機器上啟動Xcode並建立一個新項目。建立一個應用程式項目並按照嚮導進行操作，直到到達主要的故事板。一旦你在那裡，退出Xcode。

在您的終端中，cd進入Xcode項目目錄，然後運行以下命令：
$ pod init

這將Podfile在您的應用程式的根部建立一個內部。Podfile是我們將定義Cocoapods依賴關係的地方。在文字編輯器中開啟並替換為以下內容：
platform :ios, ‘8.4‘
target ‘project_name‘ do
use_frameworks!
pod ‘PusherSwift‘, ‘~> 4.0‘
pod ‘Alamofire‘, ‘~> 4.4‘
end

在上面，我們剛剛指定了我們希望CocoaPods安裝到我們的應用程式中的依賴關係。不要忘記用您的實際項目名稱替換project_name。
現在去終端並運行命令：
$ pod install

這應該安裝我們在我們指定的所有依賴和庫Podfile。開啟項目目錄並雙擊目錄中的.xcworkspace檔案以在Xcode中啟動項目工作區。
建立我們的即時iOS應用程式的使用者介面
現在我們已經在Xcode中建立了項目並成功安裝了所有的依賴關係，接下來我們要做的就是建立iOS應用程式的使用者介面。main.storyboard在Xcode中開啟檔案，讓我們開始設計UI。

這是我們在本節末尾想要的：

在畫布中添加一個導航控制器，並將其設定為根視圖控制器。完成此操作後，您需要將TableViewController附件更新到導航控制器。
首先，用Xcode建立一個新類ctrl+n;?類名應該是FriendsViewController，它應該擴充UITableViewController。然後，在main.storyboard檔案中，確保你TableViewController使用它FriendsViewController作為它的自訂類。

配置原型儲存格?
現在我們已經建立了表格視圖控制器，我們需要配置其儲存格以匹配我們試圖實現的目標。
點擊主故事板檔案上的“Prototype Cells”，並使屬性偵測器看起來接近下面的映像。

我們可以做的最後一件事（完全是可選的）是改變我們應用程式的導覽列顏色。讓我們這樣做。
開啟AppDelegate該類並在該application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?)方法中粘貼以下內容：
UINavigationBar.appearance().barTintColor = UIColor(red: 18.0/255.0, green: 140.0/255.0, blue: 126.0/255.0, alpha: 1.0)
UINavigationBar.appearance().tintColor = UIColor.white
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white]

有了這個，你已經完成了為應用程式建立UI，剩下的就是支援它的功能。現在讓我們來做。
建立我們的即時iOS應用程式的功能
對於功能，我們將它分成兩部分。第一部分將著重於添加用於更新狀態的功能，第二部分將著重於即時更新。
建立初始功能：U **** pdate?status?允許開啟FriendsViewController並進行一些修改。第一個修改是將一個更新“狀態”按鈕添加到導覽列的右上方。
在viewDidLoad控制器的方法中，添加下面的代碼：
navigationItem.title = "Friends List"
navigationItem.rightBarButtonItem = UIBarButtonItem(
title: "Status",
style: .plain,
target: self,
action: #selector(showPopup(_:))
)

上面的代碼只需在導覽列中設定控制器的標題，並在導覽列的右側添加一個按鈕。
如果你注意到，在action參數中它指向一個方法，showPopup所以讓我們建立這個方法。將此方法添加到控制器中：
public func showPopup(_ sender: Any) {
let alertController = UIAlertController(
title: "Update your status",
message: "What would you like your status to say?",
preferredStyle: .alert
)

    alertController.addTextField(configurationHandler: {(_ textField: UITextField) -> Void in        textField.placeholder = "Status"    })    alertController.addAction(UIAlertAction(title: "Update", style: .default, handler: {(_ action: UIAlertAction) -> Void in        let status = (alertController.textFields?[0].text)! as String        self.postStatusUpdate(message: status)    }))    alertController.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))    present(alertController, animated: true, completion: nil)}

因此，我們在這裡所做的是，當叫用作業並showPopup調用方法時，應用程式將顯示一個彈出框，要求使用者輸入其狀態。
現在，快顯視窗調用了一個postStatusUpdate在我們的應用程式中不存在的方法。現在讓我們建立這個方法。
在視圖控制器中，添加下面的方法：
public func postStatusUpdate(message: String) {
let params: Parameters = ["username": username, "status": message]

    Alamofire.request(FriendsViewController.API_ENDPOINT + "/status", method: .post, parameters: params).validate().responseJSON { response in        switch response.result {        case .success:            _ = "Updated"        case .failure(let error):            print(error)        }    }}

在這種方法中，我們正在使用該Alamofire庫向端點FriendsViewController.API_ENDPOINT + "/status``"（尚不存在）發出請求。現在，因為我們沒有匯入Alamofire庫，也沒有定義FriendsViewController.API_ENDPOINT我們會得到錯誤。

在視圖控制器的頂部，匯入Alamofire庫：
import ‘Alamofire‘

另外，在類內部，在類定義之後，添加以下內容來聲明API_ENDPOINT哪個將指向遠程HTTP伺服器。
static let API_ENDPOINT = "http://localhost:4000";

我們現在使用的端點是本機伺服器，稍後將在本文中建立。如果您使用遠程伺服器，則需要將此值替換為伺服器的URL。
所以，現在，當您運行應用程式並單擊“狀態”按鈕時，它會彈出一個對話方塊，您可以輸入更新。但是，由於我們尚未建立後端來響應此調用，因此它將失敗並且不會執行任何操作。我們將在後面的文章中談談。
更新預設表視圖控制器方法預設情況下，表視圖控制器?帶有一些方法，我們將迅速更改它們以適合我們的應用程式。
開啟視圖控制器並更新方法numberOfSections。設定傳回值1.這將確保顯示第一個和唯一部分。
接下來，更新tableView(tableView: UITableView, numberOfRowsInSection: section)方法並建立傳回值friends.count。這將確保為friends列表中的每個條目建立適量的行。
要使儲存格顯示每個朋友的詳細資料，請tableView(tableView:UITableView, cellForRowAt indexPath:IndexPath)使用以下代碼更新該方法的內容：
let cell = tableView.dequeueReusableCell(withIdentifier: "friends", for: indexPath)

var status   = friends[indexPath.row]["status"]if status == "" {    status = "User has not updated status!"}cell.detailTextLabel?.textColor = UIColor.graycell.imageView?.image = UIImage(named: "avatar.png")cell.textLabel?.text = friends[indexPath.row]["username"]cell.detailTextLabel?.text = statusreturn cell

上面的代碼只是擷取目前的儲存格，並用狀態，使用者名稱和映像更新所需的儲存格標籤（以防您想添加另一個映像）。
最後，向視圖控制器添加一個新方法：
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 75.0
}

這隻會將表格的行高增加到等於75.0。這將更容易適應儲存格的內容。
使用Pusher為我們的iOS應用程式添加即時更新狀態
現在，在我們使用Pusher添加即時線上狀態更新之前，我們希望添加一些排序的偽朋友列表。
我們將使用Pusher來做朋友列表。我們將通過建立一個不持久的類屬性來實現這一點，並且在這個變數中，我們將儲存任何聯機的人的詳細資料。
添加一個偽朋友列表?在視圖控制器中，添加一些新的屬性：
var friends : [[String:String]] = []
var username : String = ""
var pusher : Pusher!

該friends屬性將儲存所有聯機使用者，該username屬性將為目前使用者儲存一個隨機使用者名稱，並且該pusher屬性將儲存Pusher庫執行個體。
現在，在該viewDidLoad方法中，添加以下代碼：
username = "Anonymous" + String(Int(arc4random_uniform(1000)))

listenForRealtimeEvents()// --- Update online presence at intervals --- //let date = Date().addingTimeInterval(0)let timer = Timer(fireAt: date, interval: 1, target: self, selector: #selector(postOnlinePresence), userInfo: nil, repeats: true)RunLoop.main.add(timer, forMode: RunLoopMode.commonModes)

在第1行，我們只需將該username屬性隨機字串作為使用者名稱。
在第3行，我們調用一個listenForRealtimeEvents還不存在的方法（我們稍後會建立它）。
而在第6 - 8行，我們只是基本上添加了一個迴圈調用postOnlinePresence（還不存在）。這個電話會每秒更新一次您的線上狀態。
listenForRealtimeEvents現在讓我們建立該方法。將下面的代碼添加到視圖控制器：
private func listenForRealtimeEvents() {
pusher = Pusher(key: "PUSHER_KEY", options: PusherClientOptions(host: .cluster("PUSHER_CLUSTER")))

    let channel = pusher.subscribe("new_status")    let _ = channel.bind(eventName: "online", callback: { (data: Any?) -> Void in        if let data = data as? [String: AnyObject] {            let username = data["username"] as! String            let index = self.friends.index(where: { $0["username"] == username })            if username != self.username && index == nil {                self.friends.append(["username": username, "status": "No Status"])                self.tableView.reloadData()            }        }    })    pusher.connect()}

在我們剛剛建立的方法中，我們使用Pusher鍵和應用程式叢集執行個體化了Pusher庫。然後我們訂閱了一個名為new_status的Pusher頻道，並且在該頻道上，我們開始收聽名為online的事件。
在回調中，當事件監聽器被觸發時，我們從事件中擷取使用者名稱。然後，我們檢查在friends匹配列表中是否有使用者名稱。如果沒有，我們將它附加到朋友列表並重新載入表格式資料。
因此，總之，每次有人上線時，都會將名稱附加到朋友列表中，並重新載入表格視圖。
接下來，我們將建立一種postOnlinePresence定期發布目前使用者線上狀態的方法，以便其他人可以將其選中。在視圖控制器中添加下面的代碼：
public func postOnlinePresence() {
let params: Parameters = ["username": username]

    Alamofire.request(FriendsViewController.API_ENDPOINT + "/online", method: .post, parameters: params).validate().responseJSON { response in        switch response.result {        case .success:            _ = "Online"        case .failure(let error):            print(error)        }    }}

上面的代碼只是點擊一個端點，從而將使用者標記為線上。
使用Pusher嚮應用程式添加狀態更新?我們iOS應用程式的最後部分將添加更新的接聽程式，以便每次有人更新其狀態時都會添加更新。
為此，開啟listenForRealtimeEvents方法並在執行個體化推送變數後添加以下內容：
let channel = pusher.subscribe("newstatus")
let = channel.bind(eventName: "update", callback: { (data: Any?) -> Void in
if let data = data as? [String: AnyObject] {
let username = data["username"] as! String

        let status = data["status"] as! String        let index = self.friends.index(where: { $0["username"] == username })        if index != nil {            self.friends[index!]["status"] = status            self.tableView.reloadData()        }    }})

上面的代碼為new_status通道的更新事件建立一個接聽程式。當事件被觸發時，回調會檢查使用者名稱是否是朋友列表的一部分。如果是，則更新該條目的狀態並重新載入表格視圖資料。
現在我們已經成功地將即時功能添加到我們的應用程式中。接下來我們要做的是建立一個後端來協助我們實際觸發可以被我們的iOS應用程式拾取的Pusher事件。
為我們的即時iOS狀態更新應用程式建立NodeJS後端
為Web應用程式建立一個目錄，然後建立一些新檔案：
index.js

// ------------------------------------------------------// Import all required packages and files// ------------------------------------------------------let Pusher     = require(‘pusher‘);let express    = require(‘express‘);let app        = express();let bodyParser = require(‘body-parser‘)let pusher     = new Pusher(require(‘./config.js‘));// ------------------------------------------------------// Set up Express middlewares// ------------------------------------------------------app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false }));// ------------------------------------------------------// Define routes and logic// ------------------------------------------------------app.post(‘/status‘, (req, res, next) => {  let payload = {username: req.body.username, status: req.body.status};  pusher.trigger(‘new_status‘, ‘update‘, payload);  res.json({success: 200});});app.post(‘/online‘, (req, res, next) => {  let payload = {username: req.body.username};  pusher.trigger(‘new_status‘, ‘online‘, payload);  res.json({success: 200});});app.get(‘/‘, (req, res) => {  res.json("It works!");});// ------------------------------------------------------// Catch errors// ------------------------------------------------------app.use((req, res, next) => {    let err = new Error(‘Not Found: ‘);    err.status = 404;    next(err);});// ------------------------------------------------------// Start application// ------------------------------------------------------app.listen(4000, () => console.log(‘App listening on port 4000!‘));

在這個檔案中，我們建立了一個基本的Express應用程式。該應用程式有兩個重要的端點：POST /online和POST /status。它們都會觸發Pusher事件，並且會在我們的iOS應用程式中被接聽程式拾取。
接下來建立config.js檔案：
module.exports = {
appId: ‘PUSHER_ID‘,
key: ‘PUSHER_KEY‘,
secret: ‘PUSHER_SECRET‘,
cluster: ‘PUSHER_CLUSTER‘,
};

這是我們的Pusher設定檔。在這裡，用您的推子儀表板中提供的憑證替換空的字串。
最後，建立一個package.json檔案：
{
"main": "index.js",
"dependencies": {
"body-parser": "^1.16.0",
"express": "^4.14.1",
"pusher": "^1.5.1"
}
}

該檔案包含Node應用程式正常運行所需的所有節點程式包。
最後，在Node應用程式的目錄中，運行下面的命令：
$ npm install && node index.js

第一個命令將安裝所有依賴項，第二個命令將在節點中啟動一個Express伺服器。當您看到訊息“?應用程式在4000連接埠監聽！”?**時，您知道您的後端應用程式已準備就緒。
測試我們的即時狀態更新應用程式
一旦運行了本地節點Web伺服器，您需要進行一些更改，以便您的應用程式可以與本地Web伺服器通訊。在該info.plist檔案中，進行以下更改：

通過這一改變，您可以構建並運行您的應用程式，並且可以直接與您的本地Web應用程式通話。

結論
在文章中，我們已經能夠建立一個具有即時使用者狀態更新的iOS應用程式，類似於WhatsApp目前的應用程式。

如何在iOS中構建即時使用者的狀態更新