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
- 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
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
import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:web_socket_channel/status.dart' as status;
late WebSocketChannel _channel;
WebSocketService(Uri wsUrl) {
_channel = WebSocketChannel.connect(wsUrl);
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);
_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:
import 'package:flutter/material.dart';
import 'websocket_service.dart';
class MyApp extends StatelessWidget {
final wsUrl = Uri.parse('ws://example.com'); // Reemplaza con la URL de tu servidor WebSocket
Widget build(BuildContext context) {
title: Text('WebSocket Flutter'),
webSocketService: WebSocketService(wsUrl),
class MyWebSocketScreen extends StatefulWidget {
final WebSocketService webSocketService;
MyWebSocketScreen({required this.webSocketService});
_MyWebSocketScreenState createState() => _MyWebSocketScreenState();
class _MyWebSocketScreenState extends State<MyWebSocketScreen> {
Widget build(BuildContext context) {
stream: widget.webSocketService.channel.stream,
builder: (context, snapshot) {
return Text('Error: ${snapshot.error}');
if (snapshot.connectionState == ConnectionState.done) {
return Text('Conexión Cerrada');
mainAxisAlignment: MainAxisAlignment.center,
Text('Recibido: ${snapshot.data}'),
widget.webSocketService.sendMessage('Hola desde Flutter');
child: Text('Enviar Mensaje'),
return Text('Conectado al WebSocket');
widget.webSocketService.closeConnection();
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
- Abre tu terminal y navega al directorio de tu proyecto Flutter:
cd mi_app
- 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.
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.
Post Views: 14
Relacionado