[ Node.js, Vue.js, Socket.io ] 카톡같은 채팅 만들기 3

채팅방 

 

내가 작성한 메시지는 오른쪽, 상대방은 왼쪽에 표시가 된다.

 

나는 채팅방을 만들 때 어떤식으로 구상을 했냐면,

채팅방에 입장한 순간 created로 설정을 여러개 해줄 것이다. 그 때 해당 채팅방의 기존 내역들을 db에서 불러와서 vuex에 배열로 저장해두고, 새로 채팅을 입력을 하면 또 그 내용을 vuex에 배열로 저장을 해줄 것이다. 그럼 2개의 배열이 존재할 것이고 그걸 getter로 불러와서 화면에 뿌려줄 것이다.

 

 

기존 채팅 내역 불러오기

처음에 채팅방에 들어오면 DB에서 해당 방에 존재하는 채팅들을 다 읽어온다. 그리고 vuex에 저장을 해둔다.

기존 채팅 내역들과, 새로 적은 채팅내용들을 리셋해주고, 상대방의 프사, 이름을 저장해준다.

그런 뒤에 받아온 채팅들을 하나씩 for문을 돌리면서 카톡과 비슷하게 보이도록 파싱을 해준다. ( 작성 시각이 같은 글이라면 맨 마지막 메시지에만 시각이 표시되어야함 )

 

시간표시 생략

또 상대방이 적은 메시지는 특정 상황에 따라서 프로필 사진과 상대방의 이름이 보여져야 할 것이다. 아래는 그걸 작업해주는 코드이다. 그리고, 시간을 바꿔주는 작업과, 읽었는지 안읽었는지에 따라처리해주는 작업도 하였다.

 

 

 

채팅 보내기, 읽음 안읽음 표시

다시 created()로 돌아가보자.  앞서 플러그인에서 정의해두었던 함수들을 여기서 실행시켜준다.

 

먼저 소켓을 특정 방으로 이동시키는 작업인 $enterRoom

채팅을 입력했을 때 실행될 $chatSet

서버와 연결이 끊겼을 때 실행될 $disconnectFromServer

내가 채팅방에 있고( 채팅방에 없으면 실행 x ), 상대방이 해당 채팅방으로 들어왔을 때 실행될 $reload

아래는 채팅을 입력했을 때 실행되는 메서드이다.

아래는 backend의 insert chat이다.

 

읽음 안읽음 처리

보내기 전에 io를 사용하여 해당 방에 존재하는 인원을 구하고, 만약 2보다 작다면 ( 나 혼자 있다는 뜻 ) 

IS_READ를 0으로 그 외 라면 ( 둘 다 있다는 뜻 ) IS_READ를 1로 추가해주는 기능을 붙였다. 이로 인해서 읽음 안읽음 기능을 구현하였다. 

 

하지만 상대방이 채팅방에 들어오면 어떻게 되어야할까? 상대방이 채팅방에 들어오면 나의 화면에

안읽음 표시가 사라져야 할 것이다. 그리고 상대방이 입장했을 때 IS_READ값들이 다 1로 바뀌어야 할 것이다.

따라서 방에 입장했을 때  채팅 목록을 가져오는 프로시져에서 해당 채팅방에 존재하는, 메시지들 중에,

메세지 작성 ID가 내가 아닌 ( 상대방 ) 이 작성한 메시지들의 IS_READ값을 1로 바꿔주는 작업을 해야한다.

 

이에더해 상대방에게 소켓 이벤트를 보내서 화면을 갱신 시켜주어야 비로소 안읽음 -> 읽음 표시가 화면에도 보일 것이다.

 

그 역할을 하는 함수가 changeIsReadState이다. ( $reload에서 설정한 함수 )

changeIsReadState는 내가 채팅방에 있는 상태에서, 상대방이 채팅방에 들어왔을 때 실행되는 함수이다.

다시 db에 기존 채팅 목록 요청을 보낸 뒤에,  다시 setChats를 해주었다. 따라서 changeIsReadState가 실행이 되면 getChats가 다시 실행이되어 화면이 새로 그려질 것이다.

 

newChat을 비워주는 이유는 , 기존 채팅목록을 요청하면 내가 채팅방에서 작성한 값들까지 전부 들어있을 것인데, getters가 바뀌고 재 렌더링 되면서 화면에 내가 작성했던 채팅들(setChats)도 보이게 되므로 화면에 중복으로 표시되기 때문이다. 

 

채팅 입력

다시 돌아와서 채팅을 쳤을 때 해당 방에 있는 사람들에게 chat 이벤트를 보내고 그 값으로 디비에서 만들어진 값을 보내준다.

created에서  chatSet을 설정해준 적이 있을 것이다. 

fn에 담긴 함수를 보자

fn1

fn2

처음에 db에서 채팅을 가져왔을 때 파싱해주는 작업과 같다고 보면된다. 서버에서 chat이라는 소켓 이벤트에 담긴 데이터를 파싱해서 store에 저장해주는 역할을 한다.

 

자 기존 채팅내역이 담긴 배열과, 채팅을 쳤을 때 담기는 배열 그 2개를 화면에 보여주면 비로소 채팅방이 될 것이다. 

 

각 컴포넌트는 깃허브를 참조하자 ! ( 분기문이 많아 코드가 길어 보여드리기가 힘듦 )

showNewChat

 

 

​

changeIsReadState