웹개발 - 12 socket.io 사용 채팅 기능 추가

채팅 기능을 끝으로 이 책을 통해서 추가할 수 있는 기능은 거의 다 추가했다.

(API 보안 부분은 뭔 소린지 모르겠고 굳이 필요한가 싶어 패스)

 

일단 가장 중요하게 생각했던 채팅 기능을 추가했다.

 

저번주 목요일(11월 18일) 부터 하기 시작했는데 오늘(22일 월요일) 끝마쳤다.

사실 제대로 끝마친 것도 아님 아직도 오류 많음..

 

 

암튼 일단 결과 화면은 이렇다. 

 

왼쪽은 솜솜계정 로그인이고 오른쪽은 황필립 로그인을 했을 때이다. 

로그인 한 사용자 정보를 currentUser로 가져와서 비교해서 스타일을 추가해 자기가 보낸건 핑크색으로 표시되게 했다.

 

 

그리고 이제 위에 장바구니는 없애고 메시지 아이콘을 넣고 전체 메시지가 뜨게 했다.

 

 

코드도 다 캡쳐해서 넣어야 되는데 좀 귀찮다..... 

그래도 그냥 기록을 위해 대강 설명해보자면

 

chatController.js

 

컨트롤러부터 보면 DB에 저장하는 부분이 있고, 저장된 DB에서 모든 메시지들을 꺼내와서 시간 역순으로 sorting 한 뒤 다시 클라이언트 소켓에 뿌려주는 부분이 있다.

 

그리고 37행은 유저가 로그아웃 했을 때 (소켓 통신이 끊겼을 때) 브로드캐스트를 보내는 코드이다.

 

 

 

또 중요하게 봐야 할 부분이 jamApp.js 코드이다.

 

 

처음에 채팅방에 들어왔을 때나, 채팅을 새로 보냈을 때, 회원이 로그아웃 해서 채팅방을 빠져나갔을 때 비동기적으로 화면에 처리하는 코드들과, 새로운 메시지를 입력하고 submit이 눌렸을 때 처리되는 코드들을 짰고

 

마지막에 displayMessage는 비동기적으로 화면에 메시지를 출력하는 부분이다. 

 

 

암튼 이렇게 다 하긴 했는데 문제가 몇가지 있어서 고쳐야 한다.

 

1. 메시지를 보내고 바로 뜨는 메시지는 정렬이 안돼서 맨 위에 뜬다.

2. 개인적으로 주고받는 메시지가 아니라 전체 톡방 느낌의 메시지라 이걸 개인적으로 나누는 메시지로 바꿔야한다.

 

일단 여기까지가 채팅 기능에 대한 고쳐야 할 점이고

 

전체적인 프로젝트를 생각했을 때 추가/수정 해야 할 문제들은

1. 잼 등록하는 부분 뭔가 더 세세하게 수정 (폼/디테일 부분 수정 진짜 참여하고 참여 목록 볼수 있게 -> 공동구매 처럼 그런 현황을 볼 수 있게)

2. 사운드 파일 올리는 문제

3. 잼 등록시 사진 파일 올리는 문제

 

등등 있다...

 

이제 책에서 알려준 기능 구현은 끝났고 이걸 응용해서 잘 코딩해봐야겠다.