シェア:
){kind=small}
スタンダップ・コメディーの学位論文を持つ俳優の訓練を受け、ミートアップ・シーンを経てPHP開発に携わるようになった。技術について話したり書いたり、レコード・コレクションから変わったレコードを再生したり買ったりしています。
Laravel、Livewire、Reverb、Echoを使ったRCSメッセージング
所要時間：2 分
Time to get our hands dirty with RCS and Laravel!TLDR;デモコードは デモコードはこちら.
Laravel Livewireは、フロントエンドの複雑さを取り除く強力な方法です。このチュートリアルでは、これを使ってRCS (リッチコミュニケーションサービス) メッセンジャーを Vonage Messages APIを使用します。このチュートリアルでは、Vonage Messages APIを使ってRCS ( Rich Communication Services ) メッセンジャーを構築します。 Laravel Livewireバージョン1.0.0が2020年にリリースされたことを考えると。Livewireは Ruby on Railsライブラリ Hotwireからヒントを得て、複雑なフロントエンドのコードを取り除くという、私にとって本当に大切なことを行っている。それは、複雑なフロントエンドのコードを取り除くことだ。 TALLスタックとして知られるようになったものの一部として、確かに多くの採用を見ている。
RCSとは リッチ・コミュニケーション・サービスデファクトスタンダードのSMSメッセージングから、より現代的で高度なメッセージングプロトコルである。SMSはMMS（マルチメディア・メッセージング）の登場によって改良されたと見られているが、後者はまだGSMAネットワークに依存しているため、速度も著しく遅かった。RCSはデータのみを使用するため、Wi-Fiを使用しているか4/5Gを使用しているかは関係ない。データインフラでハイパーコネクテッドな世界では、これはメッセージングが大幅に高速化したことを意味する。また、携帯電話端末のメッセージングアプリケーションには、ネイティブSMSメッセージングと同じものが実装されているため、RCSは過去5年以内に製造されたほとんどの端末で利用することができる。
さて、Livewireを使ってリアルタイムで何かを行うのに、メッセージングWebアプリケーションにRCSを実装する以上のユースケースがあるだろうか？それがこのチュートリアルでやることだ。
PHP 8.4 以上
Laravelインストーラ
ノード22
Npm 6+
Vonageアカウント
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
Laravel インストーラは コンポーザーをグローバルにインストールすることで、新しいLaravelアプリケーションを便利に起動することができます。インストール時には、Laravelの組み込み認証であるLivewireスターターキットを選択します、 Voltはスキップできます。最後に、テストフレームワークの選択は重要ではありません。これで、完全なLaravelアプリケーションがインストールされます。組み込みのマイグレーションを実行して、認証用のUsersテーブルをscaffold outしてください。
ケイレブ・ポルツィオは2020年にLivewireを発表し、当時大きな話題を呼んだ。フロントエンドの複雑さを解消するものであることはすでに述べたが、具体的にはどのようなものなのだろうか？読者の皆さんは私と同じかもしれない。私はバックエンド開発者で、フロントエンドの最も基本的なタスクに常に頭を悩ませている。Livewireは、PHPフロントエンドコンポーネントをJavaScriptコンポーネントであるかのように実装しています。そのため、ステートとビヘイビアのハンドリングは、すべてあなたが知っているPHPコード内で行われ、十分に文書化されたAPIを探索することができます。Livewireをインストールするには、Composerを使います：
composer install livewire/livewire
メッセージングには2つのエンティティが必要です。 Messageと Conversation.ここでの関係は、メッセージ は に属し、会話はユーザに属するという関係です。イベント（メッセージの受信など）をブロードキャストするようになったとき、フロントエンドはそれをユーザと結びつけることができる必要があるからだ。
コマンドラインでマイグレーションを作成する：
php artisan make:model Conversation --migration
php artisan make:model Message --migrationマイグレーションではなくモデルを作成しているため、複数形ではなく単数形の名前を使用していることに注意してください。マイグレーションは --マイグレーションはを追加することでマイグレーションが生成されました。
create_conversations_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('conversations', function (Blueprint $table) {
$table->id();
$table->string('uuid');
$table->foreignId('user_id')->constrained('users');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('conversations');
}
};
create_messages_migration.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('messages', function (Blueprint $table) {
$table->id();
$table->string('message');
$table->timestamps();
$table->foreignId('conversation_id')->constrained();
$table->string('source');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('messages');
}
};重要なのは sourceフィールドがあることがわかる：
internalexternal
これは、フロントエンドが会話のようなビューを正しくレンダリングできるようにするために重要である。
必要なリレーションシップも追加したので、今度はモデルでリレーションシップを定義する：
Models\Conversation.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;
class Conversation extends Model
{
public $timestamps = false;
public function messages(): HasMany
{
return $this->hasMany(Message::class);
}
public function user()
{
return $this->belongsTo(User::class);
}
}
Models\Messages.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Log;
class Message extends Model
{
use BroadcastsEvents;
public $timestamps = true;
public $table = 'messages';
public $fillable = ['message', 'conversation_id', 'created_at', 'updated_at'];
public function conversation()
{
return $this->belongsTo(Conversation::class);
}
種をまかなくてはならないことが2つある：
テストユーザー（UIから登録するのではなく）
メッセージに添付するプレースホルダ会話。実際には、これらの会話を動的に作成したいところですが、このチュートリアルの目的では、すべてのメッセージはプレースホルダの会話に結びつけられます。
コマンドラインで MessagesSeederをコマンドラインで生成する：
php artisan make:seeder MessagesSeederこれで、シーダーは必要なプレースホルダーを2つとも処理できるようになった：
MessagesSeeder.php
<?php
namespace Database\Seeders;
use App\Models\Conversation;
use App\Models\User;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\Hash;
class MessagesSeeder extends Seeder
{
/**
* Run the database seeds.
*/
public function run(): void
{
$user = User::create([
'name' => 'Admin',
'email' => 'admin@admin.com',
'password' => Hash::make('password'),
]);
$conversation = Conversation::create([
'uuid' => 'e2efbc00-b65e-4e47-8996-1de0043ed667',
'user_id' => $user->id
]);
}
}マイグレーションとシーダーを実行することで、それらとのやりとりを開始する前に、データベース内にすべてのものが配置される：
php artisan migrate
php artisan db:seed
データをセットアップしたら、次はルートとコントローラを作成します。
php artisan make:controller MessagesController今のところ、コントローラがすることはただ一つ、ビューをレンダリングすることだけだ。
<?php
namespace App\Http\Controllers;
use App\Models\Message;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Log;
class MessagesController extends Controller
{
public function index()
{
return view('messages');
}
}その見方、 messages,はまだ存在しないので、作ってみよう：
php artisan make:view messagesそしてそれをコード化する：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Livewire Messenger</title>
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
@vite(['resources/css/app.css', 'resources/js/app.js'])
@fluxAppearance
</head>
<body class="bg-gray-100 min-h-screen flex flex-col" style="background-image: url('{{ asset('vonage background.png') }}'); background-size: cover; background-position: center;">
<div class="flex items-center space-x-3 p-4 bg-black">
<img src="{{ asset('vonage-logo.png') }}" alt="Vonage Logo" class="h-16 px-4 w-auto">
<h2 class="text-xl font-bold text-white drop-shadow">Laravel Livewire x Reverb x Echo Messenger</h2>
</div>
</body>
</html>最後に、これらすべてをルートで結ぶ：
routes/web.php
Route::get('/messages', [MessagesController::class, 'index']);
機能を紹介する時が来た。Model-View-Controllerの伝統的なアプローチの代わりに、このアプリはLivewireコンポーネント内の機能に依存します。PHP開発者のために、 Livewireコンポーネントは、独自のペアビューテンプレートを持つ通常のコントローラのように見えますが、状態の変更はフロントエンドにプッシュされます。コマンドラインでLivewireコントローラを作成します：
php artisan livewire:make RcsComponentこのLivewireコンポーネントは messageビューに含まれます。このコンポーネントは、シードされた会話の全てのメッセージをロードし、2つのことを行います：
メッセージを送信するオプションです。 PHP SDK.このメッセージを送信すると、コンポーネントが再読み込みされます。 ORMLivewireは、更新された状態をプッシュします。
シードされた会話に変更がないかリッスンし、コントローラが ウェブフックを受信したときにロードします。
Livewire テンプレートは、通常のテンプレートとは別のディレクトリにあります。 Bladeテンプレートとは別のディレクトリにあります。新しいコンポーネントのテンプレートに移動し、スタイルを設定します：
livewire/rcs-component.blade.php
<div class="flex-1 flex flex-col justify-between px-4">
<div class="overflow-y-auto space-y-2 mb-4 px-2" style="max-height: calc(100vh - 200px);">
@forelse ($messages as $message)
<div class="flex {{ $message->source === 'internal' ? 'justify-end' : 'justify-start' }}">
<div class="max-w-xs md:max-w-md px-4 py-2 rounded-lg
{{ $message->source === 'internal' ? 'bg-green-500 text-white rounded-br-none' : 'bg-white text-gray-800 rounded-bl-none shadow' }}">
<p>{{ $message->message }}</p>
<p class="text-xs text-gray-300 mt-1 text-right">
{{ $message->created_at->diffForHumans() }}
</p>
</div>
</div>
@empty
<p class="text-gray-100 text-center mt-4">No messages found.</p>
@endforelse
</div>
<form wire:submit.prevent="sendMessage" class="flex items-center space-x-2 border-t pt-2 bg-white p-2 rounded shadow">
<input
type="text"
wire:model.defer="postMessage"
placeholder="Type a message"
class="flex-1 border text-black rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-offset-purple-500"
>
<button type="submit" class="bg-purple-500 text-white px-4 py-2 rounded-full hover:bg-purple-400">
Send
</button>
</form>
</div>これは "WhatsApp "スタイルのメッセージパネルを作成します。このコンポーネントは $messagesとしてインクルードされたコレクションを受け取り、それらをレンダリングし、メッセージを送信するためにLivewireコンポーネント内のPHPコードをコールバックするシンタックスを含んでいます。 sendMessage().まだコード化していないので、Livewireコンポーネントのロジックに向かい、以下のようにコード化してください：
Livewire\RcsComponent
<?php
namespace App\Livewire;
use App\Models\Conversation;
use App\Models\Message;
use Illuminate\Support\Facades\Http;
use Livewire\Component;
use Vonage\Client;
use Vonage\Messages\Channel\RCS\RcsText;
class Rcs extends Component
{
public $messages;
public string $postMessage = '';
public function mount()
{
$this->loadMessages();
}
public function loadMessages(): void
{
$conversation = Conversation::where('uuid', env('CONVERSATION_ID'))->first();
$this->messages = Message::where('conversation_id', $conversation->id)->orderBy('timestamp', 'desc')->get();
}
public function sendMessage(): void
{
Http::withHeaders(['Accept' => 'application/json'])
->post(route('messages.store'), [
'message' => $this->postMessage,
'source' => 'internal'
]);
$this->postMessage = '';
$this->loadMessages();
}
public function render()
{
return view('livewire.rcs-component', $this->messages);
}
public function refresh()
{
$this->loadMessages();
}
}このロジックを紐解いてみよう：
クラス・プロパティ
$postMessageはコンポーネントの状態として機能します。この状態は、現在処理されているメッセージであり、コンポーネントのテンプレートを見ると、フロントエンドとバックエンドをリンクする構文があることがわかります：wire:model.defer="postMessage"クラス・プロパティ
$messagesプロパティもコンポーネントのステートとして機能し、会話に添付されたメッセージの完全なコレクションです。このプロパティは、先ほど作成したテンプレートfor $messages as $message)ここには3つのLivewire固有のマジックメソッドがあります：
mount()コンポーネントが最初にレンダリングされるときに実行されます、refresh()ステートの変更が発生したときに実行されます。render()コンポーネントのライフサイクルの終了時に実行されます。mount()で再利用されるメソッドを呼び出す。render()で再利用されるメソッドを呼び出す。loadMessages()loadMessages()はEloquent ORMを使って2つのことをやっています。第一に、環境変数であるConversation環境変数を使用しています、CONVERSATION_ID環境変数Conversation.そのIDにアタッチされたすべてのメッセージが取得され$messagesプロパティに書き込まれます。
環境変数を追加していないので .envにアクセスして CONVERSATION_ID=e2efbc00-b65e-4e47-8996-1de0043ed667を追加する。このIDは、シードされたダミー会話に書き込まれたものと同じUUIDだ。
これらのエンティティがどのように動作するのか、基本的にモックAPIを書いているのだから、エンティティをREST経由で公開するのは良い習慣だ。この sendMessageメソッドはEloquent ORMを使用して新しいメッセージを作成し、それをデータベースに永続化しません。 $postMessageの内容を受け取り、公開された内部APIエンドポイントにPOSTします。これはまだコード化されていないエンドポイントを必要とするので、routesファイルに行って追加してください：
routes\web.php
Route::post('/create-message', [MessagesController::class, 'store'])->name(messages.store');次に store()メソッドを MessagesController:
MessagesController.php
public function store(Request $request): JsonResponse
{
$validated = $request->validate([
'message' => 'required|string',
]);
$conversation = Conversation::where('uuid', env('CONVERSATION_ID'))->first();
$message = new Message();
$message->message = $validated['message'];
$message->created_at = now();
$message->updated_at = now();
$message->conversation_id = $conversation->id;
$message->save();
return response()->json([
'status' => 'success',
'data' => $message
], 201);
}入力はバリデートされ、次にこのロジックでは Messageエンティティはデータベースによって永続化され、ダミーのシード・エンティティにアタッチされる。 Conversationエンティティにアタッチされる。
Livewireが動作するには、アプリケーションテンプレートにいくつかのスタイルとJavaScriptを追加する必要があります。Bladeで使用できる便利なヘルパーメソッドがいくつか含まれています。コンポーネントの親テンプレートページに向かい、コードを以下のように変更してください：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Livewire Messenger</title>
@livewireStyles
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
@vite(['resources/css/app.css', 'resources/js/app.js'])
@fluxAppearance
</head>
<body class="bg-gray-100 min-h-screen flex flex-col" style="background-image: url('{{ asset('vonage background.png') }}'); background-size: cover; background-position: center;">
<div class="flex items-center space-x-3 p-4 bg-black">
<img src="{{ asset('vonage-logo.png') }}" alt="Vonage Logo" class="h-16 px-4 w-auto">
<h2 class="text-xl font-bold text-white drop-shadow">Laravel Livewire x Reverb x Echo Messenger</h2>
</div>
<livewire:rcs />
@livewireScripts
</body>
</html>ここで追加されたのは3つだ：
@livewireStyles必須CSSクラスを取り込む@livewireScriptsJavaScriptの必須機能を取り入れる<livewire:rcs />Livewireコンポーネントをページに追加します。
次にアプリができるようにする必要があるのは、ウェブフックの形で Vonage からの受信データを処理することだ。このWebhookは、Vonageダッシュボードで設定され、エンドユーザーデバイスの会話で設定された番号にユーザーが返信すると、JSONペイロードとしてユーザーが定義したURLで発行されます。 HTTP POST.まず、ルートを追加します：
routes\web.php
Route::post('/messages/webhook', [MessagesController::class, 'webhook'])->name(messages.webhook');ここで webhook()メソッドを MessagesController.
MessagesContoller.php
public function webhook(Request $request)
{
$payload = $request->all();
$newMessage = Message::create([
'message' => $payload['text'],
'source' => 'external',
'conversation_id' => 1
]);
return response()->json([
'status' => 200
]);
}もともとは、REST APIを再利用するためにこのロジックを書いたのだが、実行時に2つの異なるドメインを取ることにはセキュリティ上の意味があったので、この例ではごまかし、Eloquentを使ってウェブフック・メッセージをデータベースに書き込み、Vonageに200を返すようにした。
内部の配線はすべて終わったが、まだVonageに何も送っていないことにお気づきだろうか。 まだVonageに何も送信していないことにお気づきでしょう。 これは sendMessageメソッドで行う必要があります。Vonage PHP SDKは、アプリケーションIDと private.key,これはVonage Dashboardで作成され、アプリケーションに番号を割り当てる必要があります。
アプリケーションを作成するには アプリケーションの作成ページでアプリケーションの名前を定義します。
Webhooksを使用するAPIを使用する場合は、秘密鍵が必要です。Generate public and private key "をクリックすると、自動的にダウンロードが始まります。この鍵は紛失すると再ダウンロードできません。この鍵は紛失しても再ダウンロードできません。 private_<あなたのアプリID>.key.この鍵はAPIコールの認証に使用できます。 注意：アプリケーションを保存するまで、キーは機能しません。
必要な機能（Voice、Messages、RTCなど）を選択し、必要なWebhook（イベントURL、応答URL、受信メッセージURLなど）を提供します。これらはチュートリアルで説明します。
保存してデプロイするには、"Generate new application "をクリックして設定を確定します。これでアプリケーションはVonage APIで使用する準備が整いました。
RCSを使用するには、エージェントとして登録する必要があります。その方法については を参照されたい。.
VonageがWebhookを送信できるように、アプリケーションをインターネットに公開する必要があります。これにはngrokを使う。ngrokをインストールしたら、コマンドラインで起動する：
ngrok http 8080ポート8080を指す公開用のURLが取得されます。このURLはRCSアプリケーションのVonage Dashboardに次のように入力する必要があります：
Configuring our webhooks
現在のところ sendMessage()は実際にはメッセージを送信しないので、それを設定します。コマンドラインでComposerを使ってVonage PHP SDKをインストールします：
composer require vonage/clientここで、Vonageアカウントの認証情報と、ダッシュボードからダウンロードした private.keyClient オブジェクトをセットアップし、それを使って RCS メッセージを送信します。あなたの sendMessage()はこのようになるはずだ：
public function sendMessage(): void
{
$applicationId = 'your-application-id';
$privateKey = file_get_contents(base_path(config('path-to-your-private-key')));
$credentials = new Client\Credentials\Keypair($privateKey, $applicationId);
$client = new Client($credentials);
$rcsMessage = new RcsText('your-vonage-number, 'your-configured-from-id, $this->postMessage);
$client->messages()->send($rcsMessage);
Http::withHeaders(['Accept' => 'application/json'])
->post(route('messages.store'), [
'message' => $this->postMessage,
'source' => 'internal'
]);
$this->postMessage = '';
$this->loadMessages();
}は Clientは Keypairで作成され、VonageコールのJWT認証を自動的に処理するように設定されている。メソッドで Messages API を呼び出している。 messages()メソッドを使って send().このメソッドは、Messages API統合の一部として、内部的にMessage Interfacesに準拠する有効なオブジェクトを受け取る。RCSメッセージを送信するオブジェクトは RcsText.
認証情報についてはすでに説明したが、RCSには送信先と送信元の番号も必要だ。To番号はターゲット・デバイス、From番号はRCSエージェントに設定されているキーだ。
マジックの時間だ。ここでの制限は、Livewireでは、コンポーネントが更新されるのは コンポーネントが更新されるのは を使用するため）。 refresh(),を呼び出します。 loadMessages()しかし、Livewireコンポーネントは、どのようにして、受信したウェブフックを知るのでしょうか？
その答えは、超ピカピカの モデルブロードキャスト機能です。英語に訳すと、Laravelはモデルが変更されるたびに、既存のイベントシステムを利用する機能を提供します。つまり Messageが作成されるたびに（つまり、Webhookが来てデータベースに書き込まれるたびに）、WebSocketサーバーを使ってリッスンし、Livewireに refresh().
そのためには、2つのライブラリをインストールする必要があります： Laravel Reverb(放送用ウェブソケットサーバー）と Laravel Echo(イベントをリッスンするクライアント側のライブラリ）です。ReverbはLaravel Consoleを使ってインストールします：
php artisan install:broadcastingEchoはnpmを使ってインストールする：
npm install --save-dev laravel-echo pusher-jspusher-jsはEchoが裏で使っているプロトコルであるため、コマンドに含まれている。
アプリケーションのJavaScriptのルートには、設定された Echoクラスが必要です。まず resources\jsにアクセスし echo.js.このファイルに以下のように入力する：
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;
let echo = new Echo({
broadcaster: 'reverb',
key: import.meta.env.VITE_REVERB_APP_KEY,
wsHost: import.meta.env.VITE_REVERB_HOST,
wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
enabledTransports: ['ws', 'wss'],
});
echo.privateApp.Models.Conversation.1)
.listen('.MessageCreated', (e) => {
console.log(e);
});
window.Echo = echo;リッスンするチャンネルがここで特定される： App.Models.Conversation.1はハードコードされている。シードされた Conversationオブジェクトを1つしか持っていないので、この場合は常にこれになります。チャンネルの命名規則は channel.phpルーティングファイルから来ています。 .MessageCreatedはLaravelの組み込みモデルブロードキャストからの命名規則です。
echo.privateモデル・ブロードキャスト・イベントはプライベート・チャンネルからしか発することができないからだ。本当に注意しなければならないことは、（私は元々そうしていなかったので、デバッグに2時間かかりましたが）プライベートチャンネルにしかできないということです。 モデルブロードキャストはLaravelのAuthメカニズムに関連しています。 そのため、これを動作させるには、作成したシードユーザーとしてログインする必要があります。
エコー echo.jsはアプリのブートストラップの時点でインクルードする必要がある。 resources\js\app.jsファイルにインクルードします：
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allow your team to quickly build robust real-time web applications.
*/
import './echo';
イベントをリッスンするものはあるが、ブロードキャストはまだコーディングしていない。これには3つの部分がある：
放送チャンネルのルート設定
モデルに放送を追加する
バブルアップされたイベントに反応するようにLivewireを設定する
Reverbをインストールすると、チャンネル用の新しいルートファイルが次のように作成されます。 routes\channels.php.ここでReverbにブロードキャストを指示する。
channels.php
Broadcast::channel('App.Models.Conversation.{id}', function ($user, $id) {
return $user->conversations->firstOrFail('id', $id)->exists;
});この channelメソッドは、会話IDが認証ゲートとしてユーザに利用可能かどうかを識別するために、ブール値を期待する。
モデルに追加しなければならないものが2つある。 Messageエンティティである。Reverbには BroadcastEventsというtraitがあり、WebSocketを使うためのインターフェースをオープンにしています。これをコードに含める必要があります。 broadcastOnメソッドをオーバーロードできるようにします。
エンドモデルのコードは次のようになる：
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\BroadcastsEvents;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Log;
class Message extends Model
{
use BroadcastsEvents;
public $timestamps = true;
public $table = 'messages';
public $fillable = ['message', 'conversation_id', 'created_at', 'updated_at'];
public function conversation()
{
return $this->belongsTo(Conversation::class);
}
public function broadcastOn(string $event)
{
return [$this->conversation];
}
}のロジックに入る前に、いくつかのフィールドが broadcastOn()のロジックに入る前に、いくつかのフィールドが $fillable.このプロパティはモデル上のどのフィールドがハイドレーションで自動入力されるかを指定するので、Webhookのハイドレーションによってこれらのフィールドが配列に含まれています。
モデル・ブロードキャストのため、このモデルの内蔵チャンネル・アドレスは次のようになる。 App.Model.Conversationなので $this->conversationの値を返すと、必要なブロードキャスト文字列識別子は App.Model.Conversation.{id}. BroadcastEventsの値を返すと、このモデルのCRUDアクションが実行されますが、リスニングのためにConversation IDでブロードキャストするように指示しました。
認めるよ。 しないJavaScriptは使わない。でもね、私は世界一いい加減な開発者だから、それでいいんだ。それに、Laravelのようなフレームワークが推し進めるイノベーションが大好きなんだ。
今、必要なサーバーは2つある： ViteViteはフロントエンドのアセットをコンパイルするために、ReverbはEchoがリッスンするイベントをブロードキャストするために実行する必要がある。ターミナルで、これらを起動してください：
php artisan reverb:start
npm run devふぅ！配線が多いな。でも、それだけの価値はあるよね？すべて起動したら、ログインしてメッセージを送り始めよう！
I absolutely did not use ChatGPT to sort out my styling
ご質問がある場合、またはあなたが作っているものを共有したい場合は、こちらをクリックしてください。
会話に参加する VonageコミュニティSlack
登録する 開発者ニュースレター
フォローする X（旧ツイッター）最新情報
チュートリアルを見る YouTubeチャンネル
LinkedInの LinkedIn の Vonage デベロッパーページ
最新の開発者向けニュース、ヒント、イベント情報をお届けします。