Protokol WebSocket ( WS ) menyediakan kemampuan untuk bertukar data antara browser dan server melalui koneksi yang persisten. Data ditransmisikan melaluinya di kedua arah dalam bentuk "paket" tanpa memutus koneksi dan permintaan HTTP tambahan.

WebSocket bagus untuk layanan komunikasi konstan, seperti ruang obrolan, game online, pasar waktu nyata, dll.

Sebagai contoh, mari buat backend untuk obrolan sederhana. Penting untuk menyediakan fitur-fitur dasar:

  1. Mengirim pesan ke obrolan.
  2. Menentukan penulis pesan.
  3. Pemberitahuan tindakan. Misalnya, anggota baru bergabung dengan obrolan, keluar dari obrolan, indikator mengetik (seseorang sedang mengetik...)

Model basis data

Mari kita mulai dengan membuat model untuk database. Meskipun pada awalnya kami tidak berencana untuk menyimpan pesan dan riwayat korespondensi di database, kami masih memerlukan model untuk menyusun struktur pengiriman pesan dan pemberitahuan.

Mari buat model chat_event generik yang berisi:

  1. Hubungan dengan pengguna. Pesan apa pun menyertakan informasi tentang pengguna mana yang dirujuknya.
  2. Bidang Type (enum) dengan 4 opsi yang memungkinkan. Connected dan Disconnected - untuk pemberitahuan saat pengguna terhubung atau terputus. Typing - untuk menyampaikan informasi bahwa pengguna sedang menulis pesan baru. Message - untuk pesan teks standar.
  3. Message (text) - teks pesan.

Konfigurasi titik akhir

Langkah pengembangan selanjutnya sedikit berbeda dari pendekatan standar yang umum untuk fitur aplikasi lainnya. Biasanya, proses bisnis dibuat, dan kemudian titik akhir dikonfigurasi untuk menjalankannya. Dalam kasus WebSockets, semuanya terjadi secara berbeda, dan titik awalnya adalah pembuatan titik akhir berdasarkan pemicu proses bisnis yang selanjutnya dibuat.

Kami membutuhkan bagian titik akhir. Di sana kami membuat titik akhir baru dengan memilih opsi yang sesuai - WebSocket Endpoint .

Untuk WebSockets tidak ada pilihan metode permintaan - selalu GET . Mari tentukan URL sederhana - /chat/ dan buat grup untuknya dengan nama yang sama.

Selanjutnya, kita perlu membuat variabel yang akan menentukan format pertukaran data di dalam WebSocket.

  • Client-to-Server . Mirip dengan parameter masuk untuk proses bisnis standar. Dalam contoh kami, kami akan membuat pesan variabel teks sederhana (kami akan mengirim pesan teks biasa ke server).
  • Server-to-Client . Di sini variabel dibuat untuk pesan server, mengirimkan data dari server ke pengguna. Perhatikan bahwa ini tidak sama dengan respons terhadap permintaan pengguna. Dan meskipun dapat dikirim sebagai reaksi atas tindakan pengguna, ini lebih sering disebabkan oleh beberapa peristiwa eksternal. Dalam contoh kita, server akan mengirimkan notifikasi dari semua event di chat, jadi kita akan menetapkan model chat_event sebagai variabel.

Setelah membuat variabel, Anda dapat melanjutkan ke hal utama - membuat logika WebSocket. Itu didasarkan pada pemicu yang aktif saat pesan baru diterima di WebSocket, serta saat koneksi dibuat atau diputuskan.

Membuat proses bisnis

Mari gunakan pemicu connect dan buat proses bisnis untuk itu. Ini akan diluncurkan pada saat pengguna membuat koneksi dengan WebSocket, dan tugasnya adalah mengirim pemberitahuan tentang ini ke semua pengguna yang terhubung.

Perhatikan bahwa blok awal menyertakan dua parameter: User ID dan Connection ID . Dengan demikian, Anda tidak hanya dapat langsung menentukan pengguna yang membuat koneksi, tetapi juga mendapatkan pengidentifikasi unik untuk koneksi ini. Di masa mendatang, pengidentifikasi ini dapat digunakan, misalnya, untuk mengirim pesan yang ditargetkan atau untuk memutuskan koneksi secara paksa.

Buat semua langkah yang diperlukan dari proses bisnis:

  1. Make User . Mari gunakan parameter awal User ID untuk membuat model pengguna.
  2. Make chat_event . Buat model notifikasi acara. Kami akan menghubungkannya ke pengguna menggunakan model yang dibuat pada langkah sebelumnya dan juga memilih jenis acara dan mengatur Type = Connected . Kami tidak menggunakan parameter pesan karena, dalam hal ini, bukan pesan yang dikirimkan tetapi pemberitahuan koneksi.
  3. WSS Connections /chat/ . Dengan menggunakan blok ini, kita akan mendapatkan daftar semua koneksi WebSocket yang aktif.
  4. For Each Loop . Kami menggunakan larik koneksi sebagai parameter lingkaran, mengirimkan pemberitahuan ke setiap pengguna yang terhubung.
  5. Expand WebSocket Connection . Luaskan informasi koneksi untuk mendapatkan Connection ID .
  6. WSS Send /chat/ . Kami menggunakan Connection ID dan chat_event yang dihasilkan untuk mengirimkan notifikasi.

