contentLaravelで非同期チャットアプリを作ろう(2)PHPjQueryLaravelAjaxGLEAPはじめにこの記事では、片方がコメントを送信したら、もう片方の人はリロードしなくても、コメントが表示されるチャットアプリを作っていきたいと思います。前回:Laravelで非同期チャットアプリを作ろう(1)完成物ソースコード:https://github.com/Alesion30/ChatApp非同期通信とは非同期通信とは、ネットワークなどでつながれているコンピュータ間で、送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式のこと。場合は、リクエストを送信したらリロードが入り、他の処理を受け付けなくなるが、非同期通信の場合は、リクエストを送信しても、リロードが入らず別の処理を送信することもできる。(URLにアクセスしたら、jsonデータを返すやつ)JavaScriptで、APIを叩きjsonデータを取得する。ループ処理を用いてjsonデータを、bladeファイルに埋め込む。APIを作るHomeController.phpにjsonを返すgetData()という関数を定義する。response()->json($json);}web.phpに、getData()を登録する。アクセスすると、jsonデータが返ってくる。ajaxを使って、jsonを取得するajaxを使えるようにするために、app.blade.phpのheadの部分でスクリプトを読み込む。src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>これはajaxの基本形である。dataTypeには、jsonだけでなく、csvやhtmlも指定できる。}})public/jsフォルダにcomment.jsを新規作成する。5秒ごとに、jsonデータを取得している。5000);}app.blade.phpのbodyタグの一番下に、@yield('js')を入れる。@yield('js')</body>home.blade.phpの一番下で、comment.jsを読み込む。アクセスして、検証ツールを使うと、5秒ごとにjsonデータが送られてきていることがわかる。comment.jsのsuccessの処理を以下のように書き換えてみる。}},ループ処理を用いてjsonデータを、bladeファイルに埋め込む。home.blade.phpでコメントを表示している部分を書き換える。id="comment-data"></div>の中にコメントを埋め込んでいく形になる。comment.jsのsuccessの処理を以下のように書き換える。アクセスして、コメントを追加するとうまく反映している。祐大@Alesion30病弱な大学生ですFollowGLEAP九州大学公式のプログラミングサークルです。upLoginユーザーは見つかりませんでした。