• Poki는 맞벌이 가정의 부모님과 아이들을 위한 상호작용 서비스입니다.
• 부모님은 멀리 있는 자녀와도 OK! 아이들과 느껴보지 못했던 소중한 경험을 쌓아보세요.

poster.pdf

• 로그인 후 자녀와 부모님은 고유 코드로 연결하게 됩니다.
• 자녀는 가지고 싶은 선물을 검색하여 위시리스트에 등록할 수 있습니다.
• 부모님은 자녀가 등록한 위시리스트를 보고 자녀에게 주고 싶은 선물을 선택하게 되고 포도알 모으기를 시작하게 됩니다.
• 부모님은 자녀에게 미션을 줄 수 있습니다.
• 자녀는 미션을 수행하고 포도알을 받게 됩니다.
• 31개의 포도알을 모으게 되면 부모님은 자녀에게 선물을 주게 됩니다.

31개의 포도알을 모아보세요.

원하는 선물을 선택해 보세요.

AI를 활용하여 미션을 추천받아 보세요.

미션을 예약해 보세요.

채팅으로 부모님과 소통해보세요.

부모님과 화상 통화를 해보세요.

모바일에서 설치하여 웹과 앱에서 모두 사용해보세요.

캘린더로 포도알 및 선물을 준 기록을 확인해 보세요.

메시지, 화상통화, 미션 등의 알림을 받아보세요.

• Board & Wishlist CRUD 설계

  • 유저간 Board 동기화를 위한 Client-Server 통신 방식 개선

    • 자녀의 Whishlist 중에 선물을 선택, 포도 개수 31개 완료후 선물 증정 -> Board 생성, 삭제 필요

    • 부모가 자녀에게 포도알을 증정하거나, 자녀가 포도알을 붙힐경우 서로의 화면에 정보 동기화 필요

    • 서비스 메인페이지에서는 위의 다수의 이벤트들이 발생, 발생 할 때마다 보드의 정보가 필요

    • 초기 설계시 Poling 방식으로 각각의 이벤트가 전부 Board 의 상태를 요청 -> 서버 과부화 발생

    • 처음 메인 페이지에서 클라이언트가 서버에 Board의 상태를 요청후 대기, 이벤트 발생시 서버 측에서 상태를 응답하는 SSE 방식으로 변경

  • 소스 코드

    • 메인페이지 접속시 클라이언트 측에서 Board 상태 요청 -> 서버 측 처음 Board 상태 응답후 대기

    let globalVersion = 0; // Global version variable(전역변수 지정)
    @Sse('/grape/sse/user')
        async sseGetBoardByUserId(
          @GetUser() user: User,
          @GetUserId() id: number,
          @GetUserType() type: string,
        ): Promise<Observable<responseSseBoardDto>> {
      
          if (type !== 'PARENT') {
            id = await this.AuthService.getConnectedUser(user);
          }
          const use_grape = await this.boardService.getBoardByUserId(id);
          return new Observable<responseSseBoardDto>((observer) => {
            let localVersion = 0; // Local version variable
            const initialData = async () => {
                // 맨 처음 보드 상태를 불러옴(Board 존재하지 않을 경우)          
                if (!use_grape) {
                    const initialResponse: responseSseBoardDto = {
                        data: {
                            code: 200,
                            success: true,
                            grape: {
                                id:0,
                                blank: 0,
                                total_grapes: 0,
                                attached_grapes: 0,
                                deattached_grapes: 0,
                            },
                            is_existence: false,
                        },
                    };
                    observer.next(initialResponse);
                    localVersion = globalVersion;
                  // Update the local version
                    return;
                }
              // 맨 처음 보드 상태를 불러옴(Board 존재할 경우)
                const initialResponse: responseSseBoardDto = {
                    data: {
                    code: 200,
                    success: true,
                    grape: await this.boardService.getBoardByUserId(id),
                    is_existence: true,
                    },
                };
                observer.next(initialResponse);
                localVersion = globalVersion;
                // Update the local version
                };

    • 자녀가 포도알을 붙히거나 여러 이벤트 발생시 서버측에서 Board의 상태 전송

     //포도 부착 버튼 클릭시 실행 함수
        @Post('/grape/attach')
        async attachBoard(
        ): Promise<responseBoardDto> {
            globalVersion += 1; // 서버에서 이벤트 발생 확인
            return response
        }
    
    ---------------------------------------------------------------------------------------
         
        // 다른 이벤트가 발생했을 경우(대기중인 서버에서 이벤트 발생시 Board 상태 응답)
              if (localVersion < globalVersion) {
                const use_grape = await this.boardService.getBoardByUserId(id);
                // 맨 처음 보드 상태를 불러옴(Wishlist 증정으로 인한 Board 존재하지 않을 경우)
                if (!use_grape) {
                    const response: responseSseBoardDto = {
                        data: {
                            code: 200,
                            success: true,
                            grape: {
                                id:0,
                                blank: 0,
                                total_grapes: 0,
                                attached_grapes: 0,
                                deattached_grapes: 0,
                            },
                            is_existence: false,
                        },
                    };
                    observer.next(response);
                    localVersion = globalVersion; // Update the local version
                    return;
                }
                // 맨 처음 보드 상태를 불러옴(Board 존재할 경우)
                const response: responseSseBoardDto = {
                  data: {
                    code: 200,
                    success: true,
                    grape: await this.boardService.getBoardByUserId(id),
                    is_existence: true,
                  },
                };
                observer.next(response);
                localVersion = globalVersion; // Update the local version
              }
            };
            initialData(); 
            const intervalId = setInterval(updateData, 500);
            // 클라이언트 측에서 연결이 끊어졌을 경우
            observer.complete = () => {
              clearInterval(intervalId);
            };
            
            localVersion = globalVersion;
            return observer;
          });

