apicloud apicloud

注册
查看: 17074|回复: 22

[新手教程] 【融云第三弹】完整案例开发,可以上线使用

 

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

[新手教程] 【融云第三弹】完整案例开发,可以上线使用

 
17074 22 | 发表于 2015-4-28 20:32:05 |阅读模式 | |
期待的第三弹出来,实现的功能主要是整合前两篇讲的并做了下优化,目前已经上线,想体验的可以下载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


本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

主题:
15
帖子:
4121
云币:
3004
发表于 2015-4-28 21:01:49 |
赞一个!  

主题:
8
帖子:
79
云币:
198
发表于 2015-4-28 22:54:11 |
支持一下~~~~

驾校小白

UID:27723

主题:
4
帖子:
10
云币:
49
发表于 2015-4-28 23:53:25 |
好像没做离线存储

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

 楼主| 发表于 2015-4-29 00:18:55 |
Scoield 发表于 2015-4-28 23:53
好像没做离线存储

现在做的只是融云功能上的实现,还没有做深入开发,离线存储的话可以加载db模块将好友资料和聊天记录写入本地数据

主题:
117
帖子:
610
云币:
666
发表于 2015-4-29 10:08:33 |
老实说,写的有点乱,1,2,3不能很好的结合起来,容易让初学者走歪路。不过还是给赞

驾校小白

UID:11283

主题:
47
帖子:
193
云币:
2237

APICloud粉丝社会摇托马斯全旋女朋友超人

发表于 2015-4-29 10:27:49 |
终极篇,赞

马路杀手

UID:15627

主题:
119
帖子:
446
云币:
804
发表于 2015-4-29 12:17:26 |
很赞!!!

马路杀手

UID:15627

主题:
119
帖子:
446
云币:
804
发表于 2015-4-29 12:18:32 |
没有代码啊

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

 楼主| 发表于 2015-4-29 14:06:51 |

后面有空会做个融云APP出来
123下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表