Menggunakan Postman untuk menguji WebSockets

Pada tahap ini, WebSocket, meskipun tidak memiliki fungsionalitas yang signifikan, sudah beroperasi dan dapat diuji dalam praktiknya. Untuk melakukan ini, Anda dapat menggunakan alat apa pun yang memungkinkan Anda bekerja dengan WebSockets. Mari kita lihat bagaimana melakukannya dengan Postman sebagai contoh.

Sebaiknya klik New button dan pilih WebSocket Request

Anda perlu menentukan URL untuk WebSocket. Itu dapat ditemukan menggunakan Swagger , di mana WebSocket ada dalam daftar dengan titik akhir lainnya.

Tidak seperti permintaan standar, WebSockets beroperasi menggunakan protokol wss , jadi Anda perlu mengganti https dengan wss . Hasilnya harus berupa URL yang serupa: wss://qvlxglh-app.apms.io/api/chat/

Selanjutnya, Anda perlu menambahkan token autentikasi ke permintaan karena koneksi tidak boleh anonim. Anda perlu membuat header Authorization dengan nilai seperti Bearer lBCiunRWg6BfogDrLml4jrC4iJiWucKo . Alih-alih lBCiunRWg6BfogDrLml4jrC4iJiWucKo, Anda perlu memasukkan token Anda sendiri, yang dapat diperoleh sebagai hasil otorisasi ( POST /auth/ endpoint).

Jika semuanya dilakukan dengan benar, maka dengan mengklik tombol Connect , koneksi akan dibuat, dan pesan pertama akan diterima dari sisi server, proses bisnis pengiriman yang telah dibuat sebelumnya.

Pada saat yang sama, Anda dapat memastikan bahwa menerima pesan dari server terjadi tidak hanya sebagai reaksi atas beberapa permintaan dari kami. Tindakan pengguna lain dapat menyebabkannya. Untuk mengujinya, Anda dapat membuat koneksi di tab lain menggunakan token autentikasi pengguna lain. Pesan dari server yang memberitahukan hal ini akan dikirim ke semua tab dengan koneksi aktif.

Proses bisnis untuk perpesanan

Sekarang Anda dapat terus mengembangkan kemampuan WebSocket dan membuat proses bisnis untuk perpesanan. Omong-omong, Anda dapat mengirim pesan sekarang, tetapi tanpa membuat logika terlebih dahulu, ini tidak masuk akal, pesan tidak akan menimbulkan reaksi apa pun. Oleh karena itu, mari kembali ke pengaturan titik akhir dan buat proses bisnis untuk pemicu receive .

Dalam banyak hal, ini akan mirip dengan proses bisnis sebelumnya. Saat pesan diterima, Anda perlu membuat chat_event dan mengirimkan pemberitahuan tentangnya ke semua peserta obrolan. Perbedaannya adalah pesan itu sendiri perlu ditambahkan ke chat_event , dan penulis pesan tidak perlu disertakan dalam milis.

Blok yang sama digunakan di bagian pertama proses bisnis. Di blok Make chat_event , Anda perlu menyetel type = message dan melampirkan pesan itu sendiri dari blok awal.

Dalam loop, kita perlu memeriksa (Equal block) dan mengirim pesan hanya jika ID koneksi penerima tidak cocok dengan ID koneksi pengirim ( If-Else = False ).

Anda dapat mempublikasikan hasilnya dan memulai pengujian. Perhatikan bahwa pesan itu sendiri dalam format JSON , jadi saat menggunakan variabel pesan, akan terlihat seperti ini:

{"message":"Some text here"}

Dalam contoh, Anda dapat melihat bahwa Anda menerima notifikasi koneksi obrolan, mengirim pesan Anda sendiri ( Hi! ), dan menerima tanggapan ( Glad to see you! )

Ini melengkapi pembuatan backend dasar untuk obrolan menggunakan WebSockets. Anda dapat mulai membangun front-end dan mengembangkan aplikasi perpesanan real-time Anda sendiri.

Was this article helpful?

AppMaster.io 101 Kursus kilat

10 Modul
2 Minggu

Tidak yakin harus mulai dari mana? Mulailah dengan kursus kilat kami untuk pemula dan jelajahi AppMaster dari A sampai Z.

Mulai Kursus
Development it’s so easy with AppMaster!

Butuh lebih banyak bantuan?

Selesaikan masalah apa pun dengan bantuan para ahli kami. Hemat waktu dan fokus untuk membangun aplikasi Anda.

headphones

Hubungi dukungan

Beritahu kami tentang masalah Anda, dan kami akan menemukan solusi untuk Anda.

message

Obrolan Komunitas

Diskusikan pertanyaan dengan pengguna lain di obrolan kami.

Bergabunglah dengan komunitas