|
|
期待的第三弹出来，实现的功能主要是整合前两篇讲的并做了下优化，目前已经上线，想体验的可以下载APP。这次讲的去掉了chatbox功能，只是文字消息的发送，如果是做语音和图片的自己可以去扩展。
下载链接
https://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=5171
首先分析下流程：
流程分析出来了，下面再做一下简单的说明
会话列表页消息的监听和获取这个地方的实现是比较容易的，但是在打开会话的时候列表页的监听会失效。所以就要在聊天页面来处理消息的监听时间。
在会话页面制作的时候，初次打开监听都是正常的，但是当发完一条消息后发现监听失效。反复的测试初步认为是键盘的弹出导致，可能是监听输入状态跟监听消息由点冲突。
会话页面监听数据时需要监听全局的消息，如果是当前会话的消息就写入，否则只是提示一下有新消息。
关闭会话页面时，因为列表页的监听已经失效，所以要发送一个刷新事件来获取最新消息和一个监听事件的开启。
在融云的开发过程中，一个页面只需要加载一次融云模块即可，不必每个事件都来加一次。
先声明几个个全部变量 :
var rong = null,
myToken = null,
reListen = false;//这个主要是来判断重新监听的
在apiready中我们先获取当前用户的token，加载融云
apiready = function(){
myToken = $api.getStorage('token');//因为是写入本地的，所以就从本地读取了
rong = api.require('rongCloud');
rong.init(function(ret, err){});
getMessageList();//获取会话列表并监听
}
下面先来实现获取会话列表并监听
//会话列表
function getMessageList(){
rong.init(function(ret, err){
});
rong.setOnReceiveMessageListener(function (ret, err) {
insertNewData(ret.result.message);//监听新消息的处理。
});
rong.connect({
token: myToken
},
function(ret, err){
if(ret.status=="success"){
rong.getConversationList(function (ret, err) {
if(ret.status=='success'){
insertData(ret.result);//获取历史记录到数据后写入，这块就不多讲了，可以看下之前的帖子，主要就是for循环一下，然后插入到一个ID里面
}
});
}
}
);
}
insertData(); 里面说一点，就是要给当前消息的容器加一个ID，例如 id="toUserid_"+发送用户ID（融云里面的targetId）； 方便下面来判断新消息的写入。
当有了新消息的时候需要判断两点
该消息第一次写入及发送用户已经存在消息列表中，这里我没有做判断，不管是否存在，直接remove掉上面说的那个ID，然后重新写入。
点击会话列表后进入会话页面,用户的ID。昵称类可以通过param来传递
同样还是先声明几个全局变量
var rong=null,myToken = null,myUserid=null;
apiready = function(){
myToken = $api.getStorage('token');
rong = api.require('rongCloud');
setListen();//监听新消息
}
function setListen(){
rong.init(function(ret, err){
});
rong.setOnReceiveMessageListener(function (ret, err) {
if(ret.result.message.targetId==touserid){
//如果为当前会话用户就写入
var getText = ret.result.message.content.text;
//这里就自己写一个插入到消息容易的语句，下面的一行代码为控制滚动条始终到底部
$("#messageList").scrollTop($('#messageList')[0].scrollHeight);
}else{
//如果不是当前用户的会话消息就提示一下
api.toast({
msg: '新消息：'+ret.result.message.content.text,
duration:2000,
location: 'top'
});
}
});
rong.connect({
token: mytoken
},
function(ret, err){
});
}
监听完成了，下面开始做发送消息，上面说过发送的时候因为键盘的弹出会导致监听事件失效，所以在发送完成后我们需要重新开启一下监听
function sendMessage(){
var sendMsg = $("#messagecont").val();//获取发送框的内容
rong.init(function(ret, err){
});
rong.connect({
token: mytoken
},
function(ret, err){
});
if(sendMsg){
rong.sendTextMessage({
conversationType: 'PRIVATE',
targetId: ''+touserid+'',
text: ''+sendMsg+'',
extra: ''
}, function (ret, err) {
if (ret.status == 'prepare'){
var sendText = ret.result.message.content.text;
//准备发送
//这里就自己写一个插入到消息容易的语句
$("#messageList").scrollTop($('#messageList')[0].scrollHeight);
}else if (ret.status == 'success'){
//发送成功
//发送一个监听事件
api.sendEvent({
name: 'setReListen',
extra:{status:'true'}
});
}else if (ret.status == 'error'){
//发送失败
}
});
}
}
我们需要在apiready里面写个监听setReListen事件的处理了
api.addEventListener({
name: 'setReListen'
}, function(ret){
if(ret){
setListen();//重新开启监听
}
});
这样会话的流程功能完成了，那么在关闭会话页面的时候需要发送一个事件到列表页，来刷新并重新监听。关闭方法在安卓上我们需要写两个监听，IOS上没有返回键的吗
事件名： reListenList
在apiready里面先写一个监听手机返回键的
api.addEventListener({
name:'keyback'
},function(ret,err){
api.sendEvent({
name: 'reListenList',
extra:{status:'true'}
});
api.closeWin();
})
在来个按钮的返回
var back = function() {
api.sendEvent({
name: 'reListenList',
extra:{status:'true'}
});
api.closeWin();
}
回到会话列表中，来监听 reListenList
在会话列表页的apiready里面来写
//监听会话页面事件---重新监听
api.addEventListener({
name: 'reListenList'
}, function(ret){
if(ret){
var value = ret.value;
if(value.status=='true'){
rong.init(function(ret, err){
});
rong.setOnReceiveMessageListener(function (ret, err) {
insertNewData(ret.result.message);
});
rong.connect({
token: mytoken
},
function(ret, err){
if(ret.status=='success'){
rong.getConversationList(function (ret, err) {
insertData(ret.result);
});
reListen = true;
}
}
);
//reListen = true;
}
}
});
好了，到此完成一个完成的流程已经弄完了，自己可以结合这三篇来搞一下了。有不明白的看以楼下回复。感谢支持。
最后说一点，如果你的JS基础不够好的话建议还是先学习下JS
|
本帖子中包含更多资源 您需要 登录 才可以下载或查看，没有帐号？立即注册
x
评分
-
1
查看全部评分
-
|
发表于 2015-4-28 20:32:05
收藏
楼主
