BlooWays

실시간 채팅룸 및 메시지 서비스

나와
비슷한
사람을
만나볼
가장
빠른

소켓 통신을 이용한 실시간 데이터 전송 서비스

https://user-images.githubusercontent.com/70316567/244482519-9eee11ed-68ec-430c-87b0-3df5c0b5e233.gif
Images Slider
사용자
멤버 가입과 로그인 (일반 계정 로그인)
1 / 11
일반 계정 및 소셜 계정으로 멤버 가입과 로그를 관리할 수 있습니다. 멤버로 가입되면 모든 블루웨이 멤버들이 속해있는 '전체 블루웨이'가 자동으로 추가됩니다.
서비스 설명
개요
기획 의도
소켓 통신을 활용하여 1대1 또는 다수의 멤버들과 실시간 라이브 메시지를 주고받을 수 있는 서비스입니다. 블루웨이와 에리어는 각각 크고 작은 개념의 대화 공간이며, 사용자는 여러 개의 대화 공간을 생성하고 원하는 멤버를 초대하여 자신과 유사한 성향을 가진 멤버들과 소통할 수 있습니다.
구현 기능
공통
실시간 데이터 전송, 반응형 웹 스크린
사용자
일반/소셜 회원 가입, 로그인, 사용자명 변경
블루웨이 및 에리어(NSP)
블루웨이 생성, 에리어 생성, 멤버 초대하기, 실시간 메시지 통신, 접속중인 사용자 인디케이팅, 포스트 공감 기능, 멤버 언급하기, 이미지 전송, 미확인 메시지 인디케이팅, 인피니트 스크롤링
이슈
수신하지 않은 메시지에 대한 알림 처리
A에리어에 있는 사용자가 B에리어에서 전송된 메시지에 대한 수신 알림을 받지 못하는 상황이 발생했었습니다. 사용자가 각 에리어별로 입장한 시간, 마지막으로 메시지를 전송한 시간을 저장 후 API요청하였고 전송된 시간 보다 데이터 생성일이 더 큰 메시지들의 개수를 체크, 클라이언트로 전송하여 해결되었습니다.
자세히 보기
기술
Front-end
TypeScript, React, React-Router, SWR, Tailwind, Styled-Components
Back-end
Express, Sequelize(MySQL), Socket.io
Deploy
AWS(EC2+S3)
Secure
Nginx + HTTPS