• 前言：目前环信sdk还没有以flutter插件的形式提供支持，所以需要各自在android端和ios端集成

• 前期准备：在 https://kefu.easemob.com/ 中设置好账号信息，flutter项目创建完成。

• 附环信客服文档：http://docs.easemob.com/cs/300visitoraccess/androidsdkapi

• ps:本项目在安卓端采取插件形式集成，在ios端采取class的方式集成（在正式项目中统一一种集成方式较好）

android端

一.创建flutter插件

创建flutter插件

一步步设置好后，AS会帮助创建一个flutter插件项目

插件项目目录

接下来主要在hx_plugin.dart文件下编写代码

hx_plugin.dart

1.首先创建MethodChannel对象、StreamController,并添加监听方法,这样就能接收原生端发送的广播：

  static  MethodChannel _channel =
      const MethodChannel('hxkefu_plugin')..setMethodCallHandler(_handle);

 static StreamController<dynamic> _messageController = new StreamController.broadcast();

  static Future<void> _handle(MethodCall call){
  //接收原生端发送名为message_listen的广播
    if(call.method=="message_listen"){
      _messageController.add(call.arguments);
    }
  }

2.编写flutter端发送到原生端的广播，下面的所有方法都是根据环信文档的androidAPI来写：

//初始化方法，在flutter端调用其他环信api前必须先调用该方法
  static Future init(String appkey,String tenantId) async {
     await _channel.invokeMethod('hxInit',{
       "appkey":appkey,
       "tenantId":tenantId
     });

  }
  
//环信注册api
  static Future register(String username,String password)async{
    return await _channel.invokeMethod('hxRegister',{
      "username":username,
      "password":password,
    });
  }
  
//环信登录api
  static Future login(String username,String password,String userAvatar) async {
    return await _channel.invokeMethod('hxLogin',{
      "username":username,
      "password":password,
      "userAvatar":userAvatar
    });

  }

//环信登出api
  static Future logout() async {
    return await _channel.invokeMethod('hxLogout');

  }

  //进入聊天界面
  static Future start(String kefuchannelimid) async {
    return await _channel.invokeMethod('start',{
      "kefuchannelimid":kefuchannelimid
    });

  }
  //获得所有会话
  static Future getAllConversions()async{
    return await _channel.invokeMethod("getAllConversations");
  }
  
  static Future sendOrderInfo(String title,String orderTitle,String price,
      String desc,String imageUrl,String itemUrl,String content,String kefuchannelimid)async{
    return await _channel.invokeMethod("sendOrderInfo",{
      "title":title,
      "orderTitle":orderTitle,
      "price":price,
      "desc":desc,
      "imageUrl":imageUrl,
      "itemUrl":itemUrl,
      "content":content,
      "kefuchannelimid":kefuchannelimid
    });
  }

3. 在flutter项目中通过本地依赖的方式来引用

//在pubspec.yaml文件中引入，该插件项目文件与flutter项目同级
  hxkefu_plugin:
    path: "../hxkefu_plugin"

4.在flutter端调用该插件API

///在需要的地方调用插件API即可
///初始化
HxkefuPlugin.init("${appkey}", "${tenantId}");
///其他API的调用不一一展示了

5.在插件android端依赖环信androidSDK

将该插件项目以原生安卓中打开：

在安卓中打开

在插件项目的build.gradle文件引入环信androidSDK依赖

build.gradle文件

    dependencies {
        implementation fileTree(dir: 'libs', include: ['*.jar'])
        //环信客服SDK
        implementation 'com.hyphenate:kefu-easeui-android:latest.release' //或者 compile 'com.hyphenate:kefu-easeui-android:1.1.9r2'
        //EaseUI中 头像获取用到了glide，请添加glide库
        implementation 'com.github.bumptech.glide:glide:4.7.1' //其他版本也可以
        //EaseUI中，fragment用到了android-support-v4包
        implementation 'com.android.support:support-v4:28.0.0' //其他版本也可以
        compileOnly 'com.android.support:appcompat-v7:28.0.0-alpha1'
        compileOnly 'com.android.support:multidex:1.0.1'
        compileOnly 'com.android.support.constraint:constraint-layout:1.1.0'
        implementation 'androidx.core:core:1.5.0-alpha04'
    }

并点击sync project with gradle files安装依赖

image.png

6.android端的代码主要在下图中的文件进行编写：

HxkefuPlugin.java

