#現状
Laravelの学習の一環としてマッチングアプリを作成しております。
機能としては、ログイン済みのユーザーはプロジェクトを立ち上げることができ、別のログイン済みユーザーはそのプロジェクト詳細ページにあるエントリーボタンをクリックすることで、そのプロジェクトに参加できるようになっています。
プロジェクト詳細ページにはリアルタイムチャットが行える機能が備わっており、プロジェクトを立ち上げた主催者、もしくはエントリー済みのユーザーのみがチャットを行うことができます。
ここまではすでに実装できているのですが、この後、プロジェクト詳細ページにあるチャットでメッセージが投稿されたタイミングで、主催者とエントリー済みのユーザーのみに通知が表示されるような仕組みを追加したいと考えています。
通知の方法は全ページに共通で表示されているヘッダー部分にベルのアイコンを追加して、アイコンのスタイルを何かしら変更(色を変えるなど)することを考えています。
#質問したいこと
ログイン済みの特定複数ユーザーにメッセージが投稿されたというイベントを通知するためにはどのような方法が良いかアドバイスいただけませんでしょうか。・・・追記箇所をご参照願います!
調べた限りですと、公式ドキュメントに記載されているプレゼンスチャンネルを使うのかなと感じたのですが、あま自信が持てず、質問させていただきました。
(そもそもドキュメントを読んでもプレゼンスチャンネルの使い方が理解できず、、、)
#補足
リアルタイムチャット機能を実装の際に、パブリック/プライベートチャンネルの仕組みは触りました。
環境はdockerを使っており、Laravl7を使っています。
どうぞよろしくお願いします。
#追記
プレゼンスチャンネルを用いて特定の複数ログイン済みユーザーのみが通知を受け取ることができました。
ただ一点わからない所があり、質問させていただきたいです。
#新たな質問
メッセージの投稿イベントが発生した際、vueコンポーネント側のwindow.Echo
でもチャンネル名を指定しておく必要があると理解しているのですが、通知を受け取るvueコンポーネント側はどのプロジェクトに対してメッセージが投稿されるのかがわからないので、チャンネル名がうまく指定できずにおります。
そもそも期待している機能はプレゼンスチャンネルでは実現できないのでしょうか。
ちなみに、特定の複数ログイン済みユーザーのみが通知を受け取るという動作確認を行った際には以下NotificationComponent.vue(vueコンポーネント)
ファイルのthis.projectId
を1などの値にして確認を行いました。
app/Events/UpdateNotice.php(イベント)
php
1public function broadcastOn() 2 { 3 return new PresenceChannel('notification-channel.'.$this->project->id); 4 }
routes/channels.php
php
1Broadcast::channel('notification-channel.{project_id}', function ($user, $project_id) { 2 $project = Project::findOrFail($project_id); //メッセージが投稿されたプロジェクトの情報 3 $organizer = $project->organizer_id; //主催者のid情報 4 $entryUsers = $project->users()->get(); //エントリーしているユーザー達の情報 5 6 if ((int) $user->id === (int) $organizer) { 7 return ['id' => $user->id, 'name' => $user->name]; 8 } else { 9 foreach ($entryUsers as $entryUser) { 10 if ((int) $user->id === (int) $entryUser->id) { 11 return ['id' => $entryUser->id, 'name' => $entryUser->name]; 12 } 13 }; 14 }; 15});
resource/js/components/NotificationComponent.vue(vueコンポーネント)
vue
1<template> 2//省略 3</template> 4<script> 5export default { 6 data() { 7 return { 8 projectId : '', //これを書かないとundefinedエラーが出てしまうのでとりあえず書きましたが本来の意味を成していません 9 }; 10 }, 11 mounted() { 12 window.Echo.join("notification-channel." + this.projectId) //【質問点】そもそもどのプロジェクトに投稿があるのか予測できないのでthis.projectIdを事前に指定しておくことができない? 13 .listen("UpdateNotice", response => 14 { 15 //ベルマークのスタイルを変更する処理 16 }); 17 18 this.ToggleNotificationIcon(); 19 }, 20}; 21</script>
なお、公式ドキュメントでもEcho.join('chat.' + roomId)
という形で例が記載されているのですが、roomId
がどのように定義しているのか確認できません。
なにか手掛かりになる情報でも良いのでどうぞよろしくお願いします。
あなたの回答
tips
プレビュー