SwiftUI 使用套接字有效負載更新列表

Question

我是 SwiftUI 的新手，不知道應該如何構建我的應用程序。

我正在構建一個股票應用程序，它將顯示股票列表，我想使用 SocketIO 連接到我的后端，以實時更新股票列表。

這是我到目前為止所擁有的：

import Combine
import SocketIO
import SwiftUI

struct RealtimePriceResponse: Codable {
    let quotes: [RealtimeQuote]
}

struct RealtimeQuote: Codable {
    let ticker, last, previousClose: String?
}


class SocketConnection: ObservableObject {
    @Published var realtimeQuotes: [RealtimeQuote] = []
    @Published var isConnected: Bool = false
    
    let socketManager = SocketManager(socketURL: URL(string: "https://api.myapp.com")!, config: [.log(true), .compress])
    var socket: SocketIO.SocketIOClient

    init(tickers: [String]) {
        socket = socketManager.defaultSocket
        socket.connect()
        
        socket.on(clientEvent: .connect) { data, ack in
            self.isConnected = true
            print("Socket has connected")
            self.socket.emit("priceListen", ["userId": "121212", "symbols": tickers])
        }

        socket.on("userid") { [unowned self]  data, ack in
            let decoder = JSONDecoder()
            let jsonData = try? JSONSerialization.data(withJSONObject: data[0])
            let priceUpdates = try? decoder.decode(RealtimePriceResponse.self, from: jsonData!)
            if let decoded = priceUpdates {
                self.realtimeQuotes = decoded.quotes
                print("Real-time Prices: \(String(describing: decoded))")
            }
        }
        
        socket.on(clientEvent: .disconnect) { data, ack in
            self.isConnected = false
            print("Socket has disconnected")
        }
    }
}

struct StocksView: View {
    var tickers: [String] = ["TSLA", "SNAP", "DIS", "AMZN"]
    
    @ObservedObject var socket: SocketConnection
    
    init() {
        self.socket = SocketConnection(tickers: self.tickers)
    }
    
    var body: some View {
        return List(tickers, id: \.self) { ticker in
            Stock(ticker: ticker, quote: self.socket.realtimeQuotes.first(where: { $0.ticker == ticker }) ?? RealtimeQuote?.none)
        }
    }
}

struct Stock: View {
    var ticker: String
    var price: String
    
    init(ticker: String, quote: RealtimeQuote?) {
        self.ticker = ticker
        if let quote = quote {
            price = quote.last!
        } else {
            self.price = "--.--"
        }
    }
    
    var body: some View {
        HStack {
            Text(ticker).bold()
            Spacer()
            Text("$\(price)")
        }
    }
}

這不像我期望的那樣工作。 我的觀點應該堅持這個 SocketConnection class 的實例嗎？ 這似乎有風險，而且不是最好的方法。 另外，我應該如何只更新 HStack 中保存價格的 Text() 視圖？

Answer 1

制作SocketConnection和ObservableObject以及它的實例和ObservedObject 。

class SocketConnection: ObservableObject {
    //...
}
//...
struct StocksView: View {
    //...
    @ObservedObject var homeSocket: SocketConnection
    //...
}