Sokect.io를 활용한 채팅 서비스

🗣️ 프로젝트 소개

양방향 통신을 위한 웹 소켓 기술을 활용하여 채팅 기능 구현

 

✍ 기능 

• 채팅 기능
• 보낸 시간
• 채팅 라인 수 확인
• 대화 상대 목록
• 공백 입력 X

 

✍  코드 기술

• static
  • index.css
    • my-chat 
      • 사용자가 보낸 채팅 메시지는 오른쪽
      • div 요소에 메시지 내용과 함께 사용자의 닉네임 출력
    • other-chat
      • 상대방이 보낸 채팅 메시지 왼쪽
  • index.js
    • 채팅 애플리케이션의 프론트엔드 코드
    • Socket.io 소캣 객체 생성
    • socket.on(' ', ()=>{...}); 소켓에 연결되었을 때 실행할 이벤트 핸들러 등록
• views
  • chat.ejs
• chat.js
  • node.js, Socket.io 로 클라이언트와 서버 간의 양방향 통신을 구현
  • express 모듈 사용
  • 클라이언트가 웹페이지에 접속하면 client connected 출력
    • 소켓 아이디 발급
      • 소켓 아이디는 웹페이지별로 고유하게 발급
  • 서버 : 닉네임 중복 여부 체크, 중복되지 않을 경우 소켓 아이디와 닉네임 매핑하여 저장
  • 클라이언트 : 닉네임을 입력하면 서버에게 setNick 이벤트 발생
  • 서버 : setNickc 받으면 소켓 아이디와 닉네임 매핑하여 nickObj 객체에 저장, 이후 io.emit() 메서드로 입장 메시지를 클라이언트에게 전송 닉네임 리스트 업데이트
  • 클라이언트 : 메시지 전송 
  • 서버 : 해당 메시지와 송신자 정보 저장 후 모든 클라이언트에게 해당 메시지 전송
    • DM을 보낼 경우 DM을 받은 클라이언트에게만 전송
  • 클라이언트가 웹페이지를 나가면 disconnect 이벤트 발생
    • 서버 : 소켓아이디와 아이디 정보 삭제, 퇴장 메시지 전송, 닉네임 리스트 업데이트 

 

📝 배운 점

기본 채팅 기능까지는 강사님과 함께 진행했고, 추가적인 기능에 있어서 앞으로도 더 추가해나갈 예정이다.

• 숫자 넘버링 문제 해결
• 엔터 쳤을 때 js 입력
• 날짜랑 시간 분리
• Ui 다시 
• 입장 퇴장에 있어서는 scrollTop 안 먹음
• 새로 고침 시, 퇴장 undefined 처리
• 모바일 글씨

 

✏️ 기록

git

https://github.com/stop-zero/chating

GitHub - stop-zero/chating

서버 배포 링크

http://13.209.97.247:8000/