플랫폼 | 버전 |
Flutter | IM SDK에는 최소 Flutter 2.2.0 버전이 필요하고 TUIKit 통합 컴포넌트 라이브러리에는 최소 Flutter 2.10.0 버전이 필요합니다. |
Android | Android Studio 3.5 및 그 이후 버전. App은 Android 4.1 및 그 이후 버전 디바이스가 필요합니다. |
iOS | Xcode 11.0 및 그 이후 버전. 프로젝트에 유효한 개발자 서명이 설정되어 있는지 확인십시오. |
플랫폼 | ||
iOS | 지원 | 지원 |
Android | 지원 | 지원 |
v4.1.1+2부터 지원 | v0.1.5부터 지원 | |
v4.1.9부터 지원 | 곧 출시 | |
v4.1.9부터 지원 | 곧 출시 | |
하이브리드 개발 (기존 네이티브 애플리케이션에 Flutter SDK 추가) | v5.0.0부터 지원 | v1.0.0부터 지원 |
모바일 APP | WEB - H5 |
iOS/Android APP, 플랫폼에 따라 자동으로 다운로드됨![](https://qcloudimg.tencent-cloud.cn/raw/ca2aaff551410c74fce48008c771b9f6.png) | 휴대폰으로 QR 코드를 스캔하여 Web DEMO 체험![](https://qcloudimg.tencent-cloud.cn/raw/3c79e8bb16dd0eeab35e894a690e0444.png) |
UserID
, 서명(Key)
, UserSig
를 복사하여 이후 로그인에 사용합니다.
UserSig
배포 방식은 서버에서 생성하여, App 지향 인터페이스를 제공하는 것입니다. UserSig
가 필요할 때, App은 비즈니스 서버에 동적 UserSig
가져오기 요청을 발송합니다. 자세한 내용은 Generating UserSig를 참고하십시오.통합 방법 | 적용 가능한 시나리오 |
IM Demo는 완전한 채팅 App이며, 코드는 오픈 소스로, 채팅과 같은 시나리오를 구현해야 하는 경우 Demo를 사용하여 2차 개발을 할 수 있습니다. 바로 Demo 체험할 수 있습니다. | |
IM의 UI 컴포넌트 라이브러리 TUIKit 은 일반 UI 컴포넌트를 제공하며, 예를 들어 대화 목록, 채팅 인터페이스 및 연락처 목록 등 개발자는 실제 비즈니스 요구에 따라 이 컴포넌트 라이브러리를 통해 사용자 정의 IM 애플리케이션을 빠르게 구축할 수 있습니다. 이 방법을 먼저 사용할 것을 권장합니다. | |
TUIKit이 애플리케이션의 인터페이스 요구 사항을 충족할 수 없거나 더 많은 사용자 정의가 필요한 경우 이 솔루션을 사용할 수 있습니다. |
# Clone the codegit clone https://github.com/TencentCloud/tc-chat-demo-flutter.git# Install dependenciesflutter pub get
#demo 프로젝트를 시작하고 SDK_APPID 및 KEY의 두 매개변수 교체flutter run --dart-define=SDK_APPID={YOUR_SDKAPPID} --dart-define=ISPRODUCT_ENV=false --dart-define=KEY={YOUR_KEY}
--dart-define=SDK_APPID={YOUR_SDKAPPID}
중 {YOUR_SDKAPPID}
는 귀하의 애플리케이션 SDKAppID로 대체합니다.--dart-define=ISPRODUCT_ENV=false
개발 또는 프로덕션 환경을 판단하고 개발 환경이라면 false를 사용하십시오.--dart-define=KEY={YOUR_KEY}
중 {YOUR_KEY}
는 파트1: 테스트 사용자 생성 의 키(Key)
정보로 대체합니다.im-flutter-uikit
디렉터리를 엽니다.
flutter pub get
main.dart
로 마우스 hover, Edit Configurations
를 선택합니다.
Additional run args
를 구성합니다. 예시:# SDK_APPID 및 KEY 매개변수 교체--dart-define=SDK_APPID={YOUR_SDKAPPID} --dart-define=ISPRODUCT_ENV=false --dart-define=KEY={YOUR_KEY}
im-flutter-uikit/ios
디렉터리를 엽니다.
폴더 | 소개 |
lib | 프로그램 코어 디렉터리 |
lib/i18n | 국제화 관련 코드. 여기서 국제화에는 TUIKit 자체의 국제화 능력 및 국제화 표제를 포함되지 않으므로 필요에 따라 가져올 수 있습니다. |
lib/src | 프로젝트 엔터티 디렉터리 |
lib/src/pages | 이 Demo의 몇 가지 주요 내비게이션 페이지입니다. 프로젝트가 초기화된 후 app.dart 는 로딩 애니메이션을 표시하고 로그인 상태를 판단하여 사용자를 login.dart 또는 home_page.dart 로 이동합니다. 사용자가 로그인하면 로그인 정보가 shared_preference 플러그 인을 통해 로컬에 저장됩니다. 이후 애플리케이션을 실행할 때마다 원래 로그인 정보가 로컬에서 발견되면 자동으로 해당 정보를 사용하여 로그인합니다. 이 정보가 없거나 로그인에 실패하면 로그인 페이지로 이동합니다. 자동 로그인 프로세스 동안 사용자는 여전히 app.dart 에 있고 로딩 애니메이션을 볼 수 있습니다. home_page.dart 에는 이 Demo의 네 가지 주요 기능 페이지 전환을 지원하는 하단 Tab이 포함되어 있습니다. |
lib/utils | 일부 툴 함수 클래스 |
lib/src
의 각 dart 파일은 TUIKit 컴포넌트를 도입하고 파일에서 컴포넌트를 인스턴스화한 후 페이지를 렌더링할 수 있습니다.lib/src 주요 파일 | 파일 소개 |
add_friend.dart | 친구 추가 신청 페이지, TIMUIKitAddFriend 컴포넌트 사용 |
add_group.dart | 그룹 신청 페이지, TIMUIKitAddGroup 컴포넌트 사용 |
blacklist.dart | 차단 리스트 페이지, TIMUIKitBlackList 컴포넌트 사용 |
chat.dart | 기본 채팅 페이지, 전체 TUIKit 채팅 기능 사용, TIMUIKitChat' 컴포넌트 사용 |
chatv2.dart | 기본 채팅 페이지, 원자화 기능 사용, TIMUIKitChat 컴포넌트 사용 |
contact.dart | 연락처 페이지, TIMUIKitContact 컴포넌트 사용 |
conversation.dart | 대화 목록 인터페이스, TIMUIKitConversation 컴포넌트 사용 |
create_group.dart | 그룹 채팅 페이지 시작, Demo 단독 구현, 컴포넌트 미사용 |
group_application_list.dart | 그룹 신청 목록 페이지, TIMUIKitGroupApplicationList 컴포넌트 사용 |
group_list.dart | 그룹 목록 페이지, TIMUIKitGroup 컴포넌트 사용 |
group_profile.dart | 그룹 프로필 및 그룹 관리 페이지, TIMUIKitGroupProfile 컴포넌트 사용 |
newContact.dart | 연락처 친구 신청 페이지, TIMUIKitNewContact 컴포넌트 사용 |
routes.dart | Demo 경로, 로그인 페이지 login.dart 또는 홈 페이지 home_page.dart 로 이동합니다. |
search.dart | 전역 검색 및 대화 내 검색 페이지, TIMUIKitSearch (전역 검색) 및 TIMUIKitSearchMsgDetail (대화 내 검색) 컴포넌트 사용 |
user_profile.dart | 사용자 프로필 및 관계망 유지 관리 페이지, TIMUIKitProfile 컴포넌트 사용 |
android/app/src/main/AndroidManifest.xml
을 열고, <manifest></manifest>
에서 다음 권한을 추가합니다.<uses-permissionandroid:name="android.permission.INTERNET"/><uses-permissionandroid:name="android.permission.RECORD_AUDIO"/><uses-permissionandroid:name="android.permission.FOREGROUND_SERVICE"/><uses-permissionandroid:name="android.permission.ACCESS_NETWORK_STATE"/><uses-permissionandroid:name="android.permission.VIBRATE"/><uses-permissionandroid:name="android.permission.ACCESS_BACKGROUND_LOCATION"/><uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permissionandroid:name="android.permission.READ_EXTERNAL_STORAGE"/><uses-permissionandroid:name="android.permission.CAMERA"/>
ios/Podfile
을 열고 파일 끝에 다음 권한 코드를 추가합니다.post_install do |installer|installer.pods_project.targets.each do |target|flutter_additional_ios_build_settings(target)target.build_configurations.each do |config|config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)','PERMISSION_MICROPHONE=1','PERMISSION_CAMERA=1','PERMISSION_PHOTOS=1',]endendend
tencent_cloud_chat_uikit
만 설치하면 됩니다.# 명령 라인에서 실행:flutter pub add tencent_cloud_chat_uikit
TIMUIKitCore.getInstance()
를 실행한 다음 초기화 함수 init()
를 호출합니다. sdkAppID
를 전달해야 합니다./// main.dartimport 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();@overridevoid initState() {_coreInstance.init(sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application when integrating// language: LanguageEnum.en, // UI 언어. 값을 지정하지 않으면 시스템 언어가 사용됩니다loglevel: LogLevelEnum.V2TIM_LOG_DEBUG,onTUIKitCallbackListener: (TIMCallback callbackValue){}, // [리스너 구성](https://www.tencentcloud.com/document/product/1047/50054#onTUIKitCallbackListener)listener: V2TimSDKListener());super.initState();}}
_coreInstance.login
메소드를 호출하여 테스트 계정으로 로그인합니다.import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();_coreInstance.login(userID: userID, userSig: userSig);
UserSig
배포 방식은 서버에서 생성하여, App 지향 인터페이스를 제공하는 것입니다. UserSig
가 필요할 때, App은 비즈니스 서버에 동적 UserSig
가져오기 요청을 발송합니다. 자세한 내용은 Generating UserSig를 참고하십시오.onTapItem
이벤트 처리 함수만 전달하면 됩니다. Chat
클래스는 다음 단계에서 자세히 설명합니다.import 'package:flutter/material.dart';import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';class Conversation extends StatelessWidget {const Conversation({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Message",style: TextStyle(color: Colors.black),),),body: TIMUIKitConversation(onTapItem: (selectedConv) {Navigator.push(context,MaterialPageRoute(builder: (context) => Chat(selectedConversation: selectedConv,),));},),);}}
onTapAvatar
이벤트 처리 함수를 전달하는 것이 좋습니다. UserProfile
클래스는 다음 단계에서 설명합니다.import 'package:flutter/material.dart';import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';class Chat extends StatelessWidget {final V2TimConversation selectedConversation;const Chat({Key? key, required this.selectedConversation}) : super(key: key);String? _getConvID() {return selectedConversation.type == 1? selectedConversation.userID: selectedConversation.groupID;}@overrideWidget build(BuildContext context) {return TIMUIKitChat(conversationID: _getConvID() ?? '', // groupID or UserIDconversationType: selectedConversation.type ?? 1, // Conversation typeconversationShowName: selectedConversation.showName ?? "", // Conversation display nameonTapAvatar: (_) {Navigator.push(context,MaterialPageRoute(builder: (context) => UserProfile(userID: userID),));}, // Callback for the clicking of the message sender profile photo. This callback can be used with `TIMUIKitProfile`.);}
profileWidgetBuilder
를 사용하여 사용자 지정할 profile 컴포넌트를 전달하고 profileWidgetsOrder
를 사용하여 수직 표시 순서를 결정하는 것을 고려하십시오. 요구 사항을 충족할 수 없는 경우 builder
를 대신 사용하십시오.import 'package:flutter/material.dart';import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';class UserProfile extends StatelessWidget {final String userID;const UserProfile({required this.userID, Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Message",style: TextStyle(color: Colors.black),),),body: TIMUIKitProfile(userID: widget.userID,),);}}
TIMUIKitProfile
과 기본적으로 동일한 그룹 프로필 페이지.TIMUIKitUnreadCount
배지 컴포넌트를 사용할 수 있습니다.TIMUIKitSearch
는 연락처, 그룹 및 채팅 기록의 글로벌 검색을 지원하는 글로벌 검색 컴포넌트입니다. TIMUIKitSearchMsgDetail
을 사용하여 특정 대화에서 채팅 기록을 검색할 수도 있습니다. 두 가지 검색 모드 중에서 선택하기 위해 conversation
을 전달할지 여부를 선택할 수 있습니다.flutter pub add tencent_cloud_chat_sdk
sdkAppID
를 전달하십시오.import 'package:tencent_cloud_chat_sdk/enum/V2TimSDKListener.dart';import 'package:tencent_cloud_chat_sdk/enum/log_level_enum.dart';import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';TencentImSDKPlugin.v2TIMManager.initSDK(sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application when integratingloglevel: LogLevelEnum.V2TIM_LOG_DEBUG, // Loglistener: V2TimSDKListener(),);
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';V2TimCallback res = await TencentImSDKPlugin.v2TIMManager.login(userID: userID,userSig: userSig,);
UserSig
발급 방식은 다음과 같습니다. UserSig
계산 코드를 귀하의 서버에 통합하고 App 방향의 인터페이스를 제공합니다. UserSig
가 필요할 때 귀하의 App이 비즈니스 서버로 동적 UserSig
를 요청합니다. 자세한 내용은 Generating UserSig를 참고하십시오.createTextMessage(String)
를 호출하여 문자 메시지를 생성합니다.sendMessage()
를 호출하여 해당 ID로 메시지를 발송합니다. receiver
는 이전에 생성한 다른 테스트 계정 ID로 입력할 수 있습니다. 하나의 채팅 메시지를 발송할 때 groupID
를 입력할 필요가 없습니다.import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';V2TimValueCallback<V2TimMsgCreateInfoResult> createMessage =await TencentImSDKPlugin.v2TIMManager.getMessageManager().createTextMessage(text: "The text to create");String id = createMessage.data!.id!; // The message creation IDV2TimValueCallback<V2TimMessage> res = await TencentImSDKPlugin.v2TIMManager.getMessageManager().sendMessage(id: id, // Pass in the message creation ID toreceiver: "The userID of the destination user",groupID: "The groupID of the destination group",);
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';String nextSeq = "0";getConversationList() async {V2TimValueCallback<V2TimConversationResult> res = await TencentImSDKPlugin.v2TIMManager.getConversationManager().getConversationList(nextSeq: nextSeq, count: 10);nextSeq = res.data?.nextSeq ?? "0";}
await TencentImSDKPlugin.v2TIMManager.getConversationManager().setConversationListener(listener: new V2TimConversationListener(onConversationChanged: (List<V2TimConversation> list){_onConversationListChanged(list);},onNewConversation:(List<V2TimConversation> list){_onConversationListChanged(list);},
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';List<V2TimConversation> _conversationList = [];_onConversationListChanged(List<V2TimConversation> list) {for (int element = 0; element < list.length; element++) {int index = _conversationList.indexWhere((item) => item!.conversationID == list[element].conversationID);if (index > -1) {_conversationList.setAll(index, [list[element]]);} else {_conversationList.add(list[element]);}}
import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';V2TimValueCallback<List<V2TimMessage>> res = await TencentImSDKPlugin.v2TIMManager.getMessageManager().getGroupHistoryMessageList(groupID: "groupID",count: 20,lastMsgID: "",);List<V2TimMessage> msgList = res.data ?? [];// here you can use msgList to render your message list}
V2TimAdvancedMsgListener.onRecvNewMessage
라는 긴 링크에서 새 메시지가 나타납니다.onRecvNewMessage
콜백이 트리거된 후, 필요에 따라 새 메시지를 메시지 기록 리스트에 추가할 수 있습니다.import 'package:tencent_cloud_chat_sdk/tencent_cloud_chat_sdk.dart';final adVancesMsgListener = V2TimAdvancedMsgListener(onRecvNewMessage: (V2TimMessage newMsg) {_onReceiveNewMsg(newMsg);},/// ... other listeners related to message);TencentImSDKPlugin.v2TIMManager.getMessageManager().addAdvancedMsgListener(listener: adVancesMsgListener);
flutter pub add tencent_im_sdk_plugin_web
flutter create .
를 실행하여 Web 지원을 추가하십시오.web/
디렉터리로 이동하고 npm
또는 yarn
을 사용하여 관련 JS 종속성을 설치합니다. 프로젝트를 초기화하려면 화면의 지시를 따르십시오.cd webnpm initnpm i tim-js-sdknpm i tim-upload-plugin
web/index.html
을 열고, <head> </head>
JS 파일을 가져옵니다. 아래를 참고하십시오.<script src="./node_modules/tim-upload-plugin/index.js"></script><script src="./node_modules/tim-js-sdk/tim-js-friendship.js"></script>
flutter pub add tencent_im_sdk_plugin_desktop
macos/Runner/DebugProfile.entitlements
파일을 엽니다.<dict></dict>
에서 다음 key-value
키 값 쌍을 추가합니다.<key>com.apple.security.app-sandbox</key><false/>
pod install
또는 flutter run
을 다시 실행하십시오.ios/Pods
폴더와 ios/Podfile.lock
파일을 수동으로 삭제하고 다음 명령을 실행하여 종속성을 다시 설치합니다.cd iossudo arch -x86_64 gem install ffiarch -x86_64 pod install --repo-update
cd iossudo gem install ffipod install --repo-update
설정 => 블루투스
로 이동하여 블루투스를 끕니다.flutter run
을 다시 실행합니다.android\\app\\src\\main\\AndroidManifest.xml
을 열고, 다음과 같이 xmlns:tools="http://schemas.android.com/tools"
/ android:label="@string/android_label"
및 tools:replace="android:label"
을 완료합니다.<manifest xmlns:android="http://schemas.android.com/apk/res/android"package="Android 패키지 이름으로 교체"xmlns:tools="http://schemas.android.com/tools"><applicationandroid:label="@string/android_label"tools:replace="android:label"android:icon="@mipmap/ic_launcher" // icon 경로 지정android:usesCleartextTraffic="true"android:requestLegacyExternalStorage="true">
android\\app\\build.gradle
을 열고 defaultConfig
에서 minSdkVersion
및 targetSdkVersion
을 완료합니다.defaultConfig {applicationId "" // Android 패키지 이름으로 교체minSdkVersion 21targetSdkVersion 30}
문제 해결에 도움이 되었나요?