ionic/cordova即時通訊解決方案（上）

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));
                        }
            });

         發送消息

               RongCloudLibPlugin.sendTextMessage({

               conversationType: 'PRIVATE',

               targetId: '9527',

               text: 'Hello world.', extra: '' },

               function (ret, err) {

                  if (ret.status == 'prepare') alert(JSON.stringify(ret.result.message) );

                 else if (ret.status == 'success') alert(ret.result.message.messageId );

                 else if (ret.status == 'error') alert(err.code );

               } );

 

5，聊天核心功能都已經列出來下面就是配上UI了下一節寫界面部分包括小紅點和未讀數處理。