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

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

时间: 2024-08-09 22:01:10

ionic/cordova即时通讯解决方案(上)的相关文章

成佩涛-移动IM(即时通讯解决方案)

现代互联网已经进入移动互联网时代,几乎现在所有主流应用都离不开移动领域.即时通讯行业,从之前的PC领域也逐步跨越到移动领域.这里给大家推荐几个即时通讯PAAS解决平台. 1.提供移动应用间的通讯服务,仅支持移动端. (1)容联云通讯 (2)环信即时通讯 2.音视频平台 (1).anychat 成佩涛-移动IM(即时通讯解决方案)

iOS平台上的音视频即时通讯应用开发

现在IOS很是火热,一大堆开发人员在捣鼓IOS平台的开发,相信大家也使用过QQ的语音视频对话功能,但是不知道大家有没有试过自己来开发一个基于IOS平台的音视频即时通讯的应用,这个应用必须能够做到跨平台 支持iOS平台设备上的音频即时通讯应用开发 提供Objective-C语言API接口,开放示例源代码 集成H.264.AAC.AMR等编解码技术 封装音视频的采集.编解码.传输.显示和播放等模块 支持Android.Web.PC等设备和iOS之间的互联互通 想要在IOS平台下实现音视频通信,最快捷

即时通讯技术 好友列表实现

在IM通讯中,通常需要管理自己的小伙伴,经常联系的,重要的用户需要标识在同一用户列表里,方便自己快速联系以及查看好友动态.那么如何可以做到类似QQ的好友列表功能呢,下面以一款在市面上功能强大的SDK为例做功能实现说明. BRAChat SDK(-Chat音视频互动开发平台)是一套跨平台的(*)即时通讯解决方案,基于先进的H.264视频编码标准.AAC音频编码标准与P2P技术,支持高清视频,整合了佰锐科技在音视频编码.多媒体通讯领域领先的开发技术和丰富的产品经验而设计的高质量.宽适应性.分布式.模

音视频即时通讯 功能需求汇总

即时通讯开发,也叫音视频即时通信开发.随着互联网的发展,人们之间的交流逐步从电话移向网络.每天都有相当多的人在使用各种网络交流工具,如Anychat,腾讯QQ,ICQ,MSN,新浪微博. 可以看出人们对于网络上即时的沟通方式是非常敏锐的,所能容纳的程度也远远超过我们的预计.然而目前大部分网络交流工具都还是以文字为主,语音视频功能大部分还是不够成熟,完全通过网络实现语音视频需要考虑到很多方面,如:硬件.软件.技术.网络:等等.纯文字沟通方式效率非常低而且也不符合人们平素的习惯,作为一种消遣的工具尚

音视频即时通讯SDK有什么技术?可以做什么?

AnyChat SDK(AnyChat音视频互动开发平台)是一套跨平台的(*)即时通讯解决方案,基于先进的H.264视频编码标准.AAC音频编码标准与P2P技术,支持高清视频,整合了佰锐科技在音视频编码.多媒体通讯领域领先的开发技术和丰富的产品经验而设计的高质量.宽适应性.分布式.模块化的网络音视频互动平台. AnyChat音视频互动开发平台(SDK)包含了音视频处理模块(采集.编解码).流媒体管理模块(丢包重传.抖动平滑.动态缓冲).流媒体播放模块(多路混音.音视频同步)以及P2P网络模块(N

4G时代音视频的即时通讯

还记得2013年12月4日下午,国家工业和信息化部向三大电信运营商正式颁发了4G(TD-LTE)牌照,宣告我国通信行业进入4G时代. 在2013国际投资论坛上,中国移动原董事长王建宙像我们展示了什么叫做4G速度:一部30分钟左右的短片,3秒钟下载完成;手机看视频基本上不需要缓冲,进度条拉到哪里,就能播放,这就是4G的力量! 所有技术的发展都不可能在一夜之间实现,从GSM.GPRS到第4代,4G的真正应用是在今年的下半年, 4G通信使人们从原来传统的计算机PC端转移到移动端,不仅可以随时随地通信,

音视频技术 即时通讯市场分析

一.市场渗透力以及存在问题 第一,有需求就有市场,有市场就有商机.利字当头,当仁不让.众多服务商就是盯准了即时通讯市场潜在的无限商机,才会不遗余力地开发各类新的即时通讯软件. 第二,即时通讯软件的特点决定了它的普及性,成为了互联网即时和他人联系的重要方式.通过即时通讯软件,人们可以在发出消息后的很短时间内得到对方应答,积极互动,满足了人们几乎同步交流的需求.对于大多数人来说,通过即时通讯进行沟通比电话来得实惠,因而即时通讯受到网民的普遍喜欢. 第三,对于企业来说,即时通讯为他们开拓了网络应用的新

即时通讯开发概述

一.市场渗透力以及存在问题 第一,有需求就有市场,有市场就有商机.利字当头,当仁不让.众多服务商就是盯准了即时通讯市场潜在的无限商机,才会不遗余力地开发各类新的即时通讯软件.第二,即时通讯软件的特点决定了它的普及性,成为了互联网即时和他人联系的重要方式.通过即时通讯软件,人们可以在发出消息后的很短时间内得到对方应答,积极互动,满足了人们几乎同步交流的需求.对于大多数人来说,通过即时通讯进行沟通比电话来得实惠,因而即时通讯受到网民的普遍喜欢.第三,对于企业来说,即时通讯为他们开拓了网络应用的新领域

即时通讯 SDK 一对一通讯技术

在IM通讯中,经常会有一对一,一对多,多对多的通讯场景,不管是语音的还是视频的,或者是两者的混合,那么如何实现一对一的即时通讯场景需求呢,下面介绍一下BRAChat的即时通讯SDK. BRAChat SDK(AnyChat音视频互动开发平台)是一套跨平台的(*)即时通讯解决方案,基于先进的H.264视频编码标准.AAC音频编码标准与P2P技术,支持高清视频,整合了佰锐科技在音视频编码.多媒体通讯领域领先的开发技术和丰富的产品经验而设计的高质量.宽适应性.分布式.模块化的网络音视频互动平台. 由于