主要展示了环信初始化api的代码，关于环信文档上其他需要的api也是这样的写法了。

  public static  Context mContext;
  static final Handler handler = new Handler(Looper.getMainLooper());
  @Override
  public void onAttachedToEngine(@NonNull FlutterPluginBinding flutterPluginBinding) {
    channel = new MethodChannel(flutterPluginBinding.getFlutterEngine().getDartExecutor(), "${your_channel_name}");
    mContext = flutterPluginBinding.getApplicationContext();
    channel.setMethodCallHandler(this);
  }

  @Override
  public void onMethodCall(@NonNull MethodCall call, @NonNull final Result result) {
    if (call.method.equals("getPlatformVersion")) {
      result.success("Android " + android.os.Build.VERSION.RELEASE);
    } else if(call.method.equals("hxInit")){
      String appkey = call.argument("appkey");
      String tenantId = call.argument("tenantId");

      System.out.println("==========appkey========="+appkey);
      System.out.println("==========tenantId========="+tenantId);
      ChatClient.Options options = new ChatClient.Options();
      options.setAppkey(appkey);
      options.setTenantId(tenantId);
      _uiProvider = UIProvider.getInstance();
      // Kefu SDK 初始化
      if (!ChatClient.getInstance().init(mContext, options)){
        return;
      }
      // Kefu EaseUI的初始化
     _uiProvider.init(mContext);
//      setEaseUIProvider(mContext);

      connectionListener = new  EMConnectionListener() {
        @Override
        public void onConnected() {
          System.out.println("网络连接成功");
        }

        @Override
        public void onDisconnected(int i) {

        }
      };
    }
  }

ios端

因为当时是两个人负责android和ios端，所以集成的方式不太一样，正确的做法是应该把插件在xcode那边编写好ios的代码，并调试。

1.在xcode打开插件项目，并引入环信ios sdk并配置

首先要下载环信提供的客服SDK，下载地址：http://www.easemob.com/download/cs（下载“iOS客服访客端SDK”）
往项目导入sdk的做法参考环信客服云文档-CEC IOS SDK集成-第3步：集成基础功能-准备工作。
PS：使用的环信sdk都是不包含实时音视频的版本，即：HelpDeskLite.framework和
HyphenateLite.framework，并使用环信demo里的EasyUI界面作为客服对话页面。

2.编写ios代码

在Runner文件夹创建文件。

@property(nonatomic) UIViewController *rootVc;


@end

@implementation HXPlugin


static NSString *const kMethodChannelName = @"${your_channel_name}";

static FlutterMethodChannel *mchannel;

static NSString *avatarUrl = @"";

static NSString *userName = @"";

//通道初始化
+(void) registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registar{
    mchannel = [FlutterMethodChannel methodChannelWithName:kMethodChannelName binaryMessenger:[registar messenger]];
    HXPlugin* instance = [[HXPlugin alloc] init];
    [registar addMethodCallDelegate:instance channel:mchannel];
}

//处理消息
-(void)handleMethodCall:(FlutterMethodCall*) call result:(FlutterResult) result{
    NSLog(@"监听事件:%@",call.method);
    if([@"init" isEqualToString:call.method]){
        BOOL result = [self init:call.arguments[@"app_key"] withTenantId:call.arguments[@"tenant_id"]];
     
        if(result){
            //初始化成功
            NSLog(@"环信初始化成功");
        }else{
            //初始化失败
            NSLog(@"环信初始化成功");
        }
    }else if([@"login" isEqualToString:call.method]){
        NSLog(@"环信user_name:%@", call.arguments[@"user_name"]);
        NSLog(@"环信password:%@", call.arguments[@"password"]);
        BOOL result = [self login:call.arguments[@"user_name"] :call.arguments[@"password"]];
        if(result){
            NSLog(@"环信登录成功");
        }else{
            NSLog(@"环信登录失败");
        }
    }
}

-(BOOL) init:(NSString*)appKey withTenantId:(NSString*) tenantId{
    HDOptions *option = [[HDOptions alloc] init];
    //初始化表情
    [[HDEmotionEscape sharedInstance] setEaseEmotionEscapePattern:@"\\[[^\\[\\]]{1,3}\\]"];
    [[HDEmotionEscape sharedInstance] setEaseEmotionEscapeDictionary:[HDConvertToCommonEmoticonsHelper emotionsDictionary]];
    option.appkey = appKey;
    option.tenantId = tenantId;
    HDError *initError = [[HDClient sharedClient] initializeSDKWithOptions:option];
    if(initError){
        //初始化失败
        NSLog(@"初始化错误信息：%@",initError.errorDescription);
        return NO;
    }else{
        //初始化成功
        return YES;
    }
}

-(BOOL)login:(NSString*) userName:(NSString*) password{
    HDClient *client = [HDClient sharedClient];
    if(client.isLoggedInBefore == NO){
        HDError *error = [client loginWithUsername:userName password:password];
        if(error){
            //登录失败
            NSLog(@"登录失败错误信息：%@",error.errorDescription);
            return NO;
        }else{
            //登陆成功
            return YES;
        }
    }else{
        //已经登录了
        NSLog(@"环信已经登录");
        return NO;
    }
}