MQTT 통신 기반 프로젝트

프론트 엔드 🎆

• 사용언어: JavaScript

• 라이브러리: React

• 스타일링 기법: styled-components, antd 사용

• 통신기법: MQTT (MQTT.js 라이브러리 사용)

• 기본적으로 MQTT 통신 기법을 채택했습니다.

  • 프론트는 MQTT.js 라는 라이브러리를 사용해서 구현을 했습니다.
  • KT Cloud 상에 올라가 있는 mqtt broker(mosqitto)가 통신에 사용되는 topic을 지정해주면 이 topic를 클라이언트가 구독을 하게됩니다.
  • 구독을 하면 실시간으로 이 topic으로부터 오는 메세지를 실시간으로 받아볼 수 있습니다.
  • 사용자 이름 등록 기능은 클라이언트가 특정 topic으로 데이터를 publish 하는 것입니다.

• ip adress와 포트 번호에 대해

  • 현재 broker는 kt cloud의 serverTest 이름의 가상 서버를 사용하고 있습니다.
  • 공인 ip는 211.253.25.164이고 tcp 프로토콜을 따릅니다.

✨ 중요 ✨

• 가상 서버 내에서 사설 port에 접근을 해야할 경우 바로 접근이 안됩니다.
• 현재 client - broker 는 websocket port로 broker - 지니는 ipv4 socket port로 연결이 되어있습니다.
• websocket 사설 port는 9001, ipv4 socket port는 mqtt 기본값인 1883으로 되어있습니다.
• 이 사설 포트를 외부에서 접근할 수 있도록 바인딩을 해줘야합니다.
  • 그래서 9001은 9999로 1883은 8888로 바인딩을 해줬습니다.
  • 따라서 연결시 필요한 host = ip adress + port는 각각 211.253.25.164:900, 211.253.25.164:8888이 됩니다.

• 주요기능

  1. 사용자 이름 등록

     • 첫 화면에 들어가면 서비스 대상의 이름 및 닉네임을 입력할 수 있습니다.
     • 입력한 이름(닉네임)을 기반으로 기가지니로부터 음성이 출력됩니다.

2. 목표 생활 포인트 등록

   • 서비스 사용자(아이)가 최종적으로 모아야 할 목표 생활 포인트를 등록할 수 있습니다.
   • 목표 생활 포인트를 달성하면 환호 소리와 꽃가루 효과가 나타나게 됩니다.

3. 화자와 또리 간의 대화 메세지 출력

   • mqtt 기반의 socket 통신을 통해서 입력된 음성 대화를 실시간으로 화면에 렌더링합니다.
   • 실제 채팅 환경과 똑같이 하기 위해서 새로운 메세지가 오면 자동으로 스크롤이 아래로 되도록 구현했습니다.