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