이제 input text를 이용해서 메세지를 입력했을 때, DB에 저장하는 기능을 만듦
메세지 DB에 저장하기!
Chat.vue
data() {
return {
chatWith: null,
text: '',
messages: []
}
},
data() 에 DB에 저장될 메세지인 text를 지정해준다.
<input
class="border-2 border-solid rounded border-gray-600 w-full p-2"
type="text"
v-model="text"
@keyup.enter="submit"
>
input 태그에 v-model="text"가 의미하는 것은, input의 text와 vue data()의 text를 연동시켜준다
input에서 값이 입력되면 실시간으로 vue data의 text값도 동일하게 바인딩이 된다.
@keyup.enter="submit"
그리고 keyup.enter 엔터를 누르고 땟을 때, submit 메소드를 실행
submit() {
if(this.text){
axios.post('/api/messages', {
text: this.text,
to :this.chatWith,
from: this.currentUser
}).then(res => {
//submit을 하고 난 뒤에, 자동적으로 messages에 추가됨으로 써 refresh가 된다.
this.messages.push(res.data.message);
});
}
//메세지 보낸 다음에 iunput창 초기화
this.text= '';
}
텍스트가 존재할 경우에만 저장하도록 한다.
메세지(text)와 보내는사람(from) 받는사람 (to)을 request 보낸다.
그리고 다 끝나면, text를 초기화한다.
MessageController.php
public function store()
{
// 아래 모든 값이 안왔을땐 에러값이 나오도록
$validated = request()->validate([
'text' => 'required',
'to' => 'required',
'from' => 'required'
]);
//MessageSent 이벤트를 발생시켜라
$message = Message::create($validated);
//message를 생성했을 때, messageSent 이벤트를 실행시켜라
MessageSent::dispatch($message);
return response()->json([
'message' =>$message->load('from')
], 201);
}
request 받아온 값들을 validate를 통해 검증을 하고
Messages 테이블에 저장을 한다.
그리고 다시 response를 통해서 json 데이터형식으로 message 객체를 보내는데, load('from')을 이용해서
user의 정보도 같이 넘긴다.
Models/Message.php
public function from()
{
return $this->belongsTo(User::class, 'from');
}
Message모델과 User모델의 관계를 정의해놨기 때문에, load('from')을 통해서 user의 정보까지 사용가능해진다.
메세지 불러오기!
유저 목록에서 아이디를 클릭했을 때, 해당유저와 했던 메세지 내용을 불러오기
getMessages() {
axios.get('/api/messages', {
params:{
to:this.chatWith,
from:this.currentUser
}
}).then(res => {
console.log(res);
this.messages = res.data.messages;
})
},
그러기 위해서는 클릭한 유저의 아이디, 현재 로그인중인 유저 아이디를 파라미터로 보낸다.
MessageController.php
public function index()
{
$messages = Message::where(function($query) {
$query->where('from', request('from'));
$query->where('to', request('to'));
})->orWhere(function($query) {
$query->where('from', request('to'));
$query->where('to', request('from'));
})->get();
//json형식으로 return을 한다.
return response()->json([
//load를 통해서 from과 to의 이름을 가져올 수 있다.
//Model Message를 보면 from, to가 user와 연결되어있기 때문에 User정보까지 같이 가져올 수 있다.
'messages' => $messages->load('from', 'to')
], 200);
}
그리고 messages 테이블에서 message를 불러오는데 쿼리문 조건을 준다.
내가 보낸 메세지 or 상대방이 보낸 메세지를 가져와라 ! 라는 쿼리문을 사용했다.
updateChatWith(value){
this.chatWith = value;
this.getMessages();
},
getMessages함수는 유저의 글을 클릭할 때 동작하는 함수인 updateChatWith 함수의 정의를 해놓고
data() {
return {
chatWith: null,
text: '',
messages: []
}
},
컴포넌트에서 messages값을 쓰기위해서 정의를 해준다.
<ChatArea
:chat-id="chatWith"
:messages="messages"
/>
가져온 messages는 CtatArea에서 보여지는 값이므로 ChatArea 컴포넌트로 보낸다.
ChatArea.vue
messages:{
type: Array,
required:true
}
상위 컴포넌트에서 보낸 messages를 props로 정의해주고 사용한다.
<ChatMessage
v-for="message in messages"
:key="message.id"
:message="message"
/>
메세지를 보여주는 부분은 ChatMessage에 표시하기로 해서 다시한번 자식 컴포넌트로 message값을 보내는데
for문을 사용해서 보내준다.
ChatMessage.vue
props:{
message: {
type: Object,
required: true
}
}
상위 컴포넌트에서 보내온 message (객체)를 props에서 정의해주고
<div>
<strong>{{ message.from.name }} {{ message.created_at}}</strong>
</div>
<div>
{{ message.text}}
</div>
메세지 보낸 사람의 이름, 보낸 시간 그리고 내용을 보여주게되는데
message테이블에는 text와 보낸사람 받는 사람의 id값 필드밖에 없지만, name을 가져올 수 있는 것은
아까 models에서 user와의 관계를 정의했기 때문의 user의 필드 값을 가져와서 사용할 수 있는 것이다.
'IT 공부 > Laravel' 카테고리의 다른 글
[ Laravel ] 유저 블라인드 기능 (0) | 2021.05.04 |
---|---|
[ Laravel ] 웹사이트 개발 (친구 요청 및 친구 추가 기능) (0) | 2021.04.14 |
[ Laravel ] Vue.js를 이용한 실시간 채팅 (유저목록) (0) | 2021.03.31 |
[ Laravel ] Vue.js를 이용한 실시간 채팅 (필요한 개념) (0) | 2021.03.31 |
[ Laravel ] 친구추가 기능 (0) | 2021.03.28 |