[ Laravel ] Vue.js를 이용한 실시간 채팅 (필요한 개념)

 

resources/js/app.js

Vue.component('the-chat', require('./components/Chat.vue').default);

 

Laravel에서 component를 보다 쉽게 사용할 수 있도록 설정이 되었다. 

위의 설정되어있는 대로, <the-chat/>태그를 이용하면 components/chat.vue가 불러와지는 것이다. 

 

 

components/Chat.vue

import ChatUserList from './ChatUserList';
import ChatArea from './ChatArea';

components: {
  ChatUserList,
  ChatArea
}

vue파일의 script문에 위와 같이 설정을하면,  다른 vue파일을 component로 불러올 수 있게 된다. 

 

 <ChatUserList 
            :current-user="currentUser"            
            @updatedChatWith="updateChatWith"
        />

그러면 위 처럼 <ChatUserList />의 태그형태로 자식 컴포넌트를 불러오게 된다. 

 

data() {
            return {
                chatWith: null,
                text: ''
            }
       }

script문에서 data()가 의미하는 것은 vue 파일은 template와 script와 style의 세 구분으로 나눠지는데, 그중에서 

template에서 사용할 값들을 지정해주게 된다. 

 

props:{
            currentUser: {
                //다른 타입은 에러
                type: Number,
                //null이 되면 안된다. 항상 값이 들어와야한다.
                required: true
            }
        }

props란 상위 컴포넌트로부터 값을 받아오는 경우에 사용되는데, 

<the-chat :current-user="{{ auth()->id() }}"></the-chat>

chat.vue의 상위 컴포넌트 부분에서  :current-user의 이름으로 auth()->id()의 값을 보내준것을 볼 수 있다. 

이 보내준 값을 props에서 받아오는 것

 

 methods:{
            updateChatWith(value){
                this.chatWith = value;
            },

            submit() {
                if(this.text){
                    axios.post('/api/messages', {
                        text: this.text,
                        to :this.chatWith,
                        from: this.currentUser
                    });
                }                
            }
        }

methods는 함수들을 정의해놓은 것

 

routes/api.php

 

Route::prefix('messages')->group(function(){
    Route::post('/', [MessageController::class, 'store']);
});

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

채팅에서 전송되는 메세지를 DB에 저장하기 위해, DB의 유저 목록을 가져오기위해 API route를 설정