サーバーと同期してリアルタイムに更新する画面を実装する

サーバーと同期してリアルタイムに更新する画面を実装する iOSDC2022 @rizumi

Cluster, Inc. All Rights Reserved. 2 自己紹介 Ryo Izumi @rizumi_jp
クラスター株式会社 Software Engineer

5 アプリの画面更新

Cluster, Inc. All Rights Reserved. 6 アプリの画面更新 DB API Server
Client • Serverからデータを取得して表示する画面

Client • Serverからデータを取得して表示する画面 fetch

Client response • Serverからデータを取得して表示する画面 fetch

Client response Update • Serverからデータを取得して表示する画面 fetch

Client 反映したい response Update • Serverからデータを取得して表示する画面 fetch

Cluster, Inc. All Rights Reserved. 11 画面更新のパターン • ユーザーの明示的なアクション ◦
PullToRefreshや更新ボタン • 自動的な更新 ◦ serverの更新を検知してリアルタイムな更新処理

Cluster, Inc. All Rights Reserved. 12 画面更新のパターン • ユーザーの明示的なアクション ◦
PullToRefreshや更新ボタン • 自動的な更新 ◦ serverの更新を検知してリアルタイムな更新処理

Cluster, Inc. All Rights Reserved. 13 ※リアルタイムの定義 • 本セッションでの ”リアルタイム”は
基本的に soft real-timeの事を意味します ※ soft real-time: 時間内に処理できなくても品質は下がるが価値は0にならない

Cluster, Inc. All Rights Reserved. 14 リアルタイム更新が必要な場合 • ユーザーに情報の更新をいち早く伝えたい場合 ◦
ex. チャット, ユーザーのオンライン状態 • 逆にリアルタイム更新すべきでないケースもある ◦ ex. 商品詳細の説明文など

15 リアルタイム更新の実装例

Cluster, Inc. All Rights Reserved. 16 更新通知の受信方法 1. polling 2.
Push通知 3. Firebase Realtime Database / Cloud Firestore 4. WebSocket

