Tutorial Implementasi Websocket pada Flutter

Assalamu'alaikum Wr. Wb.

        Setelah sebelumnya saya membagikan tentang tutorial implementasi websocket pada react native pada artikel saya kali ini saya ingin membagikan tentang cara implementasi websocket pada flutter di android. Flutter adalah framework buatan Google yang dapat digunakan untuk mengembangkan berbagai aplikasi lintas platform seperti Android, Web, Desktop, dan MacOS sedangkan websocket sendiri adalah protokol yang digunakan untuk komunikasi antar client dan server selain https, dengan websocket client dapat langsung menerima data dari server secara realtime tanpa harus me request nya terlebih dahulu, websocket biasa digunakan pada fitur chat pada sebuah aplikasi, untuk implementasi websocket pada flutter adalah sebagai berikut:

1. Siapkan project Flutter anda
            Jika anda belum memiliki project flutter maka anda bisa mulai membuat project flutter anda dengan mengunjungi website flutter di sini.
2. Install package web socket channel
             Setelah anda menyiapkan project flutter anda maka anda perlu menginstall package web_socket_channel dengan menjalankan perintah berikut pada terminal:
   
             flutter pub add web_socket_channel
   
   
3. Import package web_socket_channel di atas file project anda
             Untuk menggunakan package web_socket_channel maka anda perlu mengimport package tersebut di bagian atas halaman file pada project anda seperti berikut:
   
             import 'package:web_socket_channel/web_socket_channel.dart';
   
             Jika anda menggunakan visual studio code yang sudah dipasang exstension dart dan flutter pada anda tidak perlu lagi mengimport nya secara manual.
4. Deklarasikan package class WebSocketChannel dari plugin web_socket_channel di dalam class file project anda di bagian atas.
   Contoh kode untuk mendeklarasikan class WebSocketChannel adalah sebagai berikut:
   
        WebSocketChannel channel;
   
   
5. Panggil kode untuk handle koneksi dan data dari server websocket menggunakan plugin web_socket_channel
   Contoh kode untuk handle data dan koneksi dari server websocket adalah sebagai berikut:
   
   
   
   
   import 'package:web_socket_channel/web_socket_channel.dart';
   import 'package:flutter/material.dart';
   
   class ExampleWS extends StatefulWidget {
      const ExampleWS({super.key});
      @override
      ExampleWSState createState() => ExampleWSState();
   }
   
   class ExampleWSState extends State<ExampleWS>{
   
      WebSocketChannel? channel;
         
      @override
      void initState() {
          super.initState();
          connectWS();
      }
   
      void connectWS() {
           // connect to server websocket
           channel = WebSocketChannel.connect(Uri.parse('ws://example.com/ws'));
   
           // listen to server websocket
           channel?.stream.listen((message) {
                 print("receive message: $message");
           }, onDone: () {
                 print("websocket connection done!");
           }, onError: (error) {
                 print("error: $error");
           });
      }
   
      void sendMessage() {
          // send message to server ws
          channel?.sink.add('tes');
      }
   
      void disconnectWS() {
           // disconnect websocket
           channel?.sink.close();
      }
   
      @override
       Widget build(BuildContext context) {
            
            return SafeArea(
                child: Scaffold(
                   body: Column(
                      children: [
                         GestureDetector(
                              onTap: () => sendMessage(),
                              child: Text("send message")
                         ),
                         GestureDetector(
                              onTap: () => disconnectWS(),
                              child: Text("disconnect Websocket")
                         ),
                      ]
                   )
                )
            );
      }
   
   }