작업 사항

작업할 내용을 작성해주세요

에러 내용

Access to XMLHttpRequest at 'http://chat-env.eba-pbveipzf.ap-northeast-2.elasticbeanstalk.com/socket.io/?EIO=4&transport=polling&t=Ohv_e1n' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
polling.js:298 GET http://chat-env.eba-pbveipzf.ap-northeast-2.elasticbeanstalk.com/socket.io/?EIO=4&transport=polling&t=Ohv_e1n net::ERR_FAILED 200 (OK)

에러 원인

CORS(Cross-Origin Resource Sharing) 정책 때문이다. 클라이언트(http://localhost:3000)가 다른 출처(http://chat-env.eba-pbveipzf.ap-northeast-2.elasticbeanstalk.com)의 리소스에 접근하려 할 때 이런 오류가 발생하는 것 같습니다. Server의 CORS 설정은 특정 도메인 허용으로 설정해서 credentials: true 설정은 요청과 응답에서 쿠키 및 인증 헤더를 포함으로 설정하고 Socket.io도 CORS 해줘야한다고 해서 똑같이 설정하였습니다.

기타 사항

기타 사항을 작성해주세요

작업 사항

DB 연결 후 채팅 데이터를 DB에 저장했습니다.

에러 내용

roomId랑 socketId 데이터가 안들어가지고 콘솔 확인에는 둘다 데이터가 찍힘

에러 원인

DB 컬럼 데이터 타입이 문제라고 하는데..
roomId, socketId가 데이터 타입이 BIGINT로 들어가있어서 VARCHAR로 변경해서 데이터를 저장하고 있긴합니다만 @cipp00h 확인이 필요합니다.

기타 사항

기타 사항을 작성해주세요

작업 사항

채팅 메세지 불러오는 getMessages API 로직 추가 라우터 처리하였습니다. 그리고 DB에 roomId가 같은 데이터 중에 접속 시간 이후 데이터들을 불러오도록 요청했습니다.

To-do

기타사항

작업 사항

node.js로 MySQL를 사용하므로 mysql2 패키지를 설치하고 서버쪽에서 DB환경변수 설정하였습니다. 그리고 클라이언트에서 받은 채팅 데이터를 DB에 저장하였습니다.

To-do

• MySQL 패키지 설치
  npm install mysql2
• DB 환경변수 설정 및 연결
• 클라이언트에서 받은 채팅 데이터 저장하기
• #6
• Node.js 개발을 자동화 위해 nodemon 패키지 설치 및 설정
• #7

기타사항

작업 사항

서버 레포지토리 따로 생성 후 서버 파일 분리와 코드 모듈화 진행

To-do

• 서버 채팅 코드 모듈화
• API 라우터 처리 및 채팅 메세지 서버 저장

기타사항

작업 사항

sendMessage 에서 채팅 메세지를 DB에 저장한 후에 이벤트를 발생시 소켓에서 해당 이벤트를 감지하고 채팅 메세지를 브로드캐스트하도록 수정하였습니다.
서버의 라우트 핸들러와 소켓 핸들러 사이에서 메시지 전달 위해 EventEmitter를 사용하였습니다.

To-do

기타사항

작업 사항

데이터베이스 연결 정보는 환경 변수를 사용하여 관리하기 위해 .env 파일을 생성하여 데이터베이스 정보를 저장과 필요한 라이브러리 설치 했습니다.

To-do

• .env 파일을 생성하여 데이터베이스 정보를 저장
• 필요한 라이브러리 설치
  • dotenv: 환경 변수 설정을 위한 패키지 로드 설치 #11
  • express-session: #17
  • express-socket.io-session: #17

기타사항

작업 사항

DB에 채팅 메세지 저장하는 로직을 추가하고 재사용을 위해 로직을 따로 분리했습니다.

To-do

기타사항

칼럼명과 동일하게 작성 필요 ***

작업 사항

DB 연동 확인용 checkConnection 함수 실행과 채팅 라우터 /chat으로 수정하였습니다.

To-do

☆## 기타사항

작업 사항

서버와 소켓에서 채팅 사용자 정보를 받아 저장하고 getMessages에서 데이터를 불러와 DB에 채팅데이터를 요청하는 작업을 진행하고 있었습니다.

에러 내용

getMessages API 요청이 왔을 때 세션에 저장된 데이터를 불러오지 못합니다.

에러 원인

Socket.IO에서는 Express 세션과 관련된 데이터를 사용할 수 있게 설정이 필요했던 것 같습니다. express-socket.io-session 미들웨어를 사용해서 Socket.IO와 Express 세션 공유되도록 하고 세션 데이터가 변경될 때 자동으로 저장하도록 설정하였습니다.

기타 사항

작업 사항

AWS 배포하기 위해 Webpack 사용해서 번들링 진행 후 AWS에 업로드해서 배포했습니다.
클라이언트 쪽에서 서버 연동까지 확인했습니다.

To-do

• #8
• #9
• #10

기타사항

작업 사항

프로젝트 초기 개발 환경 셋팅

To-do

• Node.js 프로젝트 초기화
• 필요한 패키지 설치 및 설정
  • Express
  • Socket.io
  • CORS
  • ESLint
  • Prettier

기타사항

작업 사항

프론트엔드는 React-Query와 React-Rudex로 상태관리를 React-Socket.io를 사용해서 실시간 채팅 기능을 구현할 예정입니다. 백엔드는 Web과 별도로 node.js로 서버와 데이터를 따로 관리하고 Socket.io 연동해서 개발을 진행하겠습니다.

To-do

• #3
• #4
• AWS RDS 구축(MySQL)
• #5
• #11
• #12
• #13
• #15
• #14
• #17
• #20

기타사항

서버로 부터 클라이언트 소켓ID를 할당 받아 넘겨주기

작업 사항

DB content 칼럼을 message로 변경 했더니 데이터가 DB에 저장이 안돼서 콘솔로 찍어보니 클라이언트 receiveMessage쪽에서 문자열이 객체로 쪼개져서 받아지는 걸 확인했다.

에러 내용

Received message data: {0: 'd', 1: 'd', 2: 'd', 3: 'd', 4: 'd', 5: 'd', 6: 'd', socketId: 'l1k3EXuwuJ-_m2NCAAAw'}

에러 원인

소켓io에서 emit할 때 객체가 아닌 문자열을 전송하게 될 때 발생 ERORR 자바스크립트에서는 문자열을 객체처럼 취급하여 문자열의 각 문자를 해당 인덱스를 키로 하는 객체로 변환됨 서버 receiveMessage 객체로 묶어서 해결하였습니다.

기타 사항

기타 사항을 작성해주세요

작업 사항

setUserInfo로 클라이언트에서 보낸 email과 name을 받아 접속자 확인을 진행하고 joinTime 이후 채팅 데이터 불러오는 로직은 나중에 session 로직에서 따로 처리하기 위해 삭제하고 email 데이터를 받아와서 방에 입장한 사용자를 확인했습니다. sendMessage에서 채팅 데이터 받아 DB 저장하는 saveMessageToDB 호출해서 저장하도록 수정하였으며, 연결 종료 시 처리하는 로직을 추가하였습니다.

To-do

• 소켓 접속자 인증 및 설정
• 메세지 DB저장 수정
• 연결 종료 처리 추가
• #16

기타사항

작업 사항

express-session 미들웨어를 사용해서 세션 데이터는 crypto로 랜덤 문자열을 생성해 secret를 암호화하고 세션 데이터 변경 시 저장하지 않게 resave를 설정했으며, 초기화 되지 않는 데이터는 저장되지 않도록 saveUninitialized를 설정했습니다. 그리고 클라이언트로부터 요청이 들어오면 header에서 email과 name을 세션에 저장하고 소켓 연결 시 세션에 사용자 정보와 첫 접속 시간을 체크해 세션에 저장합니다. 세션에 저장된 사용자 정보 확인 후 첫 접속 시간 이후 채팅 내용들을 DB에서 조회하도록 하였습니다.

To-do

• express-session을 사용해서 세션설정
• 소켓 연결 시 세션에 사용자 정보 저장
• 세션에 저장된 사용자 정보 확인 후 DB에서 채팅 내용 조회
• #19

기타사항

기타 사항을 작성해주세요