WebSockets et Communication en Temps Réel avec Flutter

import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:web_socket_channel/web_socket_channel.dart';

// Événements
abstract class WebSocketEvent {}

class WebSocketConnect extends WebSocketEvent {
  final String url;
  WebSocketConnect(this.url);
}

class WebSocketSendMessage extends WebSocketEvent {
  final dynamic message;
  WebSocketSendMessage(this.message);
}

class WebSocketDisconnect extends WebSocketEvent {}

// États
abstract class WebSocketState {}

class WebSocketInitial extends WebSocketState {}

class WebSocketConnecting extends WebSocketState {}

class WebSocketConnected extends WebSocketState {}

class WebSocketDisconnected extends WebSocketState {}

class WebSocketMessageReceived extends WebSocketState {
  final dynamic message;
  WebSocketMessageReceived(this.message);
}

class WebSocketError extends WebSocketState {
  final String error;
  WebSocketError(this.error);
}

// BLoC
class WebSocketBloc extends Bloc {
  WebSocketChannel? _channel;
  StreamSubscription? _subscription;

  WebSocketBloc() : super(WebSocketInitial());

  @override
  Stream mapEventToState(WebSocketEvent event) async* {
    if (event is WebSocketConnect) {
      yield* _mapConnectToState(event);
    } else if (event is WebSocketSendMessage) {
      yield* _mapSendMessageToState(event);
    } else if (event is WebSocketDisconnect) {
      yield* _mapDisconnectToState();
    }
  }

  Stream _mapConnectToState(WebSocketConnect event) async* {
    yield WebSocketConnecting();
    
    try {
      _channel = IOWebSocketChannel.connect(event.url);
      
      _subscription = _channel!.stream.listen(
        (message) => add(WebSocketMessageReceived(message)),
        onError: (error) => add(WebSocketError(error.toString())),
        onDone: () => add(WebSocketDisconnect()),
      );
      
      yield WebSocketConnected();
    } catch (e) {
      yield WebSocketError('Erreur de connexion: $e');
    }
  }

  Stream _mapSendMessageToState(WebSocketSendMessage event) async* {
    if (_channel != null) {
      _channel!.sink.add(event.message);
    }
  }

  Stream _mapDisconnectToState() async* {
    await _subscription?.cancel();
    await _channel?.sink.close();
    _channel = null;
    _subscription = null;
    
    yield WebSocketDisconnected();
  }

  @override
  Future close() {
    _subscription?.cancel();
    _channel?.sink.close();
    return super.close();
  }
}

import 'package:flutter/foundation.dart';
import 'package:web_socket_channel/web_socket_channel.dart';

class WebSocketProvider with ChangeNotifier {
  WebSocketChannel? _channel;
  bool _isConnected = false;
  List _messages = [];

  bool get isConnected => _isConnected;
  List get messages => _messages;

  // Connexion au serveur WebSocket
  Future connect(String url) async {
    try {
      _channel = IOWebSocketChannel.connect(url);
      _isConnected = true;
      
      _channel!.stream.listen(
        (message) {
          _messages.add(message);
          notifyListeners();
        },
        onError: (error) {
          _isConnected = false;
          notifyListeners();
        },
        onDone: () {
          _isConnected = false;
          notifyListeners();
        },
      );
      
      notifyListeners();
    } catch (e) {
      _isConnected = false;
      notifyListeners();
      throw Exception('Erreur de connexion WebSocket: $e');
    }
  }

  // Envoi d'un message
  void sendMessage(dynamic message) {
    if (_isConnected && _channel != null) {
      _channel!.sink.add(message);
    }
  }

  // Déconnexion
  void disconnect() {
    _channel?.sink.close();
    _channel = null;
    _isConnected = false;
    notifyListeners();
  }

  @override
  void dispose() {
    disconnect();
    super.dispose();
  }
}

// Modèle de message
class ChatMessage {
  final String id;
  final String sender;
  final String text;
  final DateTime timestamp;

  ChatMessage({
    required this.id,
    required this.sender,
    required this.text,
    required this.timestamp,
  });

  factory ChatMessage.fromJson(Map json) {
    return ChatMessage(
      id: json['id'],
      sender: json['sender'],
      text: json['text'],
      timestamp: DateTime.parse(json['timestamp']),
    );
  }

  Map toJson() {
    return {
      'id': id,
      'sender': sender,
      'text': text,
      'timestamp': timestamp.toIso8601String(),
    };
  }
}

// Service de chat WebSocket
class ChatWebSocketService {
  final WebSocketChannel channel;
  final ValueChanged onMessageReceived;
  final VoidCallback onConnected;
  final ValueChanged onError;

  ChatWebSocketService({
    required this.channel,
    required this.onMessageReceived,
    required this.onConnected,
    required this.onError,
  }) {
    channel.stream.listen(
      (message) {
        try {
          final data = json.decode(message);
          final chatMessage = ChatMessage.fromJson(data);
          onMessageReceived(chatMessage);
        } catch (e) {
          onError('Erreur de parsing du message: $e');
        }
      },
      onError: (error) => onError('Erreur WebSocket: $error'),
      onDone: () => onError('Connexion WebSocket fermée'),
    );
  }

  void sendMessage(ChatMessage message) {
    final jsonMessage = json.encode(message.toJson());
    channel.sink.add(jsonMessage);
  }

  void dispose() {
    channel.sink.close();
  }
}

// UI pour l'application de chat
class ChatScreen extends StatefulWidget {
  final String username;

