close

Membina Real-Time Aplikasi Sembang dengan Laravel WebSocket

Aplikasi real-time sembang ialah contoh terbaik bagaimana WebSocket boleh merevolusikan real-time komunikasi interaktif di web. Dalam artikel ini, kami akan meneruskan pembinaan aplikasi sembang mudah menggunakan Laravel dan menyepadukan WebSocket menggunakan laravel-websockets package untuk menyampaikan pengalaman komunikasi yang responsif dan interaktif kepada pengguna.

Objektif Permohonan

Kami akan membina real-time aplikasi sembang dengan ciri-ciri berikut:

Hantar dan Terima Mesej Serta-merta: Pengguna boleh menghantar dan menerima mesej serta-merta tanpa perlu memuat semula halaman.

Senarai Pengguna Dalam Talian: Aplikasi akan memaparkan senarai pengguna dalam talian dan status sembang mereka.

Hantar Imej dan Fail: Pengguna boleh berkongsi imej dan fail dalam sembang.

Bermula dengan Pemasangan dan Konfigurasi

Untuk bermula, kita perlu memasang laravel-websockets package dan mengkonfigurasinya untuk disepadukan WebSocket dengan Laravel. Ikut langkah-langkah ini:

Pasang laravel-websockets package: Mulakan dengan memasang package menggunakan Composer.

composer require pusher/pusher-php-server

Terbitkan fail konfigurasi: Selepas pemasangan, terbitkan fail konfigurasi untuk menyesuaikan tetapan.

 

php artisan vendor:publish --tag=websockets-config

Jalankan migration: Cipta jadual pangkalan data yang diperlukan untuk WebSocket.

php artisan migrate

Mulakan WebSocket pelayan: Lancarkan WebSocket pelayan untuk mengendalikan real-time sambungan 

php artisan websockets:serve

Membina Antara Muka Pengguna

Kami akan mencipta antara muka pengguna yang mudah menggunakan HTML, CSS dan JavaScript untuk memaparkan senarai mesej, kotak input dan senarai pengguna dalam talian.

<!-- resources/views/chat.blade.php -->  
  
<div id="app">  
    <div class="chat-container">  
        <div class="chat-box">  
            <div class="chat-messages">  
                <div class="message" v-for="message in messages":key="message.id">  
                    {{ message.user }}: {{ message.content }}  
                </div>  
            </div>  
            <div class="input-box">  
                <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="Enter your message...">  
            </div>  
        </div>  
    </div>  
</div>

Mengintegrasikan WebSocket dan Broadcasting

Kami akan gunakan Laravel Broadcasting untuk menyepadukan WebSocket dengan aplikasi.

Pasang Pusher: Pasang pusher/pusher-php-server package untuk digunakan Pusher sebagai Broadcasting pemacu.

composer require pusher/pusher-php-server

Konfigurasi Broadcasting: Dalam config/broadcasting.php fail, konfigurasikan pemacu dan berikan Pusher kelayakan anda.

'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,  
    ],  
],

Buat acara dan siaran: Buat acara ChatMessageSent dan siarkan apabila pengguna menghantar mesej.

// app/Events/ChatMessageSent.php  
  
public function broadcastOn()  
{  
    return new Channel('chat');  
}

Skrip JavaScript: Gunakan JavaScript untuk mendengar acara daripada pelayan dan mengemas kini antara muka pengguna.

// resources/js/app.js  
  
require('./bootstrap');  
  
import Vue from 'vue';  
import Chat from './components/Chat.vue';  
  
const app = new Vue({  
    el: '#app',  
    components: {  
        Chat  
    }  
});

Kesimpulan

Dengan melengkapkan tutorial ini, anda telah berjaya membina real-time aplikasi sembang menggunakan WebSocket dalam Laravel. Pengguna boleh menghantar dan menerima mesej serta-merta, dan anda telah menyaksikan cara WebSocket menyediakan pengalaman komunikasi yang responsif dan interaktif.