![実装 - メッセージの追加(フロント)
Vueインスタンス
template
methods
addMessage()
入力データをイベン
トを通してコンポー
ネントに渡す
ChatComposer
コンポーネント
イベントを受け取り次第
定義して置いたメソッドを
実行
data
messages[]
<input>
<button>
ChatLog
コンポーネント
dataオブジェクトに
データを追加
ChatMessage
ChatMessage
propsとして渡す
propsとして渡す](https://image.slidesharecdn.com/laravelechovue-180124082104/85/Laravel-echo-vue-js-axios-20-320.jpg)
![(参考)データの受け渡し
Vueインスタンス
template
methods
addMessage()
ChatComposer
コンポーネント
data
messages[]
<input>
<button>
ChatLog
コンポーネント
ChatMessage
ChatMessage
子から親はイベントで
vm.$emit
親から子はpropsで
v-on:messages=”messages”](https://image.slidesharecdn.com/laravelechovue-180124082104/85/Laravel-echo-vue-js-axios-21-320.jpg)
More Related Content
What's hot (20)
Recently uploaded (8)
Laravel echo + vue.js + axiosで簡単チャットアプリ開発
- 1. Laravel Echo + Vue.js + axiosで 簡単チャットアプリ開発
- 7. Laravel + Vue.jsを使ったチャットアプリの開発を通 して、 ・LaravelとVue.jsの連携 ・Laravel Echo、axiosの使い方 ・Vue.jsでのデータの扱い ・通知や既読処理の簡単な実装 等お話出来ればと思います。 今日のお話
- 9. Vue.js チャットUI / メッセージの即時反映 axios 非同期処理(サーバーとのメッセージのやり取り) Laravel メッセージの永続化、読み込みのAPIを提供 Laravel Echo + Pusher WebSocketを介したリアルタイム通信 前提
- 11. Laravel Echoとは
- 12. Pusherとは ブラウザ、モバイル、Iot等のクライアントを 即座にアップデートするPub/Subメッセージ ングプラットフォーム ・チャンネル購読中ユーザーの管理 ・ユーザー認証 etc..
- 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
- 18. (参考)Vueライフサイクル
- 29. 実装 - メッセージの受け取り(準備) ・Laravel Echoを使うため予めbootstrap.js等でEchoインスタン スを生成しておく
- 30. 実装 - メッセージの受け取り インスタンス生成時に 登録したいので created()の中に記述 MessagePostedという 名前のイベントをリッス ン ‘chatroom.’ +roomIdという チャンネル名
- 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. 絶賛 転職活動中 最後に