SwiftUI 教學：利用 WebSocket 打造一個 Bitcoin 價格即時更新 App

WebSocket 之前是 WebView 支援的 Javascript API。隨著 iOS 13 以及 macOS Catalina 的亮相，Apple 在 URLSession 及 Network 網路框架裡介紹了這個協定。

甚麼時候會用到 WebSocket？

之前為了雙向的資料溝通，我們可以使用輪詢 (Polling)、長時間輪詢 (Long Polling)、或是無聲推播 (Silent Push Notifications)。

然而，進行輪詢會造成很多網路請求，而當中很多請求都不會回傳新資料。另外，傳送太多無聲推播也很沒效率，因為大部分的時間，推播都不是即時收到。

長時間輪詢是當中較好的選擇，它是輪詢的延伸，維持一個有效連結。但它也是缺點，就是每個網路請求都會有一個 HTTP 開銷 (HTTP OverHead)，而且伺服器也需要維護額外的複雜性。

幸好，沒有任何 HTTP 開銷的 WebSockets 協定拯救了我們！

當客戶端傳送一個 WebSockets 連線請求到伺服器時，就會建立一個雙向的串流，來從任何一邊發送及接受訊息（不是網路請求）。

WebSockets 大多用於聊天 App 或是多人連線遊戲上。

我們的目標

• 在接下來的段落中，我們將看到如何在客戶端使用 URLSession 來建構 WebSocket。
• 此外，我們將建立一個基於 SwiftUI 和 Combine 的 iOS App，這個 App 使用 WebSocket 來接收由 API 回傳的即時 Bitcoin 價格更新。

以下是我們在這篇文章的最後應該會達到的成果：

用 URLSession 來建立 WebSockets

利用 URLSessionWebSocketTask，我們就可以輕鬆使用 URLSession 來建立 WebSocket。

以下是建立 WebSocket 連線的五個核心要素。

1. 開啟連線

let urlSession = URLSession(configuration: .default)
let webSocketTask = urlSession.webSocketTask(with: "wss://ws.finnhub.io?token=XYZ")webSocketTask.resume()

2. 以字串或資料形式傳送訊息

webSocketTask.send(.string("Hello")){error in ...}

3. 收到以 Result 型別包裝的訊息

webSocketTask.receive{result in  ...}

4. 中斷連線

webSocketTask.cancel(with: .goingAway, reason: nil)

5. Ping pong

此外，我們可以設定一個 Ping，來驗證及確保連線是正常的，並回傳一個 Pong，就如下面所示：

webSocketTask?.sendPing { (error) in ... }

使用 WebSockets 打造 SwiftUI Bitcoin 價格資訊 App

為了取得加密貨幣資訊的即時更新，我從這個網站製作了一個 API 金鑰，並使用了 WebSocket URL。

－ 螢幕截圖撮取自 Finnhub

以下的 SwiftUI 視圖由一個圖像和一個文本組成，圖象是一個有前景色彩的 SF Symbol 圖示，而文本就顯示即時價格更新。

import SwiftUI
import Combine
import Foundation

struct ContentView: View {

    @ObservedObject var service = WebSocketService()

    var body: some View {

        VStack{

            Image(systemName: "bitcoinsign.circle.fill")
                .font(.system(size: 150))
                .foregroundColor(Color(red: 247 / 255, green: 142 / 255, blue: 26 / 255))
                .padding()

            Text("USD")
                .font(.largeTitle)
                .padding()

            Text(service.priceResult)
                .font(.system(size: 60))

        }.onAppear {
            self.service.connect()
        }
    }
}

priceResult 需要從 ObservableObject 類別，也就是 WebSocketService.swift 發佈，就如下面看到的：

class WebSocketService : ObservableObject {

    private let urlSession = URLSession(configuration: .default)
    private var webSocketTask: URLSessionWebSocketTask?

    private let baseURL = URL(string: "wss://ws.finnhub.io?token=XYZ")!

    let didChange = PassthroughSubject<Void, Never>()
    @Published var price: String = ""

    private var cancellable: AnyCancellable? = nil

    var priceResult: String = "" {
        didSet {
            didChange.send()
        }
    }

    init() {
        cancellable = AnyCancellable($price
            .debounce(for: 0.5, scheduler: DispatchQueue.main)
            .removeDuplicates()
            .assign(to: \.priceResult, on: self))

    }
}

在上面的程式碼中，我們定義了一些屬性，並在 init 方法裡設定了一個訂閱。你需要將 XYZ 換成你自己製作的 API 金鑰。

在 Publisher 上使用的運算子 (Operator) 非常重要。Debounce 是用來減緩即時更新的，而 removeDuplicates 就僅是用來傳送與先前數值不同的更新。

為了更新 SwiftUI 視圖，當 priceResult 屬性被 Combine 訂閱更新時，didChange.send() 會被觸發。

構成 WebSocket URLSession 的 WebSocketService 類別，其剩餘的部分就在下面：

class WebSocketService : ObservableObject {

func connect() {

        stop()
        webSocketTask = urlSession.webSocketTask(with: baseURL)
        webSocketTask?.resume()

        sendMessage()
        receiveMessage()
    }

    func stop() {
        webSocketTask?.cancel(with: .goingAway, reason: nil)
    }

    private func sendMessage()
    {
        let string = "{\"type\":\"subscribe\",\"symbol\":\"BINANCE:BTCUSDT\"}"

        let message = URLSessionWebSocketTask.Message.string(string)
        webSocketTask?.send(message) { error in
            if let error = error {
                print("WebSocket couldn’t send message because: \(error)")
            }
        }
    }

    private func receiveMessage() {
        webSocketTask?.receive {[weak self] result in

            switch result {
            case .failure(let error):
                print("Error in receiving message: \(error)")
            case .success(.string(let str)):

                do {
                    let decoder = JSONDecoder()
                    let result = try decoder.decode(APIResponse.self, from: Data(str.utf8))
                    DispatchQueue.main.async{
                        self?.price = "\(result.data[0].p)"
                    }

                } catch  {
                    print("error is \(error.localizedDescription)")
                }

                self?.receiveMessage()

            default:
                print("default")
            }
        }
    }
}

下面的 Struct 模型是用來解譯 API 的回應資料的：

struct APIResponse: Codable {
    var data: [PriceData]
    var type : String

    private enum CodingKeys: String, CodingKey {
        case data, type
    }
}
struct PriceData: Codable{

    public var p: Float

    private enum CodingKeys: String, CodingKey {
        case p
    }
}

當 App 在 watchOS 模擬器上 Build 時，會有以下結果：

總結

在上文的即時 Bitcoin 價格更新實作中，我們看到了 Combine 運算子在控制 SwiftUI 資料流的能力。

WebSocket 在傳送小量的訊息方面十分理想，資料傳輸相當快速。

你可以在 GitHub 儲存庫 取得上面 App 的完整程式碼。

以上就是本次教學內容，非常感謝你的閱讀。

特別鳴謝 Zack Shapiro。