• Chat WebSocket 백엔드 부분 설계

  • 채팅 내역 저장

    • 상대방과의 채팅 내역 저장을 위해 eventGateway 측에서 Message 정보 직접 저장

        @SubscribeMessage('message')
          async handleMessage(
              @ConnectedSocket() socket: Socket,
              @MessageBody() { roomName, message, user }: MessagePayload,
          ) {
              // Save message in database
              this.eventService.createMessage(user.user_id, message, roomName, user.id, user.name);
      
              socket.to(roomName).emit('message', { sender_id: user.user_id, message, check_id: user.id, createdAt: new Date(), sender_name: user.name });
      
              return { sender_id: user.user_id, message, check_id: user.id, createdAt: new Date(), sender_name: user.name };
          }

    • 저장된 채팅 내역 채팅 작성된 시간 순으로 리스트 형식으로 클라이언트 측에 응답

          async getMessage(room_name: string): Promise<Message[]> {
              const messages = await this.messageRepository
                .createQueryBuilder('message')
                .where('message.conversation_id = :room_name', { room_name })
                .orderBy('message.createdAt', 'ASC')
                .getMany();
            
              return messages ;
            }

  • 채팅 알림을 위한 채팅방 입장/비입장 표시 구현

    • 채팅방에 상대방 없을시 메세지 내용 알림으로 전송하는 기능 구현

    • 구현 위에 유저가 채팅 페이지에 입장시 지정된 DB에 저장

    • 유저가 채팅 페이지에 나갈 시 DB에서 삭제

      //유저 채팅방에 입장시
       @SubscribeMessage('setUserName')
          async handleSetUserName(
              @MessageBody() data: { user_id: string },
              @ConnectedSocket() socket: Socket
          ) {
              await this.eventService.createChatSocketConnection(data.user_id, socket.id);
          }
      -----------------------------------------------------------------------------------------------
      // 유저 채팅방 퇴장시
       @SubscribeMessage('disconnect')
          async handleDisconnect(@ConnectedSocket() socket: Socket) {
              try {
                  const disconnectedUser = await
                  this.eventService.findChatConnectionBySocketId(socket.id);
                  if (disconnectedUser) {
                      this.eventService.deleteChatConnection(disconnectedUser)
                  }
              } catch (error) {
                  this.logger.error(error);
              }
      
          }
          

    • DB에 유저 존재 여부에 따른 입장/비입장 표시

      //@SubscribeMessage('message')
      const now_user = await this.authService.getUserById(user.id);
              // 채팅방에 상대방이 있는지 확인
              const connect_userId = await this.authService.getConnectedUser_id(now_user);
      
              const check = await this.eventService.checkChatConnection(connect_userId);
      
              if (!check) {
      
                  try {
      
                      const connect_id = await this.authService.getConnectedUser(now_user);
                      const pushToken = await this.pushService.getPushToeknByUserId(connect_id);
      
                      const title = '새로운 메시지가 도착했습니다.';
                      let info;
      
                      if (!message.startsWith('/static/media')) {
                          info = message;
                      }
                      else {
                          info = '이모티콘을 보냈습니다.'
                      }
                      await this.pushService.push_noti(pushToken, title, info);
                  } catch (exception) {
                      if (exception instanceof ForbiddenException) {
                          return { sender_id: user.user_id, message, check_id: user.id, createdAt: new Date(), sender_name: user.name };
                      }
      
                  }
              }

분류	기술
Frontend
Backend
WebRTC
Database
Infrastructure/DevOps

BE 팀장 : 박정영

BE 팀원 : 이수영

BE 팀원 : 전유진

FE 팀원 : 김재원

FE 팀원 : 지수현