Selain permintaan HTTP normal, Anda dapat terhubung ke server menggunakan WebSockets. WebSockets memungkinkan komunikasi dua arah dengan server tanpa polling.

Dalam contoh ini, sambungkan ke server pengujian yang disediakan oleh websocket.org . Server mengirimkan kembali pesan yang sama dengan yang Anda kirimkan. Resep ini menggunakan langkah-langkah berikut:

1. Hubungkan ke server WebSocket.
2. Listen pesan dari server.
3. Kirim data ke server.
4. Tutup koneksi WebSocket.

Hubungkan ke server WebSocket

web_socket_channel paket menyediakan alat yang Anda butuhkan untuk terhubung ke server WebSocket.

Paket menyediakan WebSocketChannel yang memungkinkan Anda untuk mendengarkan pesan dari server dan mendorong pesan ke server.

Di Flutter, gunakan baris berikut untuk membuat WebSocketChannelyang terhubung ke server:

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

Listen pesan dari server

Sekarang setelah Anda membuat koneksi, listen pesan dari server.

Setelah mengirim pesan ke server pengujian, ia mengirim kembali pesan yang sama.

Dalam contoh ini, gunakan StreamBuilder widget untuk mendengarkan pesan baru, dan Text widget untuk menampilkannya.

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

Bagaimana ini bekerja

WebSocketChannel menyediakan Stream pesan dari server.

Stream kelas adalah bagian mendasar dari dart:async paket. Ini menyediakan cara untuk mendengarkan peristiwa asinkron dari sumber data. Tidak seperti Future, yang mengembalikan respons asinkron tunggal, Stream kelas dapat mengirimkan banyak peristiwa dari waktu ke waktu.

StreamBuilderwidget menghubungkan ke Stream dan meminta Flutter untuk membangun kembali setiap kali menerima sebuah acara dengan menggunakan diberikan builder() fungsi.

Mengirim data ke server

Untuk mengirim data ke server, add() pesan ke sink disediakan oleh WebSocketChannel.

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

Bagaimana ini bekerja

WebSocketChannel menyediakan StreamSink untuk mendorong pesan ke server.

StreamSink kelas menyediakan cara umum untuk menambahkan sync atau async peristiwa ke sumber data.

Tutup koneksi WebSocket

Setelah Anda selesai menggunakan WebSocket, tutup koneksi:

channel.sink.close();

Contoh lengkap

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();
  }
}