어제 화학 강의에 참석하면서 지루해서 죽을 지경이었어요. 그래서 대학에서 강의에 사용하는 소프트웨어를 살펴보기 시작했어요. 이 소프트웨어에서는 각 사용자에게 여러 과목을 목록으로 표시하고, 해당 과목의 강의에 현재 참석 중인 학생 수를 보여줍니다.
이 점이 흥미로웠습니다. 사용자가 채널을 쉽게 생성하고 다른 사용자들이 해당 채널에 참여해 호스트와 상호작용할 수 있다는 점이요. 그래서 Agora Flutter SDK를 사용해 이 소프트웨어의 클론을 만들어 보기로 결심했습니다. 만약 우리 quickstart 가이드를 보셨다면, 두 사용자가 동일한 채널 이름을 입력해야 통화에 참여할 수 있다는 점을 아실 것입니다. 이 문제는 채널이 생성된 후 적절한 백엔드 없이 채널을 공유할 수 없다는 점에서 발생합니다.
모든 사용자와 그들이 생성한 채널의 데이터베이스를 관리하는 복잡한 백엔드 경로를 피하기 위해, 저는 Agora RTM SDK를 활용해 프로세스를 간소화했습니다. 이 방식에서는 사용자가 가입할 때 각 호스트가 채널 이름과 해당 채널의 사용자 수를 포함한 메시지를 전송합니다.
커피 한 잔 준비하고 시작해 보세요!
필수 조건
- 아고라 개발자 계정 (자세한 내용은 시작하기 참조)
- Flutter SDK
- VS Code 또는 Android Studio
- Flutter 개발에 대한 기본적인 이해
프로젝트 개요
- 사용자는 고유한 사용자 이름으로 lobby라는 RTM 채널에 로그인합니다. 이 채널은 기존 채널을 모두 표시하고 새로운 채널이 생성될 때 사용자에게 알리는 데 사용됩니다.
- 따라서 로비에 있는 모든 사용자에게 채널 세부 정보를 공유하도록 요청하는 대신, 채널의 호스트 또는 가장 오래된 멤버에게 세부 정보를 공유하도록 요청합니다.
- 메시지는 channelName:memberCount 형식으로 전송됩니다. 이 메시지를 수신하면 채널 이름을 멤버 수에 매핑합니다. 이 매핑은 활성 채널 목록을 표시하는 데 사용됩니다.
- 사용자가 활성 채널 중 하나를 클릭하면 해당 채널의 모든 사용자가 그룹 비디오 통화로 이동합니다.
프로젝트 설정
1. Flutter 프로젝트를 생성합니다. 터미널을 열고 dev 폴더로 이동한 후 다음 명령어를 입력합니다:
flutter create agora_dynamic_channels
2. pubspec.yaml
파일로 이동합니다. 해당 파일에서 다음 종속성을 추가합니다:
pubspec.yaml
패키지를 추가할 때 들여쓰기에 주의하세요. 들여쓰기가 잘못되면 오류가 발생할 수 있습니다.
3. 프로젝트 폴더에서 다음 명령어를 실행하여 모든 의존성을 설치하세요:
flutter pub get
4. 모든 종속성을 확보한 후 파일 구조를 생성할 수 있습니다. lib 폴더로 이동한 후 다음과 같은 파일 구조를 생성합니다:

로그인 페이지 만들기
로그인 페이지는 매우 간단합니다: 사용자 이름 입력란과 제출 버튼을 추가하면 됩니다. 이 채널 이름은 다음 페이지인 로비로 전달됩니다.
로그인 페이지
이 코드는 다음과 같은 페이지를 생성합니다 :

