chat uikit flutter
version: 4.0.0
Вам нужно только интегрировать чат SDK, чтобы легко получить чат, разговор, возможности групп, а также вы можете общаться с другими продуктами, такими как доски, посредством сигнальных сообщений. Чат может охватывать различные бизнес -сценарии, поддерживать доступ и использование различных платформ и полностью удовлетворить потребности в общении.
Этот документ представляет, как быстро запустить демонстрацию чата на платформе iOS. Для других платформ обратитесь к документу ：
Чат SDK поставляется с Tuikit, который представляет собой официальный набор компонентов пользовательского интерфейса, в которых встроена встроенная логика в чате. Tuikit включает в себя такие компоненты, как разговор, чат, цепочка отношений и группа. Смотрите обзор библиотеки Tuikit для получения более подробной информации.
Разработчики могут использовать эти компоненты пользовательского интерфейса, чтобы быстро и легко добавить чат-модули в приложении в свои мобильные приложения.
В настоящее время Flutter Tuikit содержит следующие основные компоненты:
В дополнение к этим компонентам существуют другие полезные компоненты и виджеты, чтобы помочь разработчикам удовлетворить свои бизнес -потребности, такие как список приложений для вступления в группу и список членов группы.
Платформы совместимы с развертыванием нашего чата uikit.
Пожалуйста, обратитесь к Demo для полного и подробного руководства по началу работы.
В следующем руководстве описывается, как быстро построить простое приложение в чате, используя Flutter Tuikit. Обратитесь к приложению, если вы хотите узнать о деталях и параметрах каждого виджета.
Зарегистрируйтесь и войдите в консоли чата.
Создайте приложение и введите его. Нажмите пользователей и создайте две учетные записи.
Правильный способ распространения
UserSig-это интеграция кода расчета дляUserSigв ваш сервер и предоставить API, ориентированный на приложение. Когда потребуетсяUserSig, ваше приложение может отправить запрос на бизнес -сервер для динамическогоUserSig.Для получения дополнительной информации см. Как я могу рассчитать пользователя на сервере?
Создайте приложение Flutter быстро, следуя документации Flutter.
Tuikit нужны разрешения на съемку/альбом/запись/сеть для основных функций обмена сообщениями. Вам необходимо объявить эти разрешения вручную для использования соответствующих возможностей обычно.
Откройте android/app/src/main/AndroidManifest.xml и добавьте следующие строки между <manifest> и </manifest> .
< uses-permission android : name = " android.permission.INTERNET " />
< uses-permission android : name = " android.permission.RECORD_AUDIO " />
< uses-permission android : name = " android.permission.FOREGROUND_SERVICE " />
< uses-permission android : name = " android.permission.ACCESS_NETWORK_STATE " />
< uses-permission android : name = " android.permission.VIBRATE " />
< uses-permission android : name = " android.permission.ACCESS_BACKGROUND_LOCATION " />
< uses-permission android : name = " android.permission.WRITE_EXTERNAL_STORAGE " />
< uses-permission android : name = " android.permission.READ_EXTERNAL_STORAGE " />
< uses-permission android : name = " android.permission.CAMERA " />
< uses-permission android : name = " android.permission.READ_MEDIA_IMAGES " />
< uses-permission android : name = " android.permission.READ_MEDIA_VIDEO " /> Откройте 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['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
config.build_settings['ENABLE_BITCODE'] = 'NO'
config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
end
target.build_configurations.each do |config|
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',
'PERMISSION_MICROPHONE=1',
'PERMISSION_CAMERA=1',
'PERMISSION_PHOTOS=1',
]
end
end
end
Добавить tencent_cloud_chat_uikit в dependencies в файле pubspec.yaml или запустите следующую команду:
flutter pub add tencent_cloud_chat_uikitОн поддерживает Android и iOS по умолчанию. Если вы также хотите использовать его в Интернете, обратитесь к следующему руководству.
Версия 0.1.4 или позже требуется для поддержки Интернета.
Если ваш существующий проект Flutter не поддерживает Интернет, запустите flutter create . В каталоге Project Root для добавления веб -поддержки.
Установите зависимости JavaScript в web/ с помощью npm или yarn .
cd web
npm init
npm i tim-js-sdk
npm i tim-upload-plugin Откройте web/index.html и добавьте следующие две строки между <head> и </head> , чтобы импортировать их.
< script src =" ./node_modules/tim-upload-plugin/index.js " > </ script >
< script src =" ./node_modules/tim-js-sdk/tim-js-friendship.js " > </ script >Инициализируйте tuikit, когда ваше приложение запускается. Вам нужно выполнить инициализацию только один раз для начала проекта.
Получите экземпляр Tuikit сначала, используя TIMUIKitCore.getInstance() , а затем инициализация его sdkAppID .
/// main.dart
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
final CoreServicesImpl _coreInstance = TIMUIKitCore . getInstance ();
@override
void initState () {
_coreInstance. init (
sdkAppID : 0 , // Replace 0 with the SDKAppID of your Tencent Cloud Chat application
loglevel : LogLevelEnum . V2TIM_LOG_DEBUG ,
listener : V2TimSDKListener ());
super . initState ();
}}Вы также можете зарегистрировать функцию обратного вызова для
onTUIKitCallbackListenerздесь. См. Приложение.
Теперь вы можете войти в один из учетных записей тестирования, сгенерированных на шаге 0, чтобы запустить модуль облачного чата Tencent.
Войдите, используя _coreInstance.login .
/// main.dart
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart' ;
final CoreServicesImpl _coreInstance = TIMUIKitCore . getInstance ();
_coreInstance. login (userID : userID, userSig : userSig);Примечание. Импорт пользователей в ваш приложение предназначена только для целей отладки и не может использоваться для версии выпуска. Перед публикацией вашего приложения вы должны генерировать пользователи с вашего сервера. См.: Генерировать подпись.
Вы можете использовать страницу списка разговоров (канала) в качестве домашней страницы вашего чата, который включает в себя все разговоры с пользователями и группами, которые имеют записи чата.
Вы можете создать класс Conversation с TIMUIKitConversation в качестве своего тела, чтобы составить список разговоров. Вам нужно только предоставить обратный вызов 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);
@override
Widget 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,
),
));
},
),
);
}
}Страница чата состоит из основного списка сообщений и сообщения, отправляющего панель внизу.
Вы можете создать класс Chat с TIMUIKitChat в качестве его тела, чтобы отобразить страницу чата. Мы рекомендуем предоставить функцию обратного вызова onTapAvatar , чтобы перейти на страницу профиля для текущего контакта, который мы представим на следующем шаге.
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;
}
@override
Widget build ( BuildContext context) {
return TIMUIKitChat (
conversationID : _getConvID () ?? '' ,
conversationType : selectedConversation.type ?? 1 ,
conversationShowName : selectedConversation.showName ?? "" ,
onTapAvatar : (_) {
Navigator . push (
context,
MaterialPageRoute (
builder : (context) => UserProfile (userID : userID),
));
},
);
}На этой странице показан профиль конкретного пользователя и поддерживает отношения между текущим пользователем регистрации и другим пользователем.
Вы можете создать UserProfile класс, с TIMUIKitProfile в качестве его тела, чтобы отобразить страницу профиля пользователя.
Единственный параметр, который вы должны предоставить, - это userID , в то время как этот компонент автоматически генерирует страницу поддержания профиля и отношений на основе существования дружбы.
Совет : пожалуйста, сначала используйте
profileWidgetBuilder, чтобы настроить некоторые виджеты профиля и определить их вертикальную последовательность, используя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);
@override
Widget build ( BuildContext context) {
return Scaffold (
appBar : AppBar (
title : const Text (
"Message" ,
style : TextStyle (color : Colors .black),
),
),
body : TIMUIKitProfile (
userID : widget.userID,
),
);
}
}Теперь ваше приложение может отправлять и получать сообщения, отображать список разговоров и управлять контактными дружескими отношениями. Вы можете использовать другие компоненты из Tuikit, чтобы быстро и легко реализовать полный модуль чата.
Нет. Вам не нужно снова интегрировать чат SDK. Если вы хотите использовать API, связанные с SDK, вы можете получить их через TIMUIKitCore.getSDKInstance() . Этот метод рекомендуется для обеспечения согласованности версии SDK в чате.
Проверьте, включили ли вы камеру , микрофон , альбом или другие связанные разрешения.
Относится к шагу 1 выше.
Убедитесь, что устройство не занято другими ресурсами. В качестве альтернативы нажмите «Строитель», чтобы сгенерировать пакет APK, перетащите его в симулятор и запустите его.
Если после конфигурации возникает ошибка, нажмите Product> Clean Build Polder , очистите продукт и запустите pod install или снова flutter run .
Включите режим самолета на Apple Watch и перейдите к настройкам> Bluetooth на вашем iPhone, чтобы отключить Bluetooth.
Перезапустите Xcode (если открыт) и запустите flutter run .
androidappsrcmainAndroidManifest.xml и Complete 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 = " Replace it with your Android package name "
xmlns : tools = " http://schemas.android.com/tools " >
< application android : label = " @string/android_label " tools : replace = " android:label "
android : icon = " @mipmap/ic_launcher "
// Specify an icon path
android : usesCleartextTraffic = " true "
android : requestLegacyExternalStorage = " true " >androidappbuild.gradle и полная minSdkVersion и targetSdkVersion в defaultConfig . defaultConfig {
applicationId " " // Replace it with your Android package name
minSdkVersion 21
targetSdkVersion 30
}Для тех, кому требуются возможности голоса и видеозвонков в реальном времени вместе с нашим чатом uikit, мы настоятельно рекомендуем наш специальный пакет компонентов пользовательского интерфейса голоса и видео, tencent_calls_uikit. Этот надежный и богатый функциями пакет специально разработан для дополнения нашего существующего решения и беспрепятственной интеграции с ним, обеспечивая комплексный, унифицированный опыт общения для ваших пользователей.
