Implementing Real-Time Features with WebSockets in Mobile Apps

Real-time features aren't a nice-to-have anymore—they're expected. Users want live updates, instant notifications, and collaborative features that just work. After implementing WebSocket-based real-time systems in eight production apps this year, I've learned what separates amateur implementations from production-ready solutions.

Let me show you how to build real-time features that actually scale, with actual code and performance data.

WebSockets vs Alternatives

First, let's understand when to use WebSockets:

WebSockets win for: Chat, collaboration, live dashboards, gaming, trading platforms.

Implementation in Flutter

Basic WebSocket Connection

import 'package:web_socket_channel/web_socket_channel.dart';

class WebSocketService {
  WebSocketChannel? _channel;
  StreamController<dynamic> _messageController = StreamController.broadcast();
  bool _isConnected = false;
  Timer? _reconnectTimer;
  int _reconnectAttempts = 0;

  // Public stream for messages
  Stream get messages => _messageController.stream;
  bool get isConnected => _isConnected;

  Future<void> connect(String url) async {
    try {
      _channel = WebSocketChannel.connect(
        Uri.parse(url),
        protocols: ['chat', 'superchat'], // Optional
      );

      _isConnected = true;
      _reconnectAttempts = 0;

      // Listen to messages
      _channel!.stream.listen(
        (message) {
          _messageController.add(message);
        },
        onError: (error) {
          print('WebSocket error: $error');
          _handleDisconnect();
        },
        onDone: () {
          print('WebSocket closed');
          _handleDisconnect();
        },
      );

    } catch (e) {
      print('Connection failed: $e');
      _handleDisconnect();
    }
  }

  void send(dynamic message) {
    if (_isConnected && _channel != null) {
      _channel!.sink.add(message);
    }
  }

  void _handleDisconnect() {
    _isConnected = false;
    _attemptReconnect();
  }

  void _attemptReconnect() {
    _reconnectAttempts++;
    final delay = Duration(
      seconds: min(30, pow(2, _reconnectAttempts).toInt())
    );

    _reconnectTimer = Timer(delay, () {
      connect(_channel!.innerWebSocket!.url.toString());
    });
  }

  void dispose() {
    _reconnectTimer?.cancel();
    _channel?.sink.close();
    _messageController.close();
  }
}

Production-Ready WebSocket Manager

class RobustWebSocketManager {
  WebSocketChannel? _channel;
  final String url;
  final Duration heartbeatInterval;
  final Duration connectionTimeout;
  final int maxReconnectAttempts;

  Timer? _heartbeatTimer;
  Timer? _reconnectTimer;
  bool _isConnected = false;
  int _reconnectAttempts = 0;
  DateTime? _lastMessageTime;

  // Message queue for offline messages
  final Queue<String> _messageQueue = Queue();

  RobustWebSocketManager({
    required this.url,
    this.heartbeatInterval = const Duration(seconds: 30),
    this.connectionTimeout = const Duration(seconds: 10),
    this.maxReconnectAttempts = 5,
  });

  Future<void> connect() async {
    try {
      _channel = WebSocketChannel.connect(
        Uri.parse(url),
      ).timeout(connectionTimeout);

      _isConnected = true;
      _reconnectAttempts = 0;
      _startHeartbeat();
      _processMessageQueue();

      _channel!.stream.listen(
        _handleMessage,
        onError: _handleError,
        onDone: _handleClose,
      );

    } catch (e) {
      _handleError(e);
    }
  }

  void _startHeartbeat() {
    _heartbeatTimer?.cancel();
    _heartbeatTimer = Timer.periodic(heartbeatInterval, (_) {
      send(jsonEncode({'type': 'ping', 'timestamp': DateTime.now().toIso8601String()}));

      // Check if server is responsive
      if (_lastMessageTime != null) {
        final timeSinceLastMessage = DateTime.now().difference(_lastMessageTime!);
        if (timeSinceLastMessage > heartbeatInterval * 2) {
          _handleDisconnect();
        }
      }
    });
  }

