ionic/cordova即时通讯解决方案（上）

Posted 2020-07-25

webAPP即时通讯解决方案一开始总是找一些web端的第三方，其实做移动端还是比较推荐使用插件引入原生的第三方比较好。当然也试过用WebSocket协议来做，之前尝试过但是在PC上完美实现，当时在移动机上出了些问题，但是开发任务紧张后来放弃了。这里本章简单介绍使用融云的cordova来实现即时通讯。

相关文档http://www.rongcloud.cn/docs/cordova.html

 

1，在融云官网注册一个开发者账号，创建应用获取AppKey,AppSecret

2，在自己项目中导入插件，命令如下

     ionic plugin add https://github.com/rongcloud/cordova-plugin-rongcloud-im

 

3，让服务器端配置AppSecret为前端提供一个接口，通过UserId等参数返回Token

 

4，前端拿到Token之后连接融云SDK：

     初始化sdk   

     RongCloudLibPlugin.init({

             appKey: "z3v46kbv8v30"

        },
        function(ret, err) {
          if (ret) {
            console.log(‘init:‘ + JSON.stringify(ret));
          }
          if (err) {
            console.log(‘init error:‘ + JSON.stringify(err));
          }
        } );
   

      获取账号状态

       RongCloudLibPlugin.setConnectionStatusListener(
        function(ret, err) {
          if (ret) {
            console.log(‘setConnectionStatusListener:‘ + JSON.stringify(ret));
            if(ret.result.connectionStatus == ‘KICKED‘){
              alert(‘您的帐号已在其他端登录!‘);
              $rootScope.hideTabs = false;
              $ionicHistory.clearCache();
              $state.go(‘login‘);
            }
          }
          if (err) {
            console.log(‘setConnectionStatusListener error:‘ + JSON.stringify(err));
          }
        }); 
    

 

       连接融云
       RongCloudLibPlugin.connect({

          服务器接口获取的token
          token: token

         },
       function(ret, err) {
           if (ret) {
              console.log(‘connect:‘ + JSON.stringify(ret));
              $rootScope.curUID = ret.result.userId;
              $rootScope.$apply();
              myUtil.setUserId(ret.result.userId);
                 $state.go(‘tab.friends‘, {
                     userId: ret.result.userId
                  }, {
                    reload: true
                      });
             }
          if (err) {
              console.log(‘init error:‘ + JSON.stringify(err));
              }
       });
       

       监听消息

          RongCloudLibPlugin.setOnReceiveMessageListener(
               function(ret, err) {
               if (ret) {
                           console.log(‘setOnReceiveMessageListener:‘ + JSON.stringify(ret));
                           var data=JSON.stringify(ret)
                           $rootScope.arrMsgs.push(JSON.stringify(ret.result.message));
                           $rootScope.$apply();
               }
             if (err) {
                           console.log(‘setOnReceiveMessageListener error:‘ + JSON.stringify(err));
              }
        });

 

       消息列表

           RongCloudLibPlugin.getConversationList(
              function(ret, err) {
                 if (ret) {
                   console.log(‘setOnReceiveMessageListener:‘ + JSON.stringify(ret));
                   var data=JSON.stringify(ret)
                   $rootScope.arrMsgs.push(JSON.stringify(ret.result.message));
                   $rootScope.$apply();
                }
               if (err) {
                    console.log(‘setOnReceiveMessageListener error:‘ + JSON.stringify(err));
                }
            });

     

         聊天历史数据 

               RongCloudLibPlugin.getHistoryMessages({
                        

                    对话类型（单聊）
                   conversationType:‘PRIVATE‘,

                   对话目标ID
                   targetId:‘1234‘,

                   count: 5,
                   oldestMessageId: oldestMessageId
                    },
               function(ret, err) {
                            if (ret) {
                                  console.log("getHistoryMessages:" + JSON.stringify(ret));
                                  var result = new Array(),tmp;
                                  for (var i = ret.result.length - 1; i >= 0; i--) {
                                  tmp = ret.result[i];
                                  tmp = myUtil.resolveMsg(tmp);
                                  result.push(tmp);
                                       }
                            var hisArr = result.concat($scope.hisMsgs);
                            $scope.hisMsgs = hisArr;
                            }
                         if (err) {
                             alert("getHistoryMessages error: " + JSON.stringify(err));
                              }
                    });

        获取对话

            RongCloudLibPlugin.getConversation({

                对话类型（单聊）
                   conversationType:‘PRIVATE‘,

                对话目标ID
                   targetId:‘1234‘,
               },
            function(ret, err) {
              if (ret) {
                         console.log(‘setOnReceiveMessageListener:‘ + JSON.stringify(ret));
                         var data=JSON.stringify(ret)
                         $rootScope.arrMsgs.push(JSON.stringify(ret.result.message));
                        $rootScope.$apply();
                        }
              if (err) {
                         console.log(‘setOnReceiveMessageListener error:‘ + JSON.stringify(err));
                        }
            });

5，聊天核心功能都已经列出来下面就是配上UI了下一节写界面部分包括小红点和未读数处理。