Chat

Saat membuat aplikasi mungkin kita butuh data secara real time (Waktu nyata) atau sederhananya adalah secara langsung. jadi data yang di kirim tanpa harus request terlebih dahulu seperti HTTP pada umum nya Mungkin kalian ingin membuat aplikasi kolaborasi antar tim biar bisa kerja secara real time bersama, atau sekedar chat app saja? Di laravel 11 ada fitur baru yaitu laravel Reverb, Laravel Reverb merupakan server Websocket dimana kita bisa berkomunikasi secara real time menggunakan laravel, sebelumnya jika kita ingin berkomunikasi secara real time di laravel kita harus menggunakan Pusher atau Ably. Tetapi sekarang sudah ada fitur baru yaitu Reverb. ## Apa bedanya dengan Pusher atau Ably ? Pusher tidak menggunakan server milik kita, melainkan menggunakan server Pusher sendiri. Jika kita menggunakan Pusher, data akan dikirim terlebih dahulu ke server Pusher, baru kemudian diakses oleh klien yang kita inisialisasi. Ably juga memiliki konsep yang serupa, meskipun terdapat beberapa perbedaan. Kedua services tersebut tersedia dalam versi gratis dan berbayar ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wypixf2p1hcg3mocyd5c.png) ## Websocket Sebelum kita menggunakan Reverb alangkah baiknya kita mengetahui tentang konsep Websocket. Apa itu websocket ? Menurut beberapa sumber Websocket menyediakan koneksi terus-menerus antara klien dan server yang dapat digunakan kedua belah pihak untuk mulai mengirim data kapan saja. Atau bisa disebut dengan real time Koneksi yang dibuat tetap terbuka, dan komunikasi dilakukan menggunakan saluran yang sama sampai koneksi diakhiri di sisi klien atau server. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msgwyrc1x6faph4tno8h.png) ## Konsep Broadcast Broadcast atau dalam Indonesian di sebut siaran, kita sudah tau ngapain kalau kita siaran ? si penyiar untuk memberitahu informasi dan yang mengedar adalah orang yang menerima informasi. Tetapi siaran tidak serta merta langsung ada kan kalau tidak ada suatu acara ? Konsep Broadcast sama di Laravel kita bisa membuat siaran di sisi server kemudian yang menerima siaran tersebut adalah client. Di laravel Event di siarkan menggunakan channel dimana channel ada beberapa tipe seperti public channel atau private channel, untuk public channel user yang mengakses client biasanya tanpa Authentication, sedangkan yang private harus di Authentication . ## Requirement Sebelum lanjut di tutorial ini, alangkah baik nya kalian sudah memahami 1. Basic PHP 2. Javascript Dasar, Dan DOM 3. PHP OOP 4. Konsep MVC 5. Laravel ## Install Laravel Mulai instalasi laravel kalian bisa menggunakan laravel installer atau menggunakan composer create project, terserah kalian ini preferensi, tetapi di tutorial kali ini saya akan install laravel menggunakan composer create project saja biar lebih memudahkan yang tidak menggunakan laravel installer. Sekarang buka terminal/cmd kemudian ketik ```sh composer create-project laravel/laravel laravelReverb ``` ## Install Laravel Reverb Setelah install laravel, masuk ke root project kalian kemudian jalakan perintah berikut untuk instalasi Laravel Reverb ```sh php artisan install:broadcasting ``` ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkj57xsvtfah6a8pthpc.png) Kalau ada perintah untuk No dan Yes kalian bisa pilih Yes saja ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rsk8iqj7lqmiz6y1itek.png) Kalian pilih Yes saja karena kita juga butuh beberapa Node dependensi buat client nya, jika kalian belum install nodejs alangka baiknya install nodejs terlebih dahulu, [disini](https://nodejs.org/en/download) Kalau sudah installasi Laravel Reverb bisa buka project nya code editor favorit kalian ## Apa Yang Kita Buat ? Oke di tutorial kali ini kita akan membuat chat sederhana menggunakan Laravel Reverb. Chating sederhana tanpa menggunakan database karena disini saya cuma ingin mengenalkan tentang Laravel Reverb itu sendiri ## Membuat Event Sekarang mulai membuat event atau acara, di laravel untuk membuat acara kita bisa menggunakan perintah ```sh php artisan make:event MessageEvent ``` Oke kalau sudah membuat event kalian bisa membuka file nya di App/Events/MessageEvent.php Seletah itu kalian harus implementasi interface yang bernaman ``ShouldBroadcastNow`` untuk memberitau laravel bahwa event tertentu harus di siarkan . Setelah itu kalian bisa import interface nya ```php use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow; ``` Rubah class nya menjadi seperti ini ```php class MessageEvent implements ShouldBroadcastNow {} ``` Disini kita menggunakan public channel karena kita tidak menggunakan database, jadi kalian bisa explore sendiri untuk membuat private channel Untuk membuat public channel kalian bisa merubah seperti di bawah ini, dimana kita memanggil class yang namanya channel kemudian kita return ``new Channel('nama_channel')`` untuk nama channel itu optional kalian bisa menggunakan nama ```php public function broadcastOn(): Channel { return new Channel('message'); } ``` Setelah itu kita tambahkan properti ``$messageData`` dengan type data array. Dimana parameter ini akan mengirim array asosiatif dengan key "message" dan "name" ```php public function __construct(public array $messageData){} ``` Setelah kita set properti kita harus menambahkan method yang bernama ``broadcastAs`` Dimana method ini return type data string untuk mendefinisikan nama event, by default sebenarnya nama event itu menggunakan nama class, tetapi lebih baik di ganti karena untuk memudahkan ```php public function broadcasAs() : string { return 'receive'; } ``` ## Konfigurasi Client Untuk konfigurasi client kita bisa menggunakan laravel echo, yang sebelumnya sudah terInstall ketika laravel reverb. Kalau sudah kalian buka filenya di ``resource/js/echo.js `` ```js import Echo from 'laravel-echo'; import Pusher from 'pusher-js'; window.Pusher = Pusher; window.Echo = new Echo({ broadcaster: 'reverb', key: import.meta.env.VITE_REVERB_APP_KEY, wsHost: import.meta.env.VITE_REVERB_HOST, wsPort: import.meta.env.VITE_REVERB_PORT ?? 80, wssPort: import.meta.env.VITE_REVERB_PORT ?? 443, forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https', enabledTransports: ['ws', 'wss'], }); ``` Konfigurasi client yang kita gunakan seperti di atas ini, jadi biarkan untuk default seperti ini, jika kalian ingin rubah, rubah di file .env Setelah di nyatakan semua sudah benar kalian bisa bukan terminal kemudian ketik ``npm run build``. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4xrxs1msy3wowq27irj.png) ## Membuat Controller Mari kita membuat controller dengan mengetika commad ```sh php artisan make:controller ChatController ``` Kita membuat sebuah controller dengan nama ``ChatController`` kalau sudah membuat controller kalian buka file nya di ``App/Http/Controller/ChatController.php `` Kalau sudah di buka, buat sebuah method dengan nama ``index`` Untuk menapilkan halaman chat ```php all(), [ 'name' => 'required', 'message' => 'required' ]); if($validation->fails()) { return response()->json(['message' => 'Error', 'error' => $validation->errors()], 400); } $validationData = $validation->validated(); MessageEvent::dispatch($validationData); return response()->json(['message' => 'Sukses', 'data' => $validationData]); } ``` Di Method send message kita memiliki parameter request, dimana request untuk menggabil input yang di terima - Mendefinisikan validation untuk mengecek apakah suatu input itu kosong atau tidak - Jika validation salah maka kita akan lempar response json dengan status code 400 - Mengambil data dari validation - Mengirim message ke event dengan menggunakan ``MessageEvent::dispacth($validationData)``, data yang sesuai di - definisikan di constructor yang kita buat di ``MessageEvent`` class - Setelah selesai itu kita lempar response json dengan ## Membuat View Kalau sudah membuat controller nya kalian bisa membuat view dengan mengetikan command ```sh php artisan make:view chat ``` Kalau sudah membuat view kalian bisa membuka file nya di ``resourses/views/chat.blade.php`` Kalau sudah file nya di buka, kalian bisa membuat tampilan sederhana seperti di bawah ini. Disini menggunakan bootstraps ```html Chat

