Flutter – WebSockets

10 Sep, 2020
WebSockets are used to connect with the server just like the http package. It supports two-way communication with a server without polling.
In this article we will explore the below-listed topics related to WebSockets in Flutter:
Connecting to a WebSocket serverListen to messages from the server.Send data to the server.Close the WebSocket connection.
Connecting to a WebSocket server
Listen to messages from the server.
Send data to the server.
Close the WebSocket connection.
In this article as an example, we will connect to the test server provided by websocket.org.
The web_socket_channel package has tools that are needed to connect to a WebSocket server. The package provides a WebSocketChannel that allows users to both listen to messages from the server and push messages to the server.
In Flutter, use the following line to create a WebSocketChannel that connects to a server:
final channel = IOWebSocketChannel.connect('ws://echo.websocket.org');
Now that we have established the connection to the server, we will send a message to it and get the same message as a response:
Dart
StreamBuilder(  stream: widget.channel.stream,  builder: (context, snapshot) {    return Text(snapshot.hasData ? '${snapshot.data}' : '');  },);
To send data to the server, add() messages to the sink provided by the WebSocketChannel as shown below:
channel.sink.add('Hello Geeks!');
To close the connection to the WebSocket use the below:
channel.sink.close();
Complete Source Code:
Dart
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 classclass 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();            },          ),        ),      ),    );  }}
Output:
android
Flutter
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Custom Bottom Navigation Bar
Splash Screen in Flutter
Flutter - Asset Image
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - Stack Widget
Flutter - Search Bar