Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,552 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Laravel Echo + Vue.js + axiosで 簡単チャットアプリ開発
  2. 2. ・福岡生まれの福岡育ち ・IT企業で企画・ディレクター ・嫁と一緒に同時多発的に退社 ・ハウススタジオ運営(今も) ・グロースハッカーとして活動 ・プログラミングを学んで個人サービス開発 ・スキル:PHP/JS/Laravel/Vue.js/ReactNative ・学習:DDD/TDD/OS/C言語...etc ・興味:アプリ開発/洋楽(エドさん、メンさん、プッさん) 香月 宜浩(かつき よりひろ) Twitter:ピーターパン@エンジニア(@hukuzatsu)
  3. 3. 好きなアイドルで繋がろう アイドルファン限定友達作りサービス
  4. 4. 背景 ファン友同士のチャット機能を作りたかった フロント:Vue.js サーバー:Laravel
  5. 5. 背景 チャットと言えばnode.js チャットと言えばsocket.io ↓ サーバーを1から作るの大変そう。。 ↓ Laravelでなんとか出来ないか
  6. 6. 背景 そうだ! Laravel Echoだ
  7. 7. Laravel + Vue.jsを使ったチャットアプリの開発を通 して、 ・LaravelとVue.jsの連携 ・Laravel Echo、axiosの使い方 ・Vue.jsでのデータの扱い ・通知や既読処理の簡単な実装 等お話出来ればと思います。 今日のお話
  8. 8. リアルタイムのメッセージのやり取り 既読判定 メッセージの永続化 未読時の通知 実装したチャットの機能
  9. 9. Vue.js チャットUI / メッセージの即時反映 axios 非同期処理(サーバーとのメッセージのやり取り) Laravel メッセージの永続化、読み込みのAPIを提供 Laravel Echo + Pusher WebSocketを介したリアルタイム通信 前提
  10. 10. Laravel Echoとは Laravelで簡単にリアルタイムのチャンネル購読やイベントのリッ スンが出来るJavascriptのライブラリ ・Laravelでトリガされたイベントをリッスン ・認証が必要なプライベートチャンネルやプレゼンスチャンネルの  作成・購読も可能 ・チャンネル購読中のユーザー情報の取得  →Vue.jsと組み合わせて既読判定が便利 ・ドライバとしてPusherかsocket.ioが使える
  11. 11. Laravel Echoとは
  12. 12. Pusherとは ブラウザ、モバイル、Iot等のクライアントを 即座にアップデートするPub/Subメッセージ ングプラットフォーム ・チャンネル購読中ユーザーの管理 ・ユーザー認証 etc..
  13. 13. axiosとは ・非同期処理のHTTPクライアント(Promiseベース) ・非同期処理が簡単に書ける
  14. 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. 15. https://cacoo.com/diagrams/2g0kee04u xP5a5ab/simple#6CE46 処理の流れ
  16. 16. 実装 - app.js コンポーネント登録
  17. 17. 実装 - app.js Vueインスタンスの生成
  18. 18. (参考)Vueライフサイクル
  19. 19. (参考)dataオブジェクト ・dataオブジェクトの全てのプロパティは変更が検出され自動で 再描画される ↓ ・messagesにmessageが追加することで、  追加されたmessageの内容を即座にビューに反映出来る
  20. 20. 実装 - メッセージの追加(フロント) Vueインスタンス template methods addMessage() 入力データをイベン トを通してコンポー ネントに渡す ChatComposer コンポーネント イベントを受け取り次第 定義して置いたメソッドを 実行 data messages[] <input> <button> ChatLog コンポーネント dataオブジェクトに データを追加 ChatMessage ChatMessage propsとして渡す propsとして渡す
  21. 21. (参考)データの受け渡し Vueインスタンス template methods addMessage() ChatComposer コンポーネント data messages[] <input> <button> ChatLog コンポーネント ChatMessage ChatMessage 子から親はイベントで vm.$emit 親から子はpropsで v-on:messages=”messages”
  22. 22. 実装 - メッセージの追加(フロント) ChatComposer.vue messageTextという名前で 入力データを取得
  23. 23. 実装 - メッセージの追加(フロント) messagesentという名前の イベントを通してmessage を渡す ChatComposer.vue
  24. 24. 実装 - メッセージの追加(フロント)
  25. 25. 実装 - メッセージの追加(フロント) dataオブジェクトに messge追加 非同期でmessage をDBに永続化 返り値はresponse.data で取得できる
  26. 26. 実装 - メッセージ追加(サーバー) messageの永続化 イベント発行
  27. 27. 実装 - イベント(MessagePosted) リスナに渡すデー タをプロパティに設 定 配信先チャンネル を設定
  28. 28. 実装 - 認可 PresenceChannel の場合はtrueでは なくuserを返す
  29. 29. 実装 - メッセージの受け取り(準備) ・Laravel Echoを使うため予めbootstrap.js等でEchoインスタン スを生成しておく
  30. 30. 実装 - メッセージの受け取り インスタンス生成時に 登録したいので created()の中に記述 MessagePostedという 名前のイベントをリッス ン ‘chatroom.’ +roomIdという チャンネル名
  31. 31. 実装 - メッセージの受け取り チャンネルに指定するroomId取得
  32. 32. 実装 - ユーザーの参加・離脱 参加中ユーザーを把握出来る ↓ 既読判定に使う ユーザーが参加した時 点でdataオブジェクト のusersInRoomに userを追加 ユーザーが離脱した時 点でdataオブジェクト のusersInRoomから userを削除
  33. 33. 実装 - 既読判定 メッセージ送信後usersInRoomの要素数を見て 既読・未読を判定
  34. 34. 実装 - 既読が無い場合の通知 Notification
  35. 35. Notificationとは メール送信、SMS、Slack等複数チャネルへの通知 を簡単に実装出来るLaravelの機能
  36. 36. 実装 - 既読が無い場合の通知 Mailableクラスの継承 チャネルを指定
  37. 37. 実装 - 既読が無い場合の通知 非同期でNotificationを 使って通知
  38. 38. ・Vueライフサイクルを理解すると適切なタイミングで処理を行える ・dataオブジェクトはリアクティブ ・親 -> 子:v-bind + props、子 -> 親:vm.$emit ・Laravel Echo + pusherにリアルタイムの実装はお任せできる ・Vue.js + axiosで非同期処理が簡単に行える ・通知処理はNotificationクラスを使い簡単に色んなチャネルを選べる まとめ
  39. 39. 今後やりたいこと
  40. 40. WebPushを使いたい
  41. 41. Push.js
  42. 42. Push.js
  43. 43. 絶賛 転職活動中 最後に

×