Q&A
チャットやDMだと、送信完了ページにいちいち飛ぶのは、不便に感じると思われるので、非同期で送信する方法が適切でしょうか？
実現したいこと
チャット機能を作成しているのですが、メッセージ投稿後のページで新しい投稿を確認するために、ページ更新を行おうとするとフォーム再送信を送ろうとしてしまいます。
そして２回目の投稿を行ってしまうので、投稿後のページでもページ更新・再読み込みを出来るようにしたいです。
！追記！
掲示板のようなチャット機能を考えているのですが、メッセージの送信後のチャットページ(rooms/show)では送信データが消えているようにしたいです。
発生している問題・エラーメッセージ
ページの更新・再読み込みをメッセージ投稿後に行おうとすると、フォーム再送信の確認のモータルが表示されて、続行すると再び同様のメッセージが投稿されて、新しいメッセージを確認するたびに、自身のメッセージが投稿されてしまう。
該当のソースコード
views/rooms/show
1<x-app-layout> 2 <x-slot name="header"> 3 <h2 class="font-semibold text-xl text-gray-800 leading-tight"> 4 {{ $room->name }} 5 </h2> 6 <p>会議コード：{{$room->room_code}}</p> 7 </x-slot> 8 @if($room->host_id==$user->id || isset($member)) 9 <div class="romm-chat"> 10 <div class="room-chat-message"> 11 @foreach($messages as $message) 12 <div class="member-message> 13 <div class="chat-message"> 14 {!! nl2br(e($message->title)) !!}</br> 15 </div> 16 <div class="chat-message"> 17 {!! nl2br(e($message->content)) !!}</br> 18 </div> 19 <div class="message-sub"> 20 <div class="message-time"> 21 {{ $message->created_at->format("Y年m月d日 h:i")}} 22 </div> 23 <div class="message-user"> 24 {{ $message->user->name }} 25 </div> 26 </div> 27 28 <div class="message-btn"> 29 @if($message->user->id == $user->id) 30 <form method="POST" action="{{ route('message.destroy', $message->id) }}"> 31 @csrf 32 @method('DELETE') 33 <input type="hidden" id="room_id" name="room_id" value="{{$room->id}}"> 34 <div class="flex items-center justify-end mt-4"> 35 <x-primary-button class="ms-4"> 36 削除 37 </x-primary-button> 38 </div> 39 </form> 40 @endif 41 42 @if($room->host_id == $user->id) 43 <form method="POST" action="{{ route('adoption.store') }}"> 44 @csrf 45 <input type="hidden" id="user_id" name="message_id" value="{{$message->id}}"> 46 <input type="hidden" id="user_id" name="proposal_user_id" value="{{$message->user_id}}"> 47 <input type="hidden" id="room_id" name="host_user_id" value="{{$room->host_id}}"> 48 <input type="hidden" id="room_id" name="room_id" value="{{$room->id}}"> 49 50 <div class="flex items-center justify-end mt-4"> 51 <x-primary-button class="ms-4"> 52 採用 53 </x-primary-button> 54 </div> 55 </form> 56 @endif 57 </div> 58 </div></br> 59 @endforeach 60 </div> 61 <div class=="room-chat-form"> 62 <form method="POST" action="{{ route('message.store') }}"> 63 @csrf 64 65 <!-- Name --> 66 <div> 67 <p>企画名</p> 68 <x-text-input id="title" class="block mt-1 w-full" type="text" name="title" :value="old('title')" required autofocus autocomplete="title" /> 69 <x-input-error :messages="$errors->get('title')" class="mt-2" /> 70 <p>内容</p> 71 <x-text-input id="content" class="block mt-1 w-full" type="text" name="content" :value="old('content')" required autofocus autocomplete="content" /> 72 <x-input-error :messages="$errors->get('content')" class="mt-2" /> 73 </div></br> 74 <input type="hidden" id="user_id" name="user_id" value="{{$user->id}}"> 75 <input type="hidden" id="room_id" name="room_id" value="{{$room->id}}"> 76 77 <div class="flex items-center justify-end mt-4"> 78 <x-primary-button class="ms-4"> 79 提案 80 </x-primary-button> 81 </div> 82 83 </form> 84 </div> 85 </div> 86 @else 87 <h1>入室許可を得るために、入室パスワードを入力してください</h1> 88 <form method="POST" action="{{ route('member.store') }}"> 89 @csrf 90 <div> 91 <input type="hidden" id="member_id" name="member_id" value="{{$user->id}}"> 92 <input type="hidden" id="room_id" name="room_id" value="{{$room->id}}"> 93 <input type="text" id="room_password" name="room_password" > 94 <x-primary-button class="ms-4"> 95 入室 96 </x-primary-button> 97 </div> 98 </form> 99 @endif 100</x-app-layout>
RoomController
1public function store(Request $request) 2 { 3 //ユーザーIDを取得 4 $user = Auth::user(); 5 $user_id = Auth::id(); 6 $room = new Room; 7 8 // フォームから送られてきたデータをそれぞれ代入 9 $room->host_id = $user_id; 10 $room->name = $request->name; 11 $room->room_password = $request->room_password; 12 13 //ランダムな数字8桁を入れる 14 $room->room_code = substr(str_shuffle(str_repeat(123456789, 8)), 0, 8); 15 $room->save(); 16 $member = Member::where('room_id', '=', $room->id) 17 ->where('member_id', '=', $user->id) 18 ->first(); 19 $messages = Message::where('room_id', '=', $room->id) 20 ->get(); 21 return view('rooms/show', ['user'=>$user, 'room'=>$room, 'member'=>$member, 'messages'=>$messages]); 22 }
web.php
1Route::resource('message', App\Http\Controllers\MessageController::class);
試したこと
storeメソッドのメッセージ精製後のリダイレクト先の記述の仕方を変わるかを調べているのですが、そう言った問題ではないのでしょうか？
補足情報（FW/ツールのバージョンなど）
PHP8
Laravel10
回答2件
0
自己解決
contorollerのreturn viewからreturn Redirect::routeに変更してそのままshowページに飛ぶようにしたところ、送信データは消せました。
ありがとうございます。
投稿2024/04/23 23:44
総合スコア58
0
メッセージを送信したら、送信ページの後に送信完了ページに転送してください
もしくは非同期で送信するかのどちらかでしょう
投稿2024/04/22 02:47
総合スコア114921
> 送信完了ページにいちいち飛ぶのは、不便に感じる
そんなことはないですよ。ユーザーは送信先に飛んだか、完了ページに飛んだか意識することはありません。
ありがとうございます。検討させて頂きます。
LINEのようなメッセージ送信を理想としていたので、そちらの方法も模索はしてみます。
追記
ちなみになんですが、送信完了ページでページ更新を行うと、同様のメッセージが再び送信される現象は消えるのでしょうか？
＞送信完了ページでページ更新
ちょっと質問の意図がわからないです、
→前提として、送信先のページには送信情報が残っています
→送信先から送信完了ページに遷移すると送信情報は消えます
→送信完了ページでリロードしても追加更新されることはありません
なるほど！
ありがとうございます。
ちなみに、こちらの送信情報を現在のチャットページのままで消す方法はありますでしょうか？
controllerもしくはenv等で送信後のshowページで送信データを消しておくことは可能でしょうか？
＞送信情報を現在のチャットページのままで消す方法
それはサブミットしないという意味でしょうか？
→送信はfetchで非同期で処理するか、iframeで送信
→更新はサーバー送信イベント(SSE)かwebsocketを利用
なお仮に同期のサブミットで送信しても結局取得をしないとチャットにならないので
SSEが楽かもしれません
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。