Menambah sembang masa nyata ke laravel menggunakan reverb & vue

Laravel, kerangka PHP yang popular, keuntungan yang dipertingkatkan keupayaan masa nyata dengan Reverb, pelayan WebSocket yang kuat. Pakej rasmi Laravel ini memudahkan integrasi ciri-ciri masa nyata, meningkatkan interaksi pengguna dengan ketara.

Apa itu Laravel Reverb?

Reverb bertindak sebagai jambatan antara aplikasi Laravel anda dan penggunanya, membolehkan komunikasi bidirectional, masa nyata melalui WebSockets. Ini membolehkan kemas kini dinamik tanpa memuat semula halaman penuh, mewujudkan pengalaman pengguna yang lebih responsif.

Ciri -ciri Utama Laravel Reverb:

Prestasi tinggi:

menyampaikan kelajuan yang luar biasa untuk pemindahan data masa nyata.
• skalabiliti:
mudah mengendalikan pangkalan pengguna yang semakin meningkat dan peningkatan lalu lintas.
• Integrasi mudah:
berfungsi dengan lancar dengan penyiaran Laravel dan Laravel Echo untuk pembangunan yang diperkemas.
• Kemas kini segera:
Kemas kini, mesej, dan acara tolak kepada pelanggan dengan serta -merta.
• Keselamatan yang teguh:
Termasuk penyulitan data dan pengesahan untuk komunikasi yang selamat.
Membina aplikasi sembang masa nyata dengan Laravel Reverb

Panduan ini menunjukkan membuat aplikasi sembang dinamik menggunakan reverb. Mesej dihantar dengan serta -merta, memastikan pengalaman pengguna cecair.

Langkah 1: Menyediakan projek Laravel anda

Pastikan anda mempunyai aplikasi Laravel (versi 11 atau lebih tinggi disyorkan). Gunakan

untuk projek baru.

• composer create-project laravel/laravel your-chat-app-name
Langkah 2: Pasang dan konfigurasikan Reverb

Pasang reverb menggunakan:

Konfigurasi reverb dalam

dan tetapkan pembolehubah persekitaran berikut:

php artisan install:broadcasting

config/reverb.php fail

(terletak di

<code>BROADCAST_DRIVER=reverb
REVERB_APP_ID=my-app-id
REVERB_APP_KEY=my-app-key
REVERB_APP_SECRET=my-app-secret</code>

) juga akan dijana secara automatik. Rujuk Dokumentasi Laravel (

https://www.php.cn/link/865e434f7f48e0e93f69cbb938b06809 echo.js) untuk konfigurasi khusus pelayan. resources/js Langkah 3: Menjalankan pelayan reverb

Mulakan pelayan reverb dengan:

(gunakan

dan

pilihan atau pembolehubah persekitaran

php artisan reverb:start

dan

untuk konfigurasi tersuai.) --host --port REVERB_SERVER_HOST Langkah 4: Persediaan Pangkalan Data REVERB_SERVER_PORT

Konfigurasikan pangkalan data anda dalam fail . (Contoh Menggunakan SQLite):

Buat fail pangkalan data: .env

<code>DB_CONNECTION=sqlite
DB_DATABASE=/path/to/database.sqlite</code>

Contoh ini menggunakan lima bilik sembang yang telah ditetapkan. Buat model

dan penghijrahan: touch /path/to/database.sqlite

php artisan install:broadcasting

Migrasi (database/migrations/*.php) harus termasuk:

<code>BROADCAST_DRIVER=reverb
REVERB_APP_ID=my-app-id
REVERB_APP_KEY=my-app-key
REVERB_APP_SECRET=my-app-secret</code>

Jalankan penghijrahan: php artisan migrate

tambah hubungan dengan model ChatMessage (): app/Models/ChatMessage.php

php artisan reverb:start

Langkah 5: Buat Acara MessageSent

Buat acara

(MessageSent): app/Events/MessageSent.php

<code>DB_CONNECTION=sqlite
DB_DATABASE=/path/to/database.sqlite</code>

Langkah 6: Buat laluan saluran peribadi

Tentukan saluran peribadi dalam

: routes/channels.php

php artisan make:model ChatMessage --migration

Langkah 7: Tentukan Laluan

Tentukan laluan yang diperlukan dalam

: routes/web.php

• Laluan bilik sembang:

  Schema::create('chat_messages', function (Blueprint $table) {
      $table->id();
      $table->foreignId('receiver_id');
      $table->foreignId('sender_id');
      $table->text('text');
      $table->timestamps();
  });

• Dapatkan laluan mesej sembang:

  <?php
  
  namespace App\Models;
  
  use Illuminate\Database\Eloquent\Model;
  use Illuminate\Database\Eloquent\Factories\HasFactory;
  
  class ChatMessage extends Model
  {
      use HasFactory;
  
      protected $fillable = ['sender_id', 'receiver_id', 'text'];
  
      public function sender()
      {
          return $this->belongsTo(User::class, 'sender_id');
      }
  
      public function receiver()
      {
          return $this->belongsTo(User::class, 'receiver_id');
      }
  }

• Kirim laluan mesej sembang:

  <?php
  
  namespace App\Events;
  
  use App\Models\ChatMessage;
  use Illuminate\Broadcasting\InteractsWithSockets;
  use Illuminate\Broadcasting\PrivateChannel;
  use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
  use Illuminate\Foundation\Events\Dispatchable;
  use Illuminate\Queue\SerializesModels;
  
  class MessageSent implements ShouldBroadcastNow
  {
      use Dispatchable, InteractsWithSockets, SerializesModels;
  
      public function __construct(public ChatMessage $message) {}
  
      public function broadcastOn(): array
      {
          return [
              new PrivateChannel("chat.{$this->message->receiver_id}"),
          ];
      }
  }

Langkah 8: Buat paparan bilah () resources/views/chat.blade.php

Broadcast::channel('chat.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

Langkah 9: Buat komponen vue.js ()

resources/js/components/ChatComponent.vue (kod komponen vue.js yang disediakan dalam prompt asal)

Langkah 10: Jalankan projek

run ,

, dan

. php artisan serve npm run dev php artisan reverb:start kod sumber:

(pautan yang disediakan dalam prompt asal)

Pelancaran terperinci ini menyediakan panduan komprehensif untuk membina aplikasi sembang masa nyata menggunakan Laravel Reverb dan Vue.js. Ingatlah untuk menyesuaikan laluan dan konfigurasi untuk memadankan persediaan projek anda.

Atas ialah kandungan terperinci Menambah sembang masa nyata ke laravel menggunakan reverb & vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!