Flutter – WebSockets

Los WebSockets se utilizan para conectarse con el servidor al igual que el paquete http . Admite comunicación bidireccional con un servidor sin sondeo.

En este artículo, exploraremos los temas enumerados a continuación relacionados con WebSockets en Flutter:

1. Conexión a un servidor WebSocket
2. Escuche los mensajes del servidor.
3. Enviar datos al servidor.
4. Cierre la conexión WebSocket.

En este artículo, como ejemplo, nos conectaremos al servidor de prueba proporcionado por websocket.org.

Conéctese a un servidor WebSocket:

El paquete web_socket_channel tiene herramientas que se necesitan para conectarse a un servidor WebSocket. El paquete proporciona un WebSocketChannel que permite a los usuarios escuchar mensajes del servidor y enviar mensajes al servidor.

En Flutter, usa la siguiente línea para crear un WebSocketChannel que se conecte a un servidor:

final channel = IOWebSocketChannel.connect('ws://echo.websocket.org');

Escuche los mensajes del servidor:

Ahora que hemos establecido la conexión con el servidor, le enviaremos un mensaje y obtendremos el mismo mensaje como respuesta:

StreamBuilder(
  stream: widget.channel.stream,
  builder: (context, snapshot) {
    return Text(snapshot.hasData ? '${snapshot.data}' : '');
  },
);

Enviar datos al servidor:

Para enviar datos al servidor, agregue() mensajes al receptor proporcionado por WebSocketChannel como se muestra a continuación:

channel.sink.add('Hello Geeks!');

Cerrar la conexión:

Para cerrar la conexión a WebSocket, use lo siguiente:

channel.sink.close();

Código fuente completo:

import 'dart:async';
import 'dart:convert';
  
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
  
Future<Album> fetchAlbum() async {
  final response =
  await http.get('https://jsonplaceholder.typicode.com/albums/1');
  
  if (response.statusCode == 200) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Loading album failed!');
  }
}
  
Future<Album> updateAlbum(String title) async {
  final http.Response response = await http.put(
    'https://jsonplaceholder.typicode.com/albums/1',
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );
  
  if (response.statusCode == 200) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to update the album!');
  }
}
  
// the album class
class Album {
  final int id;
  final String title;
  
  Album({this.id, this.title});
  
  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['id'],
      title: json['title'],
    );
  }
}
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);
  
  @override
  _MyAppState createState() {
    return _MyAppState();
  }
}
  
class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();
  Future<Album> _futureAlbum;
  
  @override
  void initState() {
    super.initState();
    _futureAlbum = getAlbum();
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Update Data',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.all(8.0),
          child: FutureBuilder<Album>(
            future: _futureAlbum,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasData) {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(snapshot.data.title),
                      TextField(
                        controller: _controller,
                        decoration: InputDecoration(hintText: 'Enter Title'),
                      ),
                      RaisedButton(
                        child: Text('Update Data'),
                        onPressed: () {
                          setState(() {
                            _futureAlbum = updateAlbum(_controller.text);
                          });
                        },
                      ),
                    ],
                  );
                } else if (snapshot.hasError) {
                  return Text("${snapshot.error}");
                }
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Producción: