Laravel echo + vue.js + axiosで簡単チャットアプリ開発を通して、Laravel x Vue.jsの連携、Laravelの機能・Vue.jsの基本等を解説

1. Laravel Echo + Vue.js + axiosで
簡単チャットアプリ開発

2. ・福岡生まれの福岡育ち
・IT企業で企画・ディレクター
・嫁と一緒に同時多発的に退社
・ハウススタジオ運営(今も)
・グロースハッカーとして活動
・プログラミングを学んで個人サービス開発
・スキル：PHP/JS/Laravel/Vue.js/ReactNative
・学習：DDD/TDD/OS/C言語...etc
・興味：アプリ開発/洋楽(エドさん、メンさん、プッさん)
香月 宜浩(かつき よりひろ)
Twitter：ピーターパン@エンジニア（@hukuzatsu）

3. 好きなアイドルで繋がろう
アイドルファン限定友達作りサービス

4. 背景
ファン友同士のチャット機能を作りたかった
フロント：Vue.js
サーバー：Laravel

5. 背景
チャットと言えばnode.js
チャットと言えばsocket.io
↓
サーバーを１から作るの大変そう。。
↓
Laravelでなんとか出来ないか

6. 背景
そうだ！
Laravel Echoだ

7. Laravel + Vue.jsを使ったチャットアプリの開発を通
して、
・LaravelとVue.jsの連携
・Laravel Echo、axiosの使い方
・Vue.jsでのデータの扱い
・通知や既読処理の簡単な実装
等お話出来ればと思います。
今日のお話

8. リアルタイムのメッセージのやり取り
既読判定
メッセージの永続化
未読時の通知
実装したチャットの機能

9. Vue.js チャットUI / メッセージの即時反映
axios 非同期処理(サーバーとのメッセージのやり取り)
Laravel メッセージの永続化、読み込みのAPIを提供
Laravel Echo + Pusher WebSocketを介したリアルタイム通信
前提

10. Laravel Echoとは
Laravelで簡単にリアルタイムのチャンネル購読やイベントのリッ
スンが出来るJavascriptのライブラリ
・Laravelでトリガされたイベントをリッスン
・認証が必要なプライベートチャンネルやプレゼンスチャンネルの
作成・購読も可能
・チャンネル購読中のユーザー情報の取得
→Vue.jsと組み合わせて既読判定が便利
・ドライバとしてPusherかsocket.ioが使える

11. Laravel Echoとは

12. Pusherとは
ブラウザ、モバイル、Iot等のクライアントを
即座にアップデートするPub/Subメッセージ
ングプラットフォーム
・チャンネル購読中ユーザーの管理
・ユーザー認証
etc..

13. axiosとは
・非同期処理のHTTPクライアント(Promiseベース)
・非同期処理が簡単に書ける

14. axiosとは
・Make XMLHttpRequests from the browser
・Make http requests from node.js
・Supports the Promise API
・Intercept request and response
・Transform request and response data
・Cancel requests
・Automatic transforms for JSON data
・Client side support for protecting against XSRF

15. https://cacoo.com/diagrams/2g0kee04u
xP5a5ab/simple#6CE46
処理の流れ

16. 実装 - app.js
コンポーネント登録

17. 実装 - app.js
Vueインスタンスの生成

18. (参考)Vueライフサイクル

19. (参考)dataオブジェクト
・dataオブジェクトの全てのプロパティは変更が検出され自動で
再描画される
↓
・messagesにmessageが追加することで、
追加されたmessageの内容を即座にビューに反映出来る

20. 実装 - メッセージの追加(フロント)
Vueインスタンス
template
methods
addMessage()
入力データをイベン
トを通してコンポー
ネントに渡す
ChatComposer
コンポーネント
イベントを受け取り次第
定義して置いたメソッドを
実行
data
messages[]
<input>
<button>
ChatLog
コンポーネント
dataオブジェクトに
データを追加
ChatMessage
ChatMessage
propsとして渡す
propsとして渡す

21. (参考)データの受け渡し
Vueインスタンス
template
methods
addMessage()
ChatComposer
コンポーネント
data
messages[]
<input>
<button>
ChatLog
コンポーネント
ChatMessage
ChatMessage
子から親はイベントで
vm.$emit
親から子はpropsで
v-on:messages=”messages”

22. 実装 - メッセージの追加(フロント)
ChatComposer.vue
messageTextという名前で
入力データを取得

23. 実装 - メッセージの追加(フロント)
messagesentという名前の
イベントを通してmessage
を渡す
ChatComposer.vue

24. 実装 - メッセージの追加(フロント)

25. 実装 - メッセージの追加(フロント)
dataオブジェクトに
messge追加
非同期でmessage
をDBに永続化
返り値はresponse.data
で取得できる

26. 実装 - メッセージ追加(サーバー)
messageの永続化
イベント発行

27. 実装 - イベント(MessagePosted)
リスナに渡すデー
タをプロパティに設
定
配信先チャンネル
を設定

28. 実装 - 認可
PresenceChannel
の場合はtrueでは
なくuserを返す

29. 実装 - メッセージの受け取り(準備)
・Laravel Echoを使うため予めbootstrap.js等でEchoインスタン
スを生成しておく

30. 実装 - メッセージの受け取り
インスタンス生成時に
登録したいので
created()の中に記述
MessagePostedという
名前のイベントをリッス
ン
‘chatroom.’ +roomIdという
チャンネル名

31. 実装 - メッセージの受け取り
チャンネルに指定するroomId取得

32. 実装 - ユーザーの参加・離脱
参加中ユーザーを把握出来る
↓
既読判定に使う
ユーザーが参加した時
点でdataオブジェクト
のusersInRoomに
userを追加
ユーザーが離脱した時
点でdataオブジェクト
のusersInRoomから
userを削除

33. 実装 - 既読判定
メッセージ送信後usersInRoomの要素数を見て
既読・未読を判定

34. 実装 - 既読が無い場合の通知
Notification

35. Notificationとは
メール送信、SMS、Slack等複数チャネルへの通知
を簡単に実装出来るLaravelの機能

36. 実装 - 既読が無い場合の通知
Mailableクラスの継承
チャネルを指定

37. 実装 - 既読が無い場合の通知
非同期でNotificationを
使って通知

38. ・Vueライフサイクルを理解すると適切なタイミングで処理を行える
・dataオブジェクトはリアクティブ
・親 -> 子：v-bind + props、子 -> 親：vm.$emit
・Laravel Echo + pusherにリアルタイムの実装はお任せできる
・Vue.js + axiosで非同期処理が簡単に行える
・通知処理はNotificationクラスを使い簡単に色んなチャネルを選べる
まとめ

39. 今後やりたいこと

40. WebPushを使いたい

41. Push.js

42. Push.js

43. 絶賛 転職活動中
最後に