In addition to normal HTTP requests, you can connect to servers usingWebSockets. WebSockets allow for two-way communication with a serverwithout polling.

In this example, you’ll connect to a test server provided bywebsocket.org. The server simply sendsback the same message you send to it.

Directions

• Connect to a WebSocket server
• Listen for messages from the server
• Send Data to the Server
• Close the WebSocket connection

1. Connect to a WebSocket server

The web_socket_channelpackage provides the tools you’ll need to connect to a WebSocket server.

The package provides a WebSocketChannel that allows you to both listen formessages from the server and push messages to the server.

In Flutter, create a WebSocketChannel that connects to a serverin one line:

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

2. Listen for messages from the server

Now that you’ve established a connection, you can listen to messages from theserver.

After you send a message to the test server, it sends the same message back.

How to listen for messages and display them? In this example, you’ll usea StreamBuilderWidget to listen for new messages and aTextWidget to display them.

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

How does this work?

The WebSocketChannel provides aStreamof messages from the server.

The Stream class is a fundamental part of the dart:async package. Itprovides a way to listen to async events from a data source. Unlike Future,which returns a single async response, the Stream class can deliver manyevents over time.

The StreamBuilderWidget connects to a Stream and asks Flutter to rebuild every time itreceives an event using the given builder function.

3. Send Data to the Server

In order to send data to the server, add messages to the sink providedby the WebSocketChannel.

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

How does this work

The WebSocketChannel provides aStreamSinkto push messages to the server.

The StreamSink class provides a general way to add sync or async events to adata source.

4. Close the WebSocket connection

After you’re done using the WebSocket, close the connection.To do so, close the sink.

channel.sink.close();

Complete example

import 'package:flutter/foundation.dart';
import 'package:web_socket_channel/io.dart';
import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'WebSocket Demo';
    return MaterialApp(
      title: title,
      home: MyHomePage(
        title: title,
        channel: IOWebSocketChannel.connect('ws://echo.websocket.org'),
      ),
    );
  }
}
class MyHomePage extends StatefulWidget {
  final String title;
  final WebSocketChannel channel;
  MyHomePage({Key key, @required this.title, @required this.channel})
      : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Form(
              child: TextFormField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'Send a message'),
              ),
            ),
            StreamBuilder(
              stream: widget.channel.stream,
              builder: (context, snapshot) {
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 24.0),
                  child: Text(snapshot.hasData ? '${snapshot.data}' : ''),
                );
              },
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _sendMessage,
        tooltip: 'Send message',
        child: Icon(Icons.send),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      widget.channel.sink.add(_controller.text);
    }
  }
  @override
  void dispose() {
    widget.channel.sink.close();
    super.dispose();
  }
}