Web IDE 채팅 기능 서버입니다.
프론트엔드 깃허브: https://github.com/ExceptAnyone/SSAP-IDE-FrontEnd
백엔드 깃허브: https://github.com/Rainbow-SSAP/SSAP-IDE-BackEnd
Web IDE 채팅 기능 서버
Web IDE 채팅 기능 서버입니다.
프론트엔드 깃허브: https://github.com/ExceptAnyone/SSAP-IDE-FrontEnd
백엔드 깃허브: https://github.com/Rainbow-SSAP/SSAP-IDE-BackEnd
작업할 내용을 작성해주세요
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가 같은 데이터 중에 접속 시간 이후 데이터들을 불러오도록 요청했습니다.
서버 레포지토리 따로 생성 후 서버 파일 분리와 코드 모듈화 진행
sendMessage 에서 채팅 메세지를 DB에 저장한 후에 이벤트를 발생시 소켓에서 해당 이벤트를 감지하고 채팅 메세지를 브로드캐스트하도록 수정하였습니다.
서버의 라우트 핸들러와 소켓 핸들러 사이에서 메시지 전달 위해 EventEmitter를 사용하였습니다.
DB에 채팅 메세지 저장하는 로직을 추가하고 재사용을 위해 로직을 따로 분리했습니다.
칼럼명과 동일하게 작성 필요 ***
DB 연동 확인용 checkConnection 함수 실행과 채팅 라우터 /chat으로 수정하였습니다.
☆## 기타사항
서버와 소켓에서 채팅 사용자 정보를 받아 저장하고 getMessages에서 데이터를 불러와 DB에 채팅데이터를 요청하는 작업을 진행하고 있었습니다.
getMessages API 요청이 왔을 때 세션에 저장된 데이터를 불러오지 못합니다.
Socket.IO에서는 Express 세션과 관련된 데이터를 사용할 수 있게 설정이 필요했던 것 같습니다. express-socket.io-session 미들웨어를 사용해서 Socket.IO와 Express 세션 공유되도록 하고 세션 데이터가 변경될 때 자동으로 저장하도록 설정하였습니다.
프로젝트 초기 개발 환경 셋팅
서버로 부터 클라이언트 소켓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 호출해서 저장하도록 수정하였으며, 연결 종료 시 처리하는 로직을 추가하였습니다.
express-session 미들웨어를 사용해서 세션 데이터는 crypto로 랜덤 문자열을 생성해 secret를 암호화하고 세션 데이터 변경 시 저장하지 않게 resave를 설정했으며, 초기화 되지 않는 데이터는 저장되지 않도록 saveUninitialized를 설정했습니다. 그리고 클라이언트로부터 요청이 들어오면 header에서 email과 name을 세션에 저장하고 소켓 연결 시 세션에 사용자 정보와 첫 접속 시간을 체크해 세션에 저장합니다. 세션에 저장된 사용자 정보 확인 후 첫 접속 시간 이후 채팅 내용들을 DB에서 조회하도록 하였습니다.
기타 사항을 작성해주세요
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.