  void _handleMessage(dynamic message) {
    _lastMessageTime = DateTime.now();

    try {
      final data = jsonDecode(message);

      // Handle pong
      if (data['type'] == 'pong') {
        return;
      }

      // Emit to listeners
      _messageController.add(data);

    } catch (e) {
      print('Error parsing message: $e');
    }
  }

  void send(String message) {
    if (_isConnected && _channel != null) {
      _channel!.sink.add(message);
    } else {
      // Queue for later
      _messageQueue.add(message);
    }
  }

  void _processMessageQueue() {
    while (_messageQueue.isNotEmpty && _isConnected) {
      final message = _messageQueue.removeFirst();
      _channel!.sink.add(message);
    }
  }
}

Real-World Chat Implementation

class ChatService {
  final RobustWebSocketManager _ws;
  final StreamController<ChatMessage> _messagesController = 
    StreamController.broadcast();

  Stream<ChatMessage> get messages => _messagesController.stream;

  ChatService(String userId) 
    : _ws = RobustWebSocketManager(
        url: 'wss://api.example.com/chat?userId=$userId',
      ) {
    _ws.messages.listen(_handleIncomingMessage);
    _ws.connect();
  }

  void _handleIncomingMessage(dynamic data) {
    switch (data['type']) {
      case 'message':
        _messagesController.add(ChatMessage.fromJson(data));
        break;
      case 'user_typing':
        _handleTypingIndicator(data);
        break;
      case 'message_read':
        _handleReadReceipt(data);
        break;
    }
  }

  void sendMessage(String text, String channelId) {
    final message = {
      'type': 'message',
      'channelId': channelId,
      'text': text,
      'timestamp': DateTime.now().toIso8601String(),
    };

    _ws.send(jsonEncode(message));
  }

  void sendTypingIndicator(String channelId) {
    _ws.send(jsonEncode({
      'type': 'typing',
      'channelId': channelId,
    }));
  }
}

Performance Optimization

Message Batching

class BatchedWebSocket {
  final List<String> _batch = [];
  Timer? _batchTimer;
  final Duration batchInterval = Duration(milliseconds: 100);

  void sendMessage(String message) {
    _batch.add(message);

    _batchTimer?.cancel();
    _batchTimer = Timer(batchInterval, _flushBatch);
  }

  void _flushBatch() {
    if (_batch.isEmpty) return;

    _ws.send(jsonEncode({
      'type': 'batch',
      'messages': _batch,
    }));

    _batch.clear();
  }
}

Performance Comparison

State Synchronization

class SyncedState<T> {
  T _state;
  final WebSocketManager _ws;
  final String stateKey;

  SyncedState(this._state, this._ws, this.stateKey) {
    _ws.messages
      .where((msg) => msg['key'] == stateKey)
      .listen(_handleRemoteUpdate);
  }

  T get state => _state;

  void update(T newState) {
    _state = newState;

    // Send to server
    _ws.send(jsonEncode({
      'type': 'state_update',
      'key': stateKey,
      'value': newState,
      'timestamp': DateTime.now().millisecondsSinceEpoch,
    }));
  }

  void _handleRemoteUpdate(dynamic message) {
    final newState = message['value'] as T;
    final timestamp = message['timestamp'] as int;

    // Only update if newer
    if (timestamp > _lastUpdateTimestamp) {
      _state = newState;
      _lastUpdateTimestamp = timestamp;
      notifyListeners();
    }
  }
}

Scaling Strategies

Connection Management

Error Handling Best Practices

class ResilientWebSocket {
  Future<void> sendWithRetry(
    String message, {
    int maxRetries = 3,
  }) async {
    for (var i = 0; i < maxRetries; i++) {
      try {
        _ws.send(message);
        return;
      } catch (e) {
        if (i == maxRetries - 1) rethrow;
        await Future.delayed(Duration(seconds: pow(2, i).toInt()));
      }
    }
  }
}

Conclusion

WebSockets enable real-time features that users expect in 2025. The key is robust error handling, reconnection logic, and efficient message batching.

Key Takeaways

1. Always implement reconnection with exponential backoff
2. Use heartbeats to detect dead connections
3. Batch messages when possible for better performance
4. Queue offline messages for seamless UX
5. Handle state conflicts with timestamps

Building real-time features? Share your WebSocket experiences!