Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Java
Code

Membangun Aplikasi Chat Real-Time dengan Modulus dan Spring Boot

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Getting Started with Modulus.
Build a Real-Time Chat Application With Modulus and Python
The Hitchhiker's Guide to Docker and Modulus
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dalam tutorial ini, kita akan menggunakan Spring Boot untuk lingkungan pengembangan web, Websockets untuk komunikasi real-time, Tomcat untuk kontainer aplikasi Java, Gradle untuk membangun dan mengelola dependensi, Thymeleaf untuk render template, MongoDB untuk penyimpanan data, dan akhirnya ada tidak akan ada XML untuk konfigurasi bean. Hanya agar Anda terinspirasi, di akhir artikel ini, Anda akan melihat aplikasi yang berfungsi penuh seperti yang ditunjukkan di bawah ini.

Realtime Chat Application Chat Screen

1. Skenario

  1. Doe membuka halaman chat untuk berkomunikasi dengan teman-temannya.
  2. Dia diminta untuk memilih nama panggilan.
  3. Dia memasuki halaman chat dan mengirim sebuah pesan. Pesan dikirim ke endpoint MVC Spring untuk disimpan ke database dan disiarkan.
  4. Endpoint yang ditentukan menangani pesan dan menyiarkan pesan itu ke semua klien yang terhubung ke sistem chat.

2. Membangun Dependensi dan Konfigurasi Gradle

Sebelum melanjutkan dengan struktur internal proyek, izinkan saya menjelaskan perpustakaan mana yang akan kita gunakan untuk fitur proyek yang tercantum di atas, dan mengelolanya dengan menggunakan Gradle. Saat Anda mengkloning proyek dari GitHub, Anda akan melihat sebuah file bernama build.gradle di direktori root proyek seperti di bawah ini.

Saya tidak akan terjun ke internal Gradle, tapi saya jelaskan bagian-bagian yang kita butuhkan untuk proyek kita. Spring Boot dibangun terutama untuk pengembangan aplikasi mandiri dalam format jar. Dalam proyek kita, kita akan menghasilkan proyek war dan bukan jar. Itu karena Modulus membutuhkan file war untuk menyebarkan proyek secara otomatis ke cloud-nya.

Untuk menghasilkan file war, kita sudah menggunakan apply plugin: 'war'. Modulus juga mengharapkan nama war menjadi ROOT.war secara default, dan itulah sebabnya kita telah menggunakan:

Saat menjalankan tugas build Gradle, saat ini akan menghasilkan file war untuk dikirim ke kontainer Tomcat. Dan akhirnya, seperti yang bisa Anda tebak, bagian dependensi adalah untuk perpustakaan pihak ketiga untuk tindakan tertentu.

Itu semua untuk bagian depedensi proyek, dan Anda dapat merujuk ke panduan pengguna Gradle untuk lebih banyak tentang Gradle.

3. Desain Perangkat Lunak

Jika Anda ingin mengembangkan aplikasi yang bagus, sebaiknya praktikkan struktur proyek Anda dalam jumlah kecil. Anda bisa melihat potongan keseluruhan arsitektur dari aplikasi kita.

3.1. Model

Kita sedang mengembangkan aplikasi chat, jadi kita dapat mengatakan bahwa kita memiliki model ChatMessageModel (yaitu objek domain). Saat menyimpan atau melihat detail pesan chat, kita dapat mentransmisikan objek obrolan dari atau ke model ChatMessageModel ini. Selain itu, kita bisa menggunakan model User untuk pengguna chat, namun untuk mempermudah aplikasi, kita hanya akan menggunakan nickname sebagai teks. Model ChatMessageModel memiliki field berikut: text, author, dan createDate. Representasi kelas dari model ini adalah sebagai berikut:

Objek domain ini membantu kita untuk mewakili pesan chat sebagai JSON bila diperlukan. Model kita sudah OK, jadi mari kita lanjutkan dengan controller.

3.2. Controller

