Pendahuluan

Real-time chat adalah salah satu fitur yang sangat diminati dalam aplikasi modern. Dengan menggunakan Laravel dan Pusher, Anda dapat dengan mudah membangun aplikasi chat real-time. Artikel ini akan memberikan panduan langkah demi langkah untuk membuat aplikasi chat sederhana yang dapat berkomunikasi secara real-time.

Persiapan

Sebelum memulai, pastikan Anda telah memiliki lingkungan pengembangan Laravel yang terpasang. Anda juga perlu membuat akun di Pusher dan mendapatkan kredensial API.

Instalasi Laravel dan Pusher

Membuat Proyek Laravel Baru:

composer create-project --prefer-dist laravel/laravel chat-app

Menginstal Paket Pusher:

Laravel menyediakan integrasi yang mudah dengan Pusher melalui paket pusher-php-server. Anda dapat menginstalnya dengan perintah berikut:

composer require pusher/pusher-php-server

Mengonfigurasi Pusher di Laravel:

Buka file .env dan tambahkan konfigurasi Pusher Anda:

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

Selanjutnya, buka file config/broadcasting.php dan setel driver 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'),
            'useTLS' => true,
        ],
    ],
    // koneksi lainnya...
],

Membuat Model, Migrasi, dan Kontroler

1. Membuat Model dan Migrasi untuk Pesan:

php artisan make:model Message -m

Buka file migrasi di database/migrations dan tambahkan skema tabel messages:

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateMessagesTable extends Migration
{
    public function up()
    {
        Schema::create('messages', function (Blueprint $table) {
            $table->id();
            $table->string('user');
            $table->text('message');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('messages');
    }
}

Jalankan migrasi:

php artisan migrate

Membuat Kontroler untuk Mengelola Pesan:

php artisan make:controller MessageController

Buka file app/Http/Controllers/MessageController.php dan tambahkan metode untuk menyimpan dan mengambil pesan:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Message;
use Pusher\Pusher;

class MessageController extends Controller
{
    public function index()
    {
        return Message::all();
    }

    public function store(Request $request)
    {
        $message = Message::create([
            'user' => $request->user,
            'message' => $request->message,
        ]);

        // Kirim event ke Pusher
        $options = array(
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'useTLS' => true
        );
        $pusher = new Pusher(
            env('PUSHER_APP_KEY'),
            env('PUSHER_APP_SECRET'),
            env('PUSHER_APP_ID'),
            $options
        );

        $pusher->trigger('chat-channel', 'message-sent', $message);

        return $message;
    }
}

Membuat Antarmuka Pengguna dengan Vue.js

1. Menginstal Vue.js:Laravel sudah termasuk Vue.js secara default. Anda hanya perlu mengaktifkannya dengan menjalankan:

npm install
npm run dev

Mengedit Komponen Vue:

Buka file resources/js/app.js dan tambahkan komponen untuk chat:

import Vue from 'vue';
import ChatComponent from './components/ChatComponent.vue';

new Vue({
    el: '#app',
    components: {
        ChatComponent
    }
});

Buat file resources/js/components/ChatComponent.vue:

<template>
    <div>
        <div v-for="message in messages" :key="message.id">
            <strong>{{ message.user }}</strong>: {{ message.message }}
        </div>
        <input v-model="user" placeholder="Your name">
        <input v-model="message" @keyup.enter="sendMessage" placeholder="Type a message">
    </div>
</template>

<script>
import axios from 'axios';
import Echo from "laravel-echo";
window.Pusher = require('pusher-js');

export default {
    data() {
        return {
            messages: [],
            user: '',
            message: ''
        };
    },
    mounted() {
        this.getMessages();

        Echo.channel('chat-channel')
            .listen('MessageSent', (e) => {
                this.messages.push({
                    user: e.user,
                    message: e.message
                });
            });
    },
    methods: {
        getMessages() {
            axios.get('/messages').then(response => {
                this.messages = response.data;
            });
        },
        sendMessage() {
            axios.post('/messages', {
                user: this.user,
                message: this.message
            }).then(response => {
                this.message = '';
            });
        }
    }
}
</script>

<style scoped>
/* Tambahkan gaya CSS di sini */
</style>

Menambahkan Laravel Echo dan Pusher

Menginstal Laravel Echo dan Pusher JS:

npm install --save laravel-echo pusher-js

Mengonfigurasi Laravel Echo:

Buka file resources/js/bootstrap.js dan tambahkan konfigurasi Laravel Echo:

import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

Membuat Event Laravel:

php artisan make:event MessageSent

Buka file app/Events/MessageSent.php dan tambahkan:

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\ShouldBroadcast;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class MessageSent implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user;
    public $message;

    public function __construct($user, $message)
    {
        $this->user = $user;
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new Channel('chat-channel');
    }

    public function broadcastAs()
    {
        return 'message-sent';
    }
}

Menjalankan Aplikasi

Setelah semua langkah di atas selesai, Anda dapat menjalankan aplikasi chat dengan perintah berikut:

php artisan serve

Buka browser dan akses aplikasi di http://localhost:8000. Anda sekarang memiliki aplikasi chat real-time yang berfungsi menggunakan Laravel dan Pusher.

Kesimpulan

Membangun aplikasi chat real-time dengan Laravel dan Pusher relatif mudah dan cepat. Dengan mengikuti panduan ini, Anda dapat membuat aplikasi chat yang responsif dan dapat diandalkan. PWA memungkinkan Anda untuk memberikan pengalaman pengguna yang lebih baik, bahkan dalam kondisi jaringan yang buruk.