  const ChatScreen({Key? key, required this.username}) : super(key: key);

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State {
  final TextEditingController _messageController = TextEditingController();
  final List _messages = [];
  late ChatWebSocketService _chatService;

  @override
  void initState() {
    super.initState();
    _connectToChat();
  }

  void _connectToChat() {
    final channel = IOWebSocketChannel.connect('ws://your-chat-server.com/chat');
    
    _chatService = ChatWebSocketService(
      channel: channel,
      onMessageReceived: _handleMessageReceived,
      onConnected: () => print('Connecté au chat'),
      onError: _handleError,
    );
  }

  void _handleMessageReceived(ChatMessage message) {
    setState(() {
      _messages.add(message);
    });
  }

  void _handleError(String error) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(error)),
    );
  }

  void _sendMessage() {
    if (_messageController.text.isNotEmpty) {
      final message = ChatMessage(
        id: DateTime.now().millisecondsSinceEpoch.toString(),
        sender: widget.username,
        text: _messageController.text,
        timestamp: DateTime.now(),
      );
      
      _chatService.sendMessage(message);
      _messageController.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Chat - ${widget.username}')),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (context, index) {
                final message = _messages[index];
                return ListTile(
                  title: Text(message.sender),
                  subtitle: Text(message.text),
                  trailing: Text(
                    DateFormat('HH:mm').format(message.timestamp),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _messageController,
                    decoration: InputDecoration(
                      hintText: 'Tapez votre message...',
                    ),
                    onSubmitted: (_) => _sendMessage(),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _chatService.dispose();
    _messageController.dispose();
    super.dispose();
  }
}

class RealtimeDashboardService {
  final WebSocketChannel channel;
  final ValueChanged> onDataUpdate;
  final VoidCallback onConnected;
  final ValueChanged onError;

  RealtimeDashboardService({
    required this.channel,
    required this.onDataUpdate,
    required this.onConnected,
    required this.onError,
  }) {
    channel.stream.listen(
      (data) {
        try {
          final jsonData = json.decode(data);
          onDataUpdate(jsonData);
        } catch (e) {
          onError('Erreur de parsing des données: $e');
        }
      },
      onError: (error) => onError('Erreur WebSocket: $error'),
      onDone: () => onError('Connexion WebSocket fermée'),
    );
  }

  void requestData(String type) {
    final request = json.encode({'type': 'request', 'dataType': type});
    channel.sink.add(request);
  }

  void dispose() {
    channel.sink.close();
  }
}

class RealtimeDataCard extends StatelessWidget {
  final String title;
  final dynamic value;
  final Color color;

  const RealtimeDataCard({
    Key? key,
    required this.title,
    required this.value,
    this.color = Colors.blue,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      color: color,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text(
              title,
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            SizedBox(height: 8),
            Text(
              value.toString(),
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class DashboardScreen extends StatefulWidget {
  @override
  _DashboardScreenState createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State {
  final Map _data = {};
  late RealtimeDashboardService _dashboardService;

  @override
  void initState() {
    super.initState();
    _connectToDashboard();
  }

  void _connectToDashboard() {
    final channel = IOWebSocketChannel.connect(
      'ws://your-dashboard-server.com/dashboard',
    );
    
    _dashboardService = RealtimeDashboardService(
      channel: channel,
      onDataUpdate: _handleDataUpdate,
      onConnected: () {
        // Demander les données initiales
        _dashboardService.requestData('all');
      },
      onError: _handleError,
    );
  }

  void _handleDataUpdate(Map newData) {
    setState(() {
      _data.addAll(newData);
    });
  }

  void _handleError(String error) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(error)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tableau de bord en temps réel')),
      body: GridView.count(
        crossAxisCount: 2,
        children: [
          RealtimeDataCard(
            title: 'Utilisateurs en ligne',
            value: _data['onlineUsers'] ?? 0,
            color: Colors.green,
          ),
          RealtimeDataCard(
            title: 'Commandes aujourd\'hui',
            value: _data['todayOrders'] ?? 0,
            color: Colors.blue,
          ),
          RealtimeDataCard(
            title: 'Revenu aujourd\'hui',
            value: '€${_data['todayRevenue'] ?? 0}',
            color: Colors.purple,
          ),
          RealtimeDataCard(
            title: 'Taux de conversion',
            value: '${_data['conversionRate'] ?? 0}%',
            color: Colors.orange,
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _dashboardService.requestData('all'),
        child: Icon(Icons.refresh),
      ),
    );
  }

  @override
  void dispose() {
    _dashboard_service.dispose();
    super.dispose();
  }
}

• Créez une application qui affiche des notifications en temps réel en utilisant WebSockets.
• Fonctionnalités:
• Connexion à un serveur WebSocket de notifications
• Affichage des notifications en temps réel
• Marquer les notifications comme lues
• Historique des notifications

• Développez un tableau de bord qui affiche les prix des cryptomonnaies en temps réel.
• Fonctionnalités:
• Connexion à une API WebSocket de prix de cryptomonnaies
• Affichage des prix en temps réel avec graphiques
• Alertes de prix personnalisées
• Portfolio de suivi

• Créez un jeu multi-joueur simple utilisant WebSockets pour la synchronisation.
• Fonctionnalités:
• Connexion à un serveur de jeu WebSocket
• Salles de jeu multi-joueurs
• Synchronisation en temps réel des positions des joueurs
• Chat intégré pour les joueurs