Controller adalah perilaku aplikasi Anda. Ini berarti Anda harus menjaga controller Anda tetap sederhana dan mudah berinteraksi dengan model domain dan layanan lainnya. Kita mengharapkan controller kita menangani:

  1. Permintaan penyimpanan pesan chat
  2. Mencantumkan pesan chat terbaru
  3. Melayani halaman aplikasi chat
  4. Melayani halaman login
  5. Menyiarkan pesan chat ke klien

Di sini Anda dapat melihat keseluruhan endpoint:

Endpoint pertama dan kedua hanya untuk melayani halaman login dan chat utama. Tindakan ketiga adalah untuk menangani penyimpanan dan penyiaran pesan chat baru. Setelah pesan disimpan, pesan akan diberitahukan kepada klien melalui saluran /topic/message. Untuk menyimpan data pesan ke MongoDB, kita akan menggunakan repositori MongoDB.

Seperti yang dapat Anda lihat, ada dua jenis endpoint /messages: GET dan POST. Saat Anda membuat permintaan POST ke endpoint /messages dengan muatan pesan yang benar, pesan akan disiarkan secara otomatis ke kelas ChatMessageModel, dan pesan akan disimpan ke MongoDB. Setelah berhasil menyimpan, secara otomatis akan di-push ke klien. Tapi bagaimana caranya? Dalam tindakan itu, ada anotasi @SendTo("/topic/newMessage"). Ini akan mengirim konten yang dikembalikan dari fungsinya ke klien. Dan konten yang dikembalikan adalah seperti di bawah ini:

Ini adalah pesan terbaru dari database:

Sample JSON message

Contoh pesan JSONPesan di atas akan dikonversi ke format untuk komunikasi WebSocket. Pesan saluran ini akan ditangani di sisi klien dengan perpustakaan JavaScript pihak ketiga, dan akan ditangani pada bagian-bagian berikut.

Untuk operasi message db, spring-boot-starter-data-mongodb digunakan. Perpustakaan ini membantu kita untuk operasi repositori, dan untuk membuat objek repositori untuk MongoDB adalah sangat sederhana. Anda dapat melihat contoh ChatMessageRepository di bawah ini:

Jika Anda membuat sebuah antarmuka dan memperluas MongoRepository<?, String, Anda akan dapat secara otomatis menggunakan operasi CRUD seperti find(), findAll(), save(), dll.

Seperti yang Anda lihat, MongoRepository mengharapkan objek domain. Kami telah mendefinisikan model ini di bagian Model dari tutorial. Dalam repositori ini, kita telah mendefinisikan sebuah fungsi khusus yang disebut findAllByOrderByCreateDateAsc().

Jika Anda pernah menggunakan JPA sebelum Anda dapat memahami hal ini dengan mudah, namun saya jelaskan ini secara singkat. Jika Anda mendefinisikan nama fungsi di antarmuka yang memperluas MongoRepository, nama fungsi ini akan diuraikan ke kueri di back end oleh Spring secara otomatis. Ini akan menjadi seperti:

Di ChatMessageController, kita menggunakan fungsi ini, dan juga kita telah menggunakan fungsi default MongoRepository:

findAll digunakan sebuah parameter untuk sortir dan paginasi. Anda bisa melihat panduan di situs Spring untuk rincian lebih lanjut tentang Spring JPA.

3.3. View

Di bagian view, kita hanya memiliki dua halaman. Salah satunya adalah halaman login, untuk mendapatkan nickname pengguna, dan yang kedua adalah halaman chat utama untuk mengirim pesan ke pengguna chat.

Seperti yang bisa Anda lihat di bagian controller di atas, mereka di-render dengan menggunakan dua endpoints, /login and /chat. Untuk membuat halaman interaktif, kita akan menggunakan beberapa perpustakaan JavaScript pihak ketiga. Kita akan menggunakannya dari halaman CDN. Anda bisa melihat halaman login di bawah ini:

Pada halaman login, kita memiliki contoh kotak teks nickname. Saat Anda mengklik Enter Chat, nama panggilan Anda akan disimpan ke cookie. Nama panggilan ini akan digunakan untuk mengatur field pengirim pesan chat. Saat Anda mengklik Enter Chat, halaman chat akan dibuka. Jika Anda sudah login dan pergi ke halaman login, Anda akan diarahkan ke halaman chat.

