Conectar una Aplicación Flutter a un WebSocket

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos conectar una APP Flutter a un WebSocket de forma rápida y simple.

Paso 1: Configuración del Proyecto Flutter

1. Crea un nuevo proyecto Flutter utilizando el siguiente comando en tu terminal:

   flutter create mi_app

Reemplaza «mi_app» con el nombre que desees para tu proyecto.

Usaremos la libreria web_socket_channel: https://pub.dev/packages/web_socket_channel

Para añadir la dependencia pondremos:

flutter pub add web_socket_channel

Ejecuta flutter pub get para instalar las dependencias.

Configuración del Socket:

Crea el archivo llamado websocket_service.dart

import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:web_socket_channel/status.dart' as status;

class WebSocketService {
  late WebSocketChannel _channel;

  WebSocketService(Uri wsUrl) {
    _channel = WebSocketChannel.connect(wsUrl);
    _initWebSocket();
  }

  WebSocketChannel get channel => _channel;

  void _initWebSocket() async {
    await _channel.sink.done;
    print('WebSocket cerrado con código: ${_channel.closeCode}');
  }

  void sendMessage(String message) {
    _channel.sink.add(message);
  }

  void closeConnection() {
    _channel.sink.close(status.goingAway);
  }
}

Configuración de la Interfaz de Usuario Flutter

Reemplaza el contenido del archivo lib/main.dart con el siguiente código Flutter:

import 'package:flutter/material.dart';
import 'websocket_service.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final wsUrl = Uri.parse('ws://example.com'); // Reemplaza con la URL de tu servidor WebSocket

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('WebSocket Flutter'),
        ),
        body: MyWebSocketScreen(
          webSocketService: WebSocketService(wsUrl),
        ),
      ),
    );
  }
}

class MyWebSocketScreen extends StatefulWidget {
  final WebSocketService webSocketService;

  MyWebSocketScreen({required this.webSocketService});

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

class _MyWebSocketScreenState extends State<MyWebSocketScreen> {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: widget.webSocketService.channel.stream,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        }

        if (snapshot.connectionState == ConnectionState.done) {
          return Text('Conexión Cerrada');
        }

        if (snapshot.hasData) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Recibido: ${snapshot.data}'),
              ElevatedButton(
                onPressed: () {
                  widget.webSocketService.sendMessage('Hola desde Flutter');
                },
                child: Text('Enviar Mensaje'),
              ),
            ],
          );
        }

        return Text('Conectado al WebSocket');
      },
    );
  }

  @override
  void dispose() {
    widget.webSocketService.closeConnection();
    super.dispose();
  }
}

Asegúrate de ajustar la URL del WebSocket (IOWebSocketChannel.connect) para que coincida con la dirección de tu servidor FastAPI.

Paso 3: Ejecutar la Aplicación Flutter

1. Abre tu terminal y navega al directorio de tu proyecto Flutter:

   cd mi_app

2. Ejecuta tu aplicación Flutter:

   flutter run

Esto iniciará tu aplicación Flutter y se conectará al servidor FastAPI a través del WebSocket. La aplicación mostrará el estado de la conexión y permitirá enviar mensajes al servidor.

¡Listo! Ahora tienes una aplicación Flutter conectada a un servidor FastAPI a través de WebSocket.