소개

이 기사에서는 한 사람이 댓글을 보내면 다른 사람이 다시로드하지 않고도 댓글이 표시되는 채팅 앱을 만들고 싶습니다.

마지막: Laravel에서 비동기 채팅 앱을 만들자 (1)

완제품

소스 코드 : htps : // 기주 b. 코 m / 아시 온 30 / 챠 p

비동기 통신이란?

비동기 통신이란, 네트워크 등으로 접속되어 있는 컴퓨터간에, 송신자의 데이터 송신 타이밍과 수신자의 데이터 수신 타이밍을 맞추지 않고 통신을 행하는 통신 방식을 말한다.

참조 : 비동기 통신 - @IT 리치 클라이언트 용어 사전

일상 생활의 예로 말하면 이런 느낌.

동기 통신

비동기 통신

동기 통신의 경우는, 리퀘스트를 송신하면 리로드가 들어가, 다른 처리를 접수하지 않게 되지만, 비동기 통신의 경우는, 리퀘스트를 송신해도, 리로드가 들어가지 않고 다른 처리를 송신할 수도 있다.

정책

API 만들기. (URL에 액세스하면 json 데이터를 반환하는 사람)

JavaScript에서 API를 두드려 json 데이터를 가져옵니다.

루프 처리를 사용하여 json 데이터를 블레이드 파일에 포함시킵니다.

API 만들기

HomeController.php에 json을 반환하는 getData()라는 함수를 정의한다.

app/Http/Controllers/HomeController.php

public function getData()
{
    $comments = Comment::orderBy('created_at', 'desc')->get();
    $json = ["comments" => $comments];
    return response()->json($json);
}

web.php에 getData()를 등록한다.

routes/web.php

Route::get('/result/ajax', 'HomeController@getData');

http://localhost/ChatApp/public/result/ajax에 액세스하면 json 데이터가 반환됩니다.

ajax를 사용하여 json 얻기

ajax를 사용할 수 있도록 app.blade.php의 head 부분에서 스크립트를로드합니다.

resources/views/layouts/app.blade.php

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

이것은 ajax의 기본 모양이다. dataType에는 json뿐만 아니라 csv나 html도 지정할 수 있다.

$.ajax({
    url: "result/ajax/",
    dataType: "json",
    success: data => {
      // 成功時の処理
    },
    error: () => {
      // エラー時の処理
    }
})

public/js 폴더에 comment.js를 새로 만듭니다. 5초마다, json 데이터를 취득하고 있다.

public/js/comment.js

$(function() {
    get_data();
});

function get_data() {
    $.ajax({
        url: "result/ajax/",
        dataType: "json",
        success: data => {
            console.log(data);
        },
        error: () => {
            alert("ajax Error");
        }
    });

    setTimeout("get_data()", 5000);
}

app.blade.php의 body 태그 하단에 @yield('js')를 넣습니다.

resources/views/layouts/app.blade.php

        <main class="py-4">
            @yield('content')
        </main>
    </div>

    @yield('js')
</body>

home.blade.php의 맨 아래에서 comment.js를로드합니다.

resources/views/home.blade.php

@section('js')
<script src="{{ asset('js/comment.js') }}"></script>
@endsection

http://localhost/ChatApp/public/home 에 액세스 해, 검증 툴을 사용하면(자), 5 초마다 json 데이터가 보내지고 있는 것을 알 수 있다.



comment.js의 success의 처리를 이하와 같이 재기록해 본다.

public/js/comment.js

success: data => {
    console.log(data.comments);
    for (var i = 0; i < data.comments.length; i++) {
        console.log(data.comments[i].name);
        console.log(data.comments[i].comment);
    }
},

루프 처리를 사용하여 json 데이터를 블레이드 파일에 삽입합니다.

home.blade.php에서 주석을 표시하는 부분을 다시 씁니다.

resources/views/home.blade.php

<div class="chat-container row justify-content-center">
    <div class="chat-area">
        <div class="card">
            <div class="card-header">Comment</div>
            <div class="card-body chat-card">
                <div id="comment-data"></div>
            </div>
        </div>
    </div>
</div>

자바스크립트에서 <div id="comment-data"></div> 에 코멘트를 묻어가는 형태가 된다.

comment.js의 success의 처리를 다음과 같이 재기록한다.

public/js/comment.js

success: data => {
    $("#comment-data")
        .find(".comment-visible")
        .remove();

    for (var i = 0; i < data.comments.length; i++) {
        var html = `
                    <div class="media comment-visible">
                        <div class="media-body comment-body">
                            <div class="row">
                                <span class="comment-body-user" id="name">${data.comments[i].name}</span>
                                <span class="comment-body-time" id="created_at">${data.comments[i].created_at}</span>
                            </div>
                            <span class="comment-body-content" id="comment">${data.comments[i].comment}</span>
                        </div>
                    </div>
                `;

        $("#comment-data").append(html);
    }
},

http://localhost/ChatApp/public/home 에 액세스하여 댓글을 추가하면 잘 반영됩니다.