質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Q&A

0回答

1088閲覧

ログイン済みの特定複数ユーザーにイベントを通知する方法が知りたい

T.Takeda

総合スコア29

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

0グッド

1クリップ

投稿2020/09/09 06:16

編集2020/09/10 06:25

#現状
Laravelの学習の一環としてマッチングアプリを作成しております。
機能としては、ログイン済みのユーザーはプロジェクトを立ち上げることができ、別のログイン済みユーザーはそのプロジェクト詳細ページにあるエントリーボタンをクリックすることで、そのプロジェクトに参加できるようになっています。

プロジェクト詳細ページにはリアルタイムチャットが行える機能が備わっており、プロジェクトを立ち上げた主催者、もしくはエントリー済みのユーザーのみがチャットを行うことができます。

ここまではすでに実装できているのですが、この後、プロジェクト詳細ページにあるチャットでメッセージが投稿されたタイミングで、主催者とエントリー済みのユーザーのみに通知が表示されるような仕組みを追加したいと考えています。

通知の方法は全ページに共通で表示されているヘッダー部分にベルのアイコンを追加して、アイコンのスタイルを何かしら変更(色を変えるなど)することを考えています。

#質問したいこと
ログイン済みの特定複数ユーザーにメッセージが投稿されたというイベントを通知するためにはどのような方法が良いかアドバイスいただけませんでしょうか。・・・追記箇所をご参照願います!

調べた限りですと、公式ドキュメントに記載されているプレゼンスチャンネルを使うのかなと感じたのですが、あま自信が持てず、質問させていただきました。
(そもそもドキュメントを読んでもプレゼンスチャンネルの使い方が理解できず、、、)

Laravel 7.x ブロードキャスト

#補足
リアルタイムチャット機能を実装の際に、パブリック/プライベートチャンネルの仕組みは触りました。

環境は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がどのように定義しているのか確認できません。

なにか手掛かりになる情報でも良いのでどうぞよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問