Inilah halaman chat-nya:

Halaman ini hanya untuk melihat dan mengirim pesan. Pesan dikirim ke halaman ini melalui WebSockets. Di halaman ini Anda bisa melihat sockjs dan stompjs. Itu untuk penanganan notifikasi. Setiap kali ada pesan baru, area pesan terbaru akan terisi kembali.

Ngomong-ngomong, saat pertama kali membuka halaman chat, pesan terbaru akan diambil di area pesan. Seperti yang dapat Anda lihat di sisi JavaScript, saluran pesan kita adalah newMessage. Jadi, kita melakukan listen saluran ini, dan saat Anda mengklik tombol Send, pesan di kotak teks akan dikirim ke endpoint dan pesan itu akan disiarkan ke klien yang terhubung setelah penyimpanan berhasil.

Seperti yang bisa Anda lihat, arsitektur perangkat lunak di sini sangat sederhana dan mudah dikembangkan. Kita memiliki kode siap produksi, dan mari kita menyebarkannya ke Modulus.

Modulus adalah salah satu PaaS terbaik untuk penyebaran, penskalaan dan pemantauan aplikasi Anda dalam bahasa pilihan Anda.

4. Penyebaran

4.1. Prasyarat

Sebelum menyebarkan aplikasi, mari membuat database dengan menggunakan panel admin Modulus. Anda memerlukan akun Modulus untuk pembuatan dba dan penerapan aplikasi, jadi silakan membuat akun jika Anda tidak memilikinya.

Pergi ke dashboard Modulus dan buat database:

Database creation

Pembuatan databasePada layar pembuatan database, berikan nama database, pilih versi MongoDB (saya telah menggunakan 2.6.3, jadi akan lebih baik jika Anda memilih 2.6.3 juga), dan akhirnya definisikan pengguna untuk menerapkan operasi baca/tulis database.

Create Database

Anda bisa mendapatkan URL MongoDB setelah berhasil membuat database. Kami akan menggunakan URL MongoDB di variabel environment yang akan digunakan oleh aplikasi Spring Boot.

Untuk mengatur variabel environment untuk MongoDB, Anda harus memiliki aplikasi. Buka Dashboard dan klik Projects. Pada halaman ini, klik Create New Project.

Untuk melanjutkan konfigurasi variabel environment, buka Dashboard dan klik Projects. Pilih proyek Anda, dan klik Administration. Gulir ke bawah halaman, dan atur variabel environment dengan kunci SPRING_DATA_MONGODB_URI dan nilai database URI Anda:

Environment Variables

Saat Anda menerapkan aplikasi Anda, Spring akan menggunakan nilai variabel environment itu. Kita telah selesai dengan persyaratan, dan mari kita lanjutkan dengan bagian penyebaran.

4.2. Penyebaran dengan CLI

Untuk menyebarkan proyek ini, jalankan tugas build gradle:

Tugas ini akan menghasilkan sebuah file war bernama ROOT.war. Salin file ini ke folder baru dan pasang modulus CLI jika belum.

Login ke sistem;

Sekarang jalankan perintah berikut untuk menyebarkan ROOT.war ke Modulus.

Ini akan menyebarkan file war dan Anda dapat mengarahkan log proyek untuk melihat status penerapan Anda dengan menjalankan perintah berikut:

Itu saja dengan penyebarannya!

5. Kesimpulan

Tujuan utama dari tutorial ini adalah untuk menunjukkan kepada Anda bagaimana cara membuat aplikasi chat real-time dengan Spring Boot, WebSockets, dan MongoDB.

Untuk menjalankan proyek dalam produksi, Modulus digunakan sebagai penyedia PaaS. Modulus memiliki langkah-langkah yang sangat sederhana untuk penyebaran, dan juga memiliki database internal (MongoDB) untuk proyek-proyek kita. Selain itu, Anda bisa menggunakan alat yang sangat membantu di dashboard Modulus seperti Logs, Notifications, Auto-Scaling, Db Administration, dan banyak lagi.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.