Real-Time Data with WebSockets & GraphQL Subscriptions in Android, iOS, and Flutter

🚀 1. Real-Time Architecture Overview

• WebSocket: Full-duplex TCP channel; binary or text frames; minimal headers.
• GraphQL Subscription: Protocol on top of WebSockets (or Server-Sent Events) delivering typed payloads.
• Back-pressure: Clients acknowledge or drop messages based on queue size.

🤖 2. Android Implementation (Kotlin + OkHttp)

val request = Request.Builder().url("wss://api.example.com/ws").build()
val ws = OkHttpClient().newWebSocket(request, object : WebSocketListener() {
  override fun onMessage(webSocket: WebSocket, text: String) {
      viewModelScope.launch { _events.emit(parseJson(text)) }
  }
})        

• Reconnect via ExponentialBackoffWebSocketListener.
• Apollo Kotlin 4 supports subscription { newMessage { id text } } with Flow API.

🍏 3. iOS Implementation (Swift + URLSessionWebSocketTask)

let task = URLSession.shared.webSocketTask(with: URL(string: "wss://api.example.com/ws")!)
func receive() {
  task.receive { result in
    if case .success(.string(let text)) = result {
      handle(json: text)
    }
    receive() // loop
  }
}        

• Combine publishers for reactive streams.
• Apollo iOS: GraphQLSubscription with WebSocketTransport.

🕊️ 4. Flutter Implementation (Dart + web_socket_channel & graphql_flutter)

final channel = IOWebSocketChannel.connect('wss://api.example.com/ws');
channel.stream.listen((data) => handle(data));        

• GraphQL: GraphQLClient(link: WebSocketLink(url)) + client.subscribe()
• Use StreamBuilder to rebuild UI on events.

📊 5. Comparison Table:

💡 6. Best Practices & Performance Tips

• Use Ping/Pong frames to detect stale connections.
• Serialize writes via coroutine/DispatchQueue to avoid race conditions.
• Batch UI updates with debounce(16 ms) to prevent jank.
• Secure channels: wss:// + JWT/headers; rotate tokens gracefully.
• Test under network link conditioner; handle background disconnects.

🔗 Reference Links:

• https://square.github.io/okhttp/4.x/websockets
• https://www.apollographql.com/docs/kotlin/subscriptions
• https://developer.apple.com/documentation/foundation/urlsessionwebsockettask
• https://pub.dev/packages/graphql_flutter

🏷️ Hashtags: #realtimedata #websockets #graphql #androiddev #iosdev #flutter #mobilearchitecture #livedata