``` Kalau sudah mari kita panggil javascript file yang sudah kita build tadi ```html ``` Untuk nama file pasti berbeda beda. Kalau sudah kita panggil laravel Echo dengan ``Window.Echo.channel`` Channel memiliki parameter nama channel yang sudah kita definisikan sebelumnya, kemudian kita panggil method yang bernama ``listen`` dimana listen memiliki 2 parameter yang pertama nama event yang sudah kita definisikan sebelumnya, kemudian ada callback, dimana callback akan menerima data yang di kirim ```html ``` Setelah menerima data di dalam callback method kita panggil ``messageData `` object, dimana messageData object adalah properti yang kita definisikan di constuctor class ``MessageEvent`` Untuk mengirim pesan kita menggunakan fetch seperti di bawah ini ```js document.querySelector('form').addEventListener('submit', async (e) => { e.preventDefault() const messageInput = document.querySelector('#messageInput') const nameInput = document.querySelector('#nameInput') const response = await fetch('/send-message', { method: "POST", headers: { 'X-CSRF-Token': '{{csrf_token()}}', 'content-type': 'application/json', }, body: JSON.stringify({ name: nameInput.value, message: messageInput.value }) }) console.log( await response.json()) }) ``` ## Routing Buka file ``routes/web.php`` Kemudian kita membuat routes untuk chat dan send message ```php

aditiyadwiramadani88

Laravel: Pengenalan Fitur Reverb Di Laravel

Join Our Newsletter. No Spam, Only the good stuff.