Frontend Flutter bertemu dengan backend Node.js

Di blog ini, kita akan melihat cara membuat aplikasi chat real-time menggunakan Node.js sebagai backend dan Flutter sebagai frontend. Kami akan menggunakan soket untuk berkomunikasi antar perangkat.

Node.js (Sisi Server)

Mari buat proyek baru bernama chat_server dan jalankan di Terminal. Sekarang jalankan perintah ini untuk memulai proyek:

touch index.js && npm init && npm install ws && npm install express

Ini akan menginstal proyek sepenuhnya untuk Anda. Setelah selesai, buka proyek di IDE favorit Anda dan buka file index.js Anda.

Ini adalah server Websocket dasar kami yang tidak melakukan banyak hal saat ini. Mari kita ubah itu sekarang.

Ini akan menjalankan pesan Anda sepenuhnya! Jadi setelah ini selesai, sekarang kita dapat mulai dengan aplikasi obrolan Flutter.

Flutter (Sisi Klien)

Kami telah menyelesaikan backend kami sekarang sehingga kami dapat memulai dengan aplikasi obrolan di Flutter. Jalankan perintah ini untuk memulai proyek Flutter baru kami:

flutter create chat_app && cd chat_app && flutter run

Buka proyek ini di IDE Anda dan buka file pubspec.yaml Anda dan kami akan menambahkan web_socket_channelpastikan tampilannya seperti ini:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  web_socket_channel: ^2.1.0 # Add this.
  sqflite: ^2.0.2 # And this.

Untuk memulai proyek kami, hapus semua yang ada di lib/main.dart dan pastikan untuk memasukkan ini:

Sekarang mari kita juga membuat file baru bernama messages.dart dimana kita akan menyimpan pesan. Karena kami akan menyimpan pesan kami secara lokal, kami akan membuat fungsi terlebih dahulu untuk itu.

Kodenya banyak sekali ya? Nah, yang dilakukan fungsi ini adalah mengambil setiap pesan di database kita. Kemudian ia memeriksa apakah pesan tersebut telah Anda kirim atau terima.

Jika sudah dilakukan maka terakhir kita akan menampilkan pesan tersebut. Sekarang kita akan membuat fungsi lain di messages.dart yang akan mengirim pesan ke server kita dan memasukkan pesan baru ke dalam database kita.

Fungsi ini akan menyimpan pesan yang akan kita kirimkan. Sekarang setelah ini selesai, sekarang kita akan membuat halaman untuk menampilkan pesan-pesan ini.

Kami akan memberi nama halaman ini chat_page.dart dan akan terlihat seperti ini terlebih dahulu.

Sekarang untuk menerima pesan kami ingin membuat fungsi untuk itu. Kami akan memanggil fungsi kamigetMessage() ini akan menghubungkan diri kami ke server dan mendengarkan pesan apa pun. Dan jika ada pesan akan kami tampilkan juga.

Dan hanya itu yang ada sekarang Anda telah sepenuhnya membuat aplikasi obrolan. Sekarang jalankan aplikasi dengan dua perangkat lokal untuk melihat apakah itu berfungsi. Jika tidak berhasil, beri tahu saya dan saya akan membantu Anda. Terima kasih sudah membaca.