Cluster, Inc. All Rights Reserved. 18 更新方法1. polling let timer
= Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in Task { // 差分があれば画面更新 let data = await self.apiClient.fetch() refreshIfNeeded(data) } }

Cluster, Inc. All Rights Reserved. 19 更新方法1. polling • メリット
◦ 実装がシンプルでAPIも使いまわせる • デメリット ◦ 無駄なAPI通信が発生するのでパフォーマンスが悪い

Cluster, Inc. All Rights Reserved. 22 更新方法2. サイレントPush通知 • Push通知のpayloadにcontent-available:
1を指定 { "aps": { "content-available": 1 }, "data": { "example":"sync-notify" } }

Cluster, Inc. All Rights Reserved. 23 更新方法2. サイレントPush通知 { "aps":
{ "content-available": 1 }, "data": { "example":"sync-notify" } } • Push通知のpayloadにcontent-available: 1を指定任意の値を入れれる

Cluster, Inc. All Rights Reserved. 24 更新方法2. サイレントPush通知 func application(_
application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable: Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) { // サイレントpush受信 // ここで画面に受信通知をする (e.g. NotificationCenter) } • Appdelegateで受信時の処理をハンドリング

Cluster, Inc. All Rights Reserved. 25 更新方法2. サイレントPush通知 • メリット
◦ 既存のPushの仕組みを使いまわせる • デメリット ◦ 他Platformへの流用が難しい ◦ ユーザー設定でOFFにできてしまう ◦ Push通知を対応していない場合は対応が必要

Cluster, Inc. All Rights Reserved. 27 更新方法3. Firebase Realtime Database
/ Cloud Firestore

Cluster, Inc. All Rights Reserved. 28 import FirebaseDatabase ... //
Realtime Database let ref = Database.database().reference() ref.child(“users”).observe(.value, with: { snapshot in let value = snapshot.value // 画面更新 refresh(value) }) 更新方法3. Firebase Realtime Database / Cloud Firestore

Cluster, Inc. All Rights Reserved. 29 • メリット ◦ client実装がシンプル
◦ インフラのメンテナンスコスト低い ▪ スケールなどをFirebaseに頼れる • デメリット ◦ FirebaseにDBが依存更新方法3. Firebase Realtime Database / Cloud Firestore

Cluster, Inc. All Rights Reserved. 31 更新方法4. WebSocket Client Server
Update通知 Connection Close

Cluster, Inc. All Rights Reserved. 32 更新方法4. WebSocket class WebSocketEngine:
NSObject, URLSessionWebSocketDelegate { private var task: URLSessionWebSocketTask? func connect() { let session = URLSession(configuration: .default, delegate: self, delegateQueue: nil) task = session.webSocketTask(with: .init(string: "ws://example")!) doReceive() task?.resume() } func urlSession(_ session: URLSession, webSocketTask: URLSessionWebSocketTask, didOpenWithProtocol protocol: String?) { // connected } }

Cluster, Inc. All Rights Reserved. 33 更新方法4. WebSocket private func
doReceive() { task?.receive { [weak self] (result) in switch result { case .success(let message): switch message { case .string(let string): // Receive string case .data(let data): // Receive data @unknown default: // error } self?.doReceive() case .failure(let error): // error } } }

Cluster, Inc. All Rights Reserved. 34 更新方法4. WebSocket func disconnect()
{ task?.cancel(with: .normalClosure, reason: nil) } func urlSession(_ session: URLSession, webSocketTask: URLSessionWebSocketTask, didCloseWith closeCode: URLSessionWebSocketTask.CloseCode, reason: Data?) { // disconnected }

Cluster, Inc. All Rights Reserved. 35 更新方法4. WebSocket SwiftのWebSocket library
• Starscream ◦ https://github.com/daltoniam/Starscream • socket.io-client-swift ◦ https://github.com/socketio/socket.io-client-swift • SwiftWebSocket ◦ https://github.com/tidwall/SwiftWebSocket

Cluster, Inc. All Rights Reserved. 36 更新方法4. WebSocket • メリット
◦ 拡張性/自由度が高い ▪ 他Platformでも同様の仕組みが使いまわせる • デメリット ◦ client/server共に実装が大変になりがち

Cluster, Inc. All Rights Reserved. 37 各手法のpros / cons比較メリット
デメリット polling シンプルな実装パフォーマンスが良くない silent push Pushの実装を使いまわせる拡張性が低い Firebase SDKを使った実装がシンプル mBaasの基盤で安定 Firebaseが使えない環境だと利用できない WebSocket 自由度 / 拡張性が高い実装やメンテナンスコストが高い • 要件 / 仕様と併せて最適なものを選ぶと良い

38 clusterでの実例

Cluster, Inc. All Rights Reserved. 41 更新通知はWebSocketを採用 • 多くのPlatformをカバーできる ◦
iOS / Android / Windows / Mac / Quest2 • inroom(Unity)内の通知にもWebSocketを利用 • FirebaseのDBを利用していない

Cluster, Inc. All Rights Reserved. 42 接続 / 切断の管理 RealtimeSync
Manager Auth API WebSocket token

Manager Auth API WebSocket token connect(token)

Manager Auth API WebSocket token connect(token) 以下の状態をRealtimeSyncManagerが管理状態に変化がある度に接続(or 切断)処理を行う・Login状態・inroom / outroom ・Foreground / Background ・エラーなどでの切断

Protocol Buffers Revisions 初回接続時 or データ更新時に送られてくる struct Revisions { var messageRevision: UInt64 var friendRevision: UInt64 var fooRevision: UInt64 var barRevision: UInt64 }

Protocol Buffers Revisions final class RealtimeSyncManager { var revisions: Observable<Revisions> { revisionsRelay.asObservable() } private var revisionsRelay = PublishRelay<Revisions>() // WebSocketからデータ受信毎に呼ぶ private func doReceive(_ data: Data) { // protobufをdecode guard let revisions = try? Revisions(contiguousBytes: data) else { return } revisionsRelay.accept(revisions) } }

FriendSync subscribe Protocol Buffers Revisions final class FriendSync { private var currentRevision: UInt64 private let bag = DisposeBag() init(realtimeSyncManager: RealtimeSyncManager, repository: FriendRepository) { realtimeSyncManager.revisions .subscribe(onNext: { [weak self] revisions in guard let self = self else { return } if self.currentRevision != revisions.friendRevision { self.currentRevision = revisions.friendRevision repository.fetchRequest() } }) .disposed(by: bag) } } Revisionの更新チェック

FriendSync subscribe Revisionの更新チェック Protocol Buffers Revisions FriendAPI Friend Repository fetch Friend ViewModel FriendView subscribe data bind 更新をrequest

FriendSync subscribe Revisionの更新チェック Protocol Buffers Revisions FriendAPI Friend Repository fetch Friend ViewModel FriendView subscribe data bind 更新をrequest 各画面共通の設計

Sync subscribe Revisionの更新チェック Protocol Buffers Revisions API Repository fetch ViewModel View subscribe data bind 更新をrequest 各画面共通の設計新規でリアルタイム更新を追加する場合この部分を新設するだけでOK

52 UI更新時に考慮するポイント

Cluster, Inc. All Rights Reserved. 54 差分更新を使う • DiffableDataSources var
snapshot = NSDiffableDataSourceSnapshot<Section, Item>() snapshot.appendSections([.section]) snapshot.appendItems(items) dataSource.apply(snapshot)

56 まとめ

58 最後に

サーバーと同期してリアルタイムに更新する画面を実装する

サーバーと同期してリアルタイムに更新する画面を実装する

More Decks by izumi

Other Decks in Programming

Featured

Transcript