ionic/cordova即时通讯解决方案(上) - 空灵羽少 - 博客园

来源: 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了下一节写界面部分包括小红点和未读数处理。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