# 샘플 앱 사용하기
샘플 앱을 실행하기 위한 필요 과정을 알아봅시다.
# 필수 변경사항
주의사항
샘플 코드를 다운로드 받으신 후 roomId 값을 변경해야 합니다. 하단의 설명을 통해서 변경할 부분을 확인하여서 변경해주시면 됩니다.
# 소스코드 💾
샘플마다 사용할 수 있는 플랫폼이 다릅니다.
샘플 앱 마다 빌드가 가능한 플랫폼이 다를 수 있으며, 해당 주소에 위 이미지와 같이 적용가능한 플랫폼이 명시되어있으니 참조해주세요.
# roomId 변경
- 플러터 샘플 앱을 다운로드 합니다.
- 압축된 파일을 해제하고
lib/main.dart파일을 편집기로 열어줍니다. - CMS 화면에서 개설한 채팅방의
Channel Key를 복사합니다. roomId라는 변수명 값에 1번에서 복사한 key 값을 붙여 넣어줍니다.
- lib/main.dart
const roomId = "pasteYourChannelKey"
class VChatCloudApp extends StatelessWidget{
// ...
}
1
2
3
4
2
3
4
# Channel
Channel 클래스를 이용하여 채팅방에 진입하고, 메시지 이벤트들을 컨트롤할 수 있습니다.
아래 코드는 채팅방 진입만 다루고 있고, 메시지 전송, 공지등은 자세한 이벤트 설명은 좌측 메뉴리스트의 채널를 참고해주세요.
var channelStore = Provider.of<ChannelStore>(context, listen: false);
var clientKey = storage.getString("clientKey");
var user = UserModel(
roomId: ROOM_ID,
nickName: nickName,
userInfo: {"profile": imageIndex.toString()},
clientKey: clientKey,
);
// 채널 참여
var history = await channelStore.channel.join(user);
// 히스토리 내용 추가
List<ChatItem> list = [];
list.addAll((history.body["history"] as List<dynamic>)
.map((e) => ChatItem.fromJson(e as Map<String, dynamic>)));
var channelStore = Provider.of<ChannelStore>(context, listen: false);
channelStore.setChatLog(list);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
파라미터 값
값 식별자 설명 user UserModel (opens new window) - 결과 값
값 식별자 설명 history List<ChannelResultModel (opens new window)> 채널 이벤트 데이터 배열