React Native Realtime Chat App with Laravel, Websocket + Pusher & Laravel Echo (Part 1)

Skruls, pada tutorial kali ini, kita akan membuat atau membangun aplikasi Android & iOS dengan React Native dari 0 sampai selesai, dengan Laravel, Websocket + Pusher dan Laravel Echo.

Oke langsung saja kita mulai.

Tahap pertama pada tutorial ini adalah install dependencies yang dibutuhkan untuk menjalankan aplikasi kita.

Buat Project baru React Native

Sebelum membuat projek baru, sebaiknya perhatikan setting up the development environment agar lebih mudah untuk melanjutkan.

Jika sudah, buka terminal dan ketikan:

$ npx react-native init WhatsEps

init new project react native

tunggu sampai proses instalasi selesai. Lalu kita coba jalankan, dengan perintah:

$ cd WhatsEps

$ yarn ios

maka otomatis akan membuka simulator ios.

welcome to react

Instal Laravel sebagai Backend dan API

Buka terminal dan ketikan:

$ composer create-project — prefer-dist laravel/laravel:^7.0 whatseps-app

Tunggu hingga selesai instalasi, lalu kita coba running.
gunakan perintah php artisan serve

kemudian buka http://127.0.0.1:8000/

karena disini saya menggunakan laravel valet untuk serve aplikasinya.
maka urlnya http://whatseps-app.test/

success run laravel

Laravel Websockets

Untuk membuat websocket server, yang akan kita tambahkan ke laravel yang sudah kita instal, kita akan menggunakan Laravel Websockets, yang bisa kalian baca dokumentasinya disini.

oke langsung saja kita tambahkan. Buka terminal dan masuk ke project laravel kita tadi. Lalu ketikan perintah berikut:

$ composer require beyondcode/laravel-websockets

jika kalian menemukan error memory limit ketika install package beyondcode/laravel-websockets

memory limit install beyondcode/laravel-websockets

maka solusi cepatnya adalah dengan mengetikan perintah berikut:

$ COMPOSER_MEMORY_LIMIT=-1 composer require beyondcode/laravel-websockets

success install beyondcode/laravel-websockets

Selanjutya import migration untuk websocketnya
$ php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"

Lalu import configuration file
$ php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

Konfigurasi Database

Buka file .env lalu edit pada bagian database, sesuai konfigurasi database Anda:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=whatseps
DB_USERNAME=root
DB_PASSWORD=

Selanjutnya run migrasi yang sudah ada:

$ php artisan migrate

Konfigurasi Laravel Websockets

Dokumentasi aslinya ada disini.
Pertama kita akan konfigurasi file .env untuk Pusher variable:

PUSHER_APP_ID=123456
PUSHER_APP_KEY=bebasDeh
PUSHER_APP_SECRET=skuyAja
PUSHER_APP_CLUSTER=mt1

Untuk PUSHER_APP_CLUSTER biarkan default.

Lalu ganti broadcast driver dengan pusher:

BROADCAST_DRIVER=pusher

Kedua, kita ubah file config/broadcasting.php dengan setingan lokal webserver kita tadi, pada bagian:

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'encrypted' => false,
        'host' => '127.0.0.1',
        'port' => 6001,
        'scheme' => 'http',
    ],
],

Ketiga, run websocket server dengan perintah berikut pada terminal:

$ php artisan websockets:serve

Buka tab baru browser ketikan http://127.0.0.1:8000/laravel-websockets, tekan tombol connect, lalu lihat apakah sudah berhasil.

jika menggunakan valet: http://whatseps-app.test/laravel-websockets

success run websocket server

Langkah tambahan

Selanjutnya kita akan mengaktifkan event broadcast pada laravel

bukan file config/app.php, pada bagian providers, uncomment
App\Providers\BroadcastServiceProvider::class,

Instal pusher php server, buka terminal, ketikan:
$ composer require pusher/pusher-php-server "~4.0"

Sekian dulu untuk tutorial kali ini. Jika ada yang kurang faham, silahkan bertanya.

Tunggu untuk part selanjutnya.