Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

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:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
flutter create mi_app
flutter create mi_app
   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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
flutter pub add web_socket_channel
flutter pub add web_socket_channel
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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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);
}
}
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); } }
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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();
}
}
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(); } }
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:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
cd mi_app
cd mi_app
   cd mi_app
  1. Ejecuta tu aplicación Flutter:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
flutter run
flutter run
   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.

0

Deja un comentario