LaravelとVue.jsでChat機能

Question

いつもお世話になっています
早速ですが質問させていただきます

現在,laravelとVue.jsでchat機能を実装使用しようと思っています
最終的にはLaravel echoやPusherで全体に反映するのですが問題はその前段階のVue.jsです

多くのサイトでは

https://hoge.com/chat

にアクセスして、Vue.jsのcreatedでaxios.get('/api/chat').then() のようにしています

この場合axios.getでアクセスするURIが固定なのでよいですが

htpps://hoge.com/chat/1

にアクセスしてそのchatroomでチャットを開始する場合

Vue.jsのcreatedのaxios.getではapi/chat/1にアクセスしてデータをとってきたいのです

つまりhttps:://hoge.com/chat/1にアクセスした際にどのようにVue側でこの1というidを取得するのかということです

抽象的で分かりにくいかとは思いますが何らかのアドバイスが頂けたら嬉しいです

Comments

[euledge]

お困りの点がつかめないので、補足をお願いします。 axios.getで使用するURLの文字列の作り方がわからないのでしょうか? 文字列を連結するだけじゃだめですか?

var roomId = 1;
var url = 'api/chat/' + roomId;

みたいなイメージです。

[math346613]

拙い質問に回答いただきありがとうございます hoge.com/chat/1にアクセスした際にVue.js側でどのようにこの'1'というidを取得すればよいのか、、、ということで悩んでおります

[euledge]

まずは、chatのroomの一覧を取得するAPIをLaravel側に用意してaxios.get('api/char/rooms') のようにしてすべてのroomの名前やroomIdを取得しておくことになります。そのあと選んだroomに入室するイメージではないでしょうか

[euledge]

回答に変数渡しの方法を追記しました

Answer 1

いろいろなチャットアプリがあるのでそのUIの流れを参考にすればよいと思いますが、
シンプルなものであれば下記のような流れになるかと思います。
下記の前にそもそもユーザーログインがあるかも知れませんが、そこは省略します。

+-----------------+            +--------------------+
|  room選択画面  |   <----   | room一覧取得API |
+-----------------+ roomid +--------------------+
                        room_name
           ↓
    roomidを選択

+-----------------+   roomid +--------------------+
|  room画面        |     ---->   | room入室API　　 |
+-----------------+   <----    +--------------------+
                      room内のchat一覧

---

追記

roomIDをvueに渡す方法ということですが、画面開いたときにJavascriptの変数として格納できれば良いです。
Laravel使用しているとのことですので laravelから渡す方法と javascriptで取得する方法があります。

【Javascriptだけで行う方法】
room画面で現在のリクエストURL(https:://hoge.com/chat/1)はjavascriptで取得可能なので
ここからroomIdを切り出して使用する。
【参考】MDN - Location

【Laravelから渡す】
https:://hoge.com/chat/1を受け取るLaravel側のコントローラがあるのでここでphp変数に入れてからHTMLに phpの変数を渡す。

<script>
    var roomId = <?php echo $roomId; ?>;
</script>

どちらの場合でもjavascriptの変数に入ってしまえば、vueでもそのまま変数参照できるのでよいと思います。
但し、vue側では createdではなく HTMLがレンダリングされた後の mountedのタイミングで行うほうが良いと思われます。

Comments

[math346613]

なるほど、、！！　ご教授してくださった内容は一つのURLの中で行われるSPAのような感じに見受けられますが
roomの選択画面(https://hoge.com/chatroom)が存在してそこから選んだらそれぞれのroom画面（https://hoge.com/chatroom/1)に移動してそのチャット内容を,,みたいなものは可能ですか？

[euledge]

room選択画面からroom画面への遷移は、 room選択画面の中に<a>タグで各room画面へのhrefを書いてあげればよいと思いますよ。

[math346613]

なるほど、、
その遷移先で(https://hoge.com/chatroom/1)のVueのcreatedのaxios.get('/api/chatroom/1')でデータを取得すればよい、、みたいな感じですね！
この'1'というroomIdはVue側でどのように取得すればよいのでしょうか？
これが一番悩ましいです