Laravel echo + vue.js + axiosで簡単チャットアプリ開発

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

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

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

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

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

背景
そうだ！
Laravel Echoだ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ChatComposer.vue
messageTextという名前で
入力データを取得

messagesentという名前の
イベントを通してmessage
を渡す
ChatComposer.vue

dataオブジェクトに
messge追加
非同期でmessage
をDBに永続化
返り値はresponse.data
で取得できる

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

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

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

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

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

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

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

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

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

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

Mailableクラスの継承
チャネルを指定

非同期でNotificationを
使って通知

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

絶賛転職活動中
最後に

Laravel echo + vue.js + axiosで簡単チャットアプリ開発

More Related Content

What's hot

Laravel echo + vue.js + axiosで簡単チャットアプリ開発