【メモ】LaraveEcho + Vue.jsでチャットメッセージ送受信〜既読判定処理のざっくりとした流れ(図)

背景

チャット機能に既読判定機能をつけて、メッセージ送信後既読にならなかった場合に受信者に通知メールを送信する、という機能を作成。
非同期とかWebsocketって流れが分かりづらいと感じることが多いので流れを図解でメモ。

メッセージ送受信の流れ

今回実装したメッセージ送受信のざっくりとした流れを示す図。
メッセージを送信してから受信側が受信し、既読になるまでの流れを示しています。

[流れ]
<送信側>
1.画面を表示(room.blade.php)
　この時にVueインスタンスを生成し、ChatLog.vue等のコンポーネントを生成
2.ユーザーがフォームにメッセージを入力し送信ボタンをタップ
3.タップを起点にメッセージを画面に追加(フロント)するメソッド実行
4.上記メソッド内で非同期にメッセージのDB登録処理を実行
5.DB登録後、イベント発行(Laravel)
6.channels.phpで投稿の認可

<受信側>
7.受信側でイベントを購読(LaravelEcho)
8.イベントを購読したら送信されたメッセージを画面上に追加
9.画面に追加される際にVueライフサイクルのupdated()の時点でDBのmessagesテーブルに既読フラグを登録

<送信側>
10.送信側のupdated()のタイミングでmessagesテーブルに既読フラグが存在するか確認して存在しなければ受信者のアドレスにメッセージ通知メールを送信する処理を非同期で実行
(送信側のupdated()のタイミングが受信者側よりも早いため、メッセージ通知メールの処理はsetTimeoutで60秒ほど遅らせる)
→もっといいやり方あればご教示下さい><

以上。