로비 구축
우리는 모든 사용자가 'lobby'라는 이름의 공용 RTM 채널에 참여하도록 하여 로비를 초기화합니다. 이 채널을 통해 사용자가 생성한 채널의 세부 정보를 공유합니다.
로비 페이지에서 사용자의 여정에서 발생하는 단계는 다음과 같습니다:
- Agora RTM 채널이 'lobby'라는 이름의 채널에 참여하도록 초기화됩니다.
- 사용자는 로비 채널에서 다른 사용자로부터 채널 세부 정보에 대한 메시지를 수신합니다.
- 사용자는 자신의 채널을 생성하거나 기존 채널에 가입합니다. 사용자가 기존 채널에 가입하면 호스트에게 메시지를 전송하여 사용자 수를 증가시키고 로비와 공유합니다. 또는 사용자가 자신의 채널을 생성하기로 결정하면 RTM 채널의 다른 객체를 생성하고 로비 내 모든 사용자에게 채널 세부 정보를 공유합니다.
- 사용자의 행동에 따라 사용자는 콜 페이지로 리디렉션됩니다.
lobby.dart
이것은 등록해야 할 내용이 많을 수 있으니 단계별로 설명하겠습니다:
_createClient()
: 이 함수는 페이지에 접속하자마자 실행되어 사용자가 'lobby'라는 이름의 RTM 채널에 참여할 수 있도록 합니다. 또한 호스트로부터 방송 메시지를 수신하여 활성 채널 목록과 각 채널의 사용자 수를 가져옵니다._createChannel()
: 이 함수는 이벤트 핸들러를 감시하여 활성 사용자 및 채널 목록을 유지합니다._createChannels()
: 이 함수는 사용자가 기존 채널에 가입하는 대신 자신의 채널을 생성하려는 경우 사용됩니다._joinCall()
: 이 함수는 통화 화면으로 이동하기 위해 사용됩니다. 하지만 그 전에 선택한 채널에 참여하기 위해 RTM 채널의 다른 객체를 생성합니다. 이 방식으로 사용자는 로비 채널에 연결된 상태에서 해당 서브 채널에 참여할 수 있습니다.
이 코드는 다음과 유사한 페이지를 생성합니다:


비디오 채팅 페이지 만들기
여기서 Agora RTC SDK를 사용하여 간단한 그룹 비디오 채팅 애플리케이션을 생성합니다. 동일한 채널 이름을 선택한 모든 사용자는 동일한 통화 그룹에 자동으로 그룹화됩니다.
콜 페이지
우리는 App ID로 AgoraRtcEngine을 초기화합니다. 이 메서드의 객체는 콜을 설정하기 위해 필요한 다른 함수를 호출하는 데 사용됩니다.
사용자가 채널에 가입하거나 채널을 떠날 때 트리거되는 모든 이벤트 핸들러를 관리하는 함수를 생성합니다. 이 함수는 UID 목록을 유지하는 데 도움이 됩니다. 이 목록을 사용하여 비디오 피드를 렌더링합니다.
사용자는 joinChannel()
메서드를 사용하여 특정 채널에 가입합니다. joinChannel()
메서드에서는 UID와 채널 이름과 함께 토큰을 사용할 수 있는 옵션이 제공됩니다.
참고: 이 프로젝트는 참고 및 개발 환경을 위한 것입니다. 생산 환경에서는 사용하지 마십시오. 생산 환경에서 실행되는 모든 RTE 앱에는 토큰 인증이 권장됩니다. Agora 플랫폼에서의 토큰 기반 인증에 대한 자세한 내용은 다음 가이드를 참조하세요:
위 코드를 구현하면 다음과 유사한 화면이 표시됩니다:

결론
멋진 작업입니다! 아고라 Flutter SDK를 사용하여 동적 채널을 갖춘 비디오 채팅 애플리케이션을 구현하셨습니다. 이 애플리케이션에서는 채널을 생성한 사용자가 슈퍼유저로 선정됩니다. 이 사용자는 채널의 세부 정보를 다른 사용자와 공유합니다. 이 기능은 애플리케이션의 확장성을 보장합니다.
이 애플리케이션의 전체 코드는 여기에서 확인할 수 있습니다.
기타 자료
Agora Flutter SDK 및 기타 사용 사례에 대해 자세히 알아보려면 여기에 제공된 개발자 가이드를 참고하세요.
위에서 논의된 기능 및 기타 많은 기능에 대한 완전한 문서는 여기에서 확인할 수 있습니다.
또한 Agora Developer Slack 커뮤니티에 가입해 주시기를 초대합니다.