[ Laravel ] Vue.js를 이용한 실시간 채팅 (유저목록)

created() {
            //axios는 아작스 리퀘스트를 쉽게 보낼 수 있도록 만들어진 패키지
            //api.php에 만들어둔 Route
            axios.get('/api/users').then(res => {                                              
                console.log(res);
                //this.users -> date() 안에 있는 users에 접근
                //res.data.user -> 가져온 값 res의 data안에 users안에 있는 값을 가르킴
                this.users = res.data.users;
            }).catch(error => {
                console.log(error);
            });
        },

유저목록을 가져오기위해서는 Laravel에서 제공하는 axios를 이용해서 리퀘스트를 주고 받을 수 있다. 

 

get('/api/users)를 통해서 api.php에 만들어놓은 route

Route::get('/users', [UserController::class, 'index']);

UserController의 index를 사용하게 된다. 

 

App/Http/Controllers/UserController.php

public function index()
    {
        $users = User::all();

        return response()->json([
            'users' => $users
        ]);
    }

UserController의 index에서 User 테이블에 있는 모든 유저목록을 가져온다. 

 

그리고 그 값을 다시 response() -> json()  제이슨 데이터형태로 보내주게 된다.

 

 

ChatUserList.vue

axios.get('/api/users').then(res => {                                              
                console.log(res);
                //this.users -> date() 안에 있는 users에 접근
                //res.data.user -> 가져온 값 res의 data안에 users안에 있는 값을 가르킴
                this.users = res.data.users;
            }).catch(error => {
                console.log(error);
            });

api에 요청을 보내서 받아온 값을 console.log를 통해 값을 확인해 볼 수 있게 하고

this.users = res.data.users;  -> data에 있는 users의 접근해서 그 값에 받어온 유저들의 정보를 넣는다. 

 

 

data에 있는 users가 의미하는 것은 아래 부분

data() {
            return {
                //이 안에 설정된 값들은 위의 template 태그 안에서 사용가능하다.
                users: []                
            }
        },

 

 

 

<div
            v-for="user in usersWithoutSignedInUser"
            :key="user.id"
            class="p-2 border-b-2 border-gray-600 hover:bg-gray-300 cursor-pointer"
            @click="updateChatWith(user.id)"
        >
            {{ user.name }}
        </div>

받아온 유저 값(users)를 반복문을 통해서 하나하나 끄집어 내는 작업이다. 

 

그런데, 유저 목록에는 현재 서비스를 이용하고 있는 유저도 포함되어있으므로 그것을 제외해주는 코드가 필요하다. 

 

 

//데이터가 변경되면, 변경된 값으로 계산해주는 (데이터가 바뀔때마다)
        computed: {
            //현재 로그인한 유저의 id는 유저목록에 나오면 안되니까 그것을 제외해주기 위해 filtering한 것 
            usersWithoutSignedInUser(){
                //this를 사용해서 props의 값이나 data의 값에 접근이 가능해진다.
                return this.users.filter(user => user.id != this.currentUser);
            }
        },

filter를 이용해서 user.id가 현재 로그인한 유저(currentUser)의 id와 같지 않은 경우에만 받도록 했다. 

 

:current-user="currentUser"

currentUser의 값은 상위 컴포넌트에서 받아온 값임