Membangun Aplikasi Chat Real-Time dengan Laravel, Pusher, dan Vue.js

Aplikasi chat real-time telah menjadi fitur penting di banyak aplikasi modern. Dari kolaborasi tim hingga dukungan pelanggan, kemampuan untuk berkomunikasi secara instan memberikan pengalaman pengguna yang jauh lebih baik. Dalam tutorial ini, kita akan mempelajari cara membangun aplikasi chat real-time lengkap menggunakan Laravel sebagai backend API, Pusher untuk komunikasi real-time, dan Vue.js untuk frontend. Target audiens kita adalah pengembang pemula hingga menengah yang tertarik dengan aplikasi real-time.

Mengapa Laravel, Pusher, dan Vue.js?

  • Laravel: Framework PHP yang elegan dan mudah digunakan, menyediakan struktur yang kokoh untuk membangun backend API. Dengan fitur-fitur seperti ORM (Eloquent), routing, dan sistem otentikasi yang kuat, Laravel menyederhanakan pengembangan backend.
  • Pusher: Platform layanan real-time yang mempermudah implementasi fitur-fitur seperti notifikasi push, chat, dan pembaruan data secara real-time. Pusher menangani kompleksitas infrastruktur real-time, memungkinkan kita untuk fokus pada logika aplikasi.
  • Vue.js: Framework JavaScript progresif yang ringan dan mudah dipelajari, ideal untuk membangun antarmuka pengguna interaktif. Dengan sistem reaktifnya, Vue.js secara otomatis memperbarui tampilan saat data berubah, memastikan pengalaman pengguna yang mulus.

Langkah-langkah Pengembangan:

1. Persiapan Lingkungan Pengembangan

Sebelum memulai, pastikan Anda memiliki:

  • PHP: Versi 7.4 atau lebih tinggi.
  • Composer: Dependency manager untuk PHP.
  • Node.js: Lingkungan runtime JavaScript.
  • npm atau Yarn: Package manager untuk JavaScript.
  • Laravel CLI: Command-line interface untuk Laravel.
  • Akun Pusher: Daftar akun gratis di https://pusher.com/. Catat App ID, Key, Secret, dan Cluster Anda.

2. Instalasi dan Konfigurasi Laravel

  • Buat Proyek Laravel Baru:

Buka terminal/command prompt Anda dan jalankan perintah berikut:

composer create-project --prefer-dist laravel/laravel chat-app
cd chat-app
  • Konfigurasi Database:

Edit file .env di root proyek Anda. Sesuaikan pengaturan database dengan konfigurasi database lokal Anda. Contoh:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=chat_app
DB_USERNAME=root
DB_PASSWORD=
  • Jalankan Migrasi Database:
php artisan migrate

Jika Anda belum membuat database chat_app, buatlah terlebih dahulu menggunakan MySQL client Anda (misalnya, phpMyAdmin atau MySQL Workbench).

3. Instalasi dan Konfigurasi Pusher

  • Instal Pusher PHP SDK:
composer require pusher/pusher-php-server
  • Konfigurasi Pusher di Laravel:

Edit file .env dan tambahkan variabel lingkungan untuk Pusher:

PUSHER_APP_ID=YOUR_PUSHER_APP_ID
PUSHER_APP_KEY=YOUR_PUSHER_APP_KEY
PUSHER_APP_SECRET=YOUR_PUSHER_APP_SECRET
PUSHER_APP_CLUSTER=YOUR_PUSHER_APP_CLUSTER

Ganti YOUR_PUSHER_APP_ID, YOUR_PUSHER_APP_KEY, YOUR_PUSHER_APP_SECRET, dan YOUR_PUSHER_APP_CLUSTER dengan kredensial Pusher Anda.

Kemudian, edit file config/broadcasting.php dan sesuaikan konfigurasi Pusher:

'connections' => [
'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' => true,
],
],
// ...
],

4. Membuat Model, Migrasi, dan Controller untuk Pesan

  • Buat Model Message:
php artisan make:model Message
  • Edit Migrasi create_messages_table:

Temukan file migrasi yang baru dibuat di direktori database/migrations. Tambahkan kolom user_id dan message ke skema tabel:

$table->unsignedBigInteger('user_id');
$table->text('message');
$table->timestamps();
$table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('messages');
}
}
  • Jalankan Migrasi:
php artisan migrate
  • Edit Model Message:

Tambahkan properti $fillable untuk mengizinkan mass assignment:

}
}
  • Buat Controller MessageController:
php artisan make:controller MessageController
  • Tambahkan Method index dan store ke MessageController:
return response()->json($messages);
}
public function store(Request $request)
{
$message = new Message();
$message->user_id = Auth::id();
$message->message = $request->message;
$message->save();
broadcast(new AppEventsMessageSent($message->load('user')))->toOthers();
return response()->json($message->load('user'), 201);
}
}

Pastikan Anda sudah mengimpor namespace yang dibutuhkan: use AppModelsMessage;, use IlluminateHttpRequest;, dan use IlluminateSupportFacadesAuth;.

5. Membuat Event dan Listener untuk Pusher

  • Buat Event MessageSent:
php artisan make:event MessageSent
  • Edit Event MessageSent:
}
/**
* Get the channels the event should broadcast on.
*
* @return Channel|array
*/
public function broadcastOn()
{
return new PrivateChannel('chat');
}
public function broadcastWith()
{
return [
'message' => [
'id' => $this->message->id,
'user_id' => $this->message->user_id,
'message' => $this->message->message,
'created_at' => $this->message->created_at,
'updated_at' => $this->message->updated_at,
'user' => $this->message->user,
],
];
}
}

Pastikan Anda mengimplementasikan ShouldBroadcast dan menambahkan properti $message. Metode broadcastOn mendefinisikan channel Pusher yang akan digunakan. broadcastWith mendefinisikan data yang akan dikirimkan ke frontend.

6. Membuat Route untuk API

Edit file routes/api.php dan tambahkan route untuk pesan:

return $request->user();
});
Route::middleware('auth:sanctum')->get('/messages', [MessageController::class, 'index']);
Route::middleware('auth:sanctum')->post('/messages', [MessageController::class, 'store']);

Kita menggunakan middleware auth:sanctum untuk melindungi route ini, yang berarti pengguna harus terautentikasi untuk mengaksesnya.

7. Membuat Autentikasi Pengguna (Laravel Sanctum)

  • Instal Laravel Sanctum:
composer require laravel/sanctum
  • Publikasikan Konfigurasi Sanctum:
php artisan vendor:publish --provider="LaravelSanctumSanctumServiceProvider"
  • Jalankan Migrasi:
php artisan migrate
  • Tambahkan HasApiTokens ke Model User:
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateFoundationAuthUser as Authenticatable;
use IlluminateNotificationsNotifiable;
use LaravelSanctumHasApiTokens;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
// ...
}
  • Buat Controller dan Route untuk Registrasi dan Login:

Buat controller AuthController:

php artisan make:controller AuthController

Tambahkan method register dan login ke AuthController:

'name' => 'required|string',
'email' => 'required|email|unique:users',
'password' => 'required|confirmed'
]);
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => Hash::make($request->password)
]);
$token = $user->createToken('auth_token')->plainTextToken;
return response()->json([
'access_token' => $token,
'token_type' => 'Bearer',
]);
}
public function login(Request $request)
{
$request->validate([
'email' => 'required|email',
'password' => 'required'
]);
if (!Auth::attempt($request->only('email', 'password'))) {
return response()->json([
'message' => 'Invalid login credentials'
], 401);
}
$user = User::where('email', $request['email'])->firstOrFail();
$token = $user->createToken('auth_token')->plainTextToken;
return response()->json([
'access_token' => $token,
'token_type' => 'Bearer',
]);
}
}

Tambahkan route ke routes/api.php:

Route::post('/register', [AuthController::class, 'register']);
Route::post('/login', [AuthController::class, 'login']);

8. Implementasi Frontend dengan Vue.js

  • Instal Vue CLI:
npm install -g @vue/cli
  • Buat Proyek Vue.js Baru:
vue create chat-app-frontend

Pilih preset default atau sesuaikan sesuai kebutuhan Anda.

  • Instal Pusher JS dan Axios:
cd chat-app-frontend
npm install pusher-js axios
  • Buat Komponen Chat:

Buat file src/components/Chat.vue:


{{ message.user.name }}:
{{ message.message }}
Send

Pastikan Anda membuat file .env.local di direktori chat-app-frontend dan menambahkan variabel lingkungan berikut:

VUE_APP_PUSHER_APP_KEY=YOUR_PUSHER_APP_KEY
VUE_APP_PUSHER_APP_CLUSTER=YOUR_PUSHER_APP_CLUSTER

Ganti YOUR_PUSHER_APP_KEY dan YOUR_PUSHER_APP_CLUSTER dengan kredensial Pusher Anda.

  • Impor dan Gunakan Komponen Chat di App.vue:

9. Uji Aplikasi Chat

  • Jalankan Server Laravel:
php artisan serve
  • Jalankan Server Vue.js:
npm run serve

Buka dua browser berbeda dan login dengan dua akun pengguna yang berbeda. Anda sekarang harus dapat mengirim pesan antara kedua browser secara real-time.

Kesimpulan

Dalam tutorial ini, kita telah membangun aplikasi chat real-time lengkap menggunakan Laravel, Pusher, dan Vue.js. Kita telah mempelajari cara mengkonfigurasi Laravel untuk menggunakan Pusher, membuat event dan listener untuk mengirim pesan secara real-time, dan membangun frontend Vue.js untuk menampilkan dan mengirim pesan.

Ini hanyalah dasar dari aplikasi chat. Anda dapat memperluasnya dengan menambahkan fitur-fitur seperti:

  • Otentikasi pengguna: Menggunakan Laravel Sanctum untuk mengamankan API Anda.
  • Ruang obrolan: Mengizinkan pengguna untuk membuat dan bergabung dengan ruang obrolan yang berbeda.
  • Notifikasi: Memberi tahu pengguna tentang pesan baru.
  • Emoji dan gambar: Mengizinkan pengguna untuk mengirim emoji dan gambar.
  • Status online: Menampilkan status online pengguna lain.

Dengan kombinasi Laravel, Pusher, dan Vue.js, Anda dapat membangun aplikasi real-time yang kuat dan interaktif dengan mudah. Selamat mencoba!