融云项目案例开发教程

先来理下思路，对比前面的几个教程，我们时这样实现的，在消息列表页我们连接一次融云，打开会话页面后又加载了一次融云，这样打开会话页面后就会导致消息列表页的监听事件取消，同时还会存在一些位置的bug，导致了开发难度。
我们这次改变下思路，把所有的融云类的处理全部放在消息列表页，然后通过APICloud的api.sendEvent和api.addEventListener 来处理融云的一些事件。
记住除了消息列表页其他页面不要做融云的任何链接处理。

消息列表页实现代码

<script>
/*rong全局*/
var rong;
/*获取会话消息列表*/
function coversationList(){
    //消息列表
    rong.getConversationList(function (ret, err) {
        if(ret.status=='success'){
            alert(JSON.stringify(ret.result));
        }
    })
}

/*
＊监听新消息
＊当有新消息传来时，利用sendEvent发出一个事件，同时传递消息内容，可以在会话页面进行一次监听接收
*/
function receiveMessageListener(){
    rong.setOnReceiveMessageListener(function (ret, err) {
        if(ret.status=="success"){
            //发送事件
            api.sendEvent({
                name:'getNewMessage',
                extra:{
                    data:ret.result.message
                }
            })
            
            
        }
    })
}

/*
*发送消息的函数
＊注意要放在消息列表页，不要放在会话页面
＊在会话页面利用sendEvent发出一个发送消息的事件，在消息列表页监听
*/
function sendMessage(type,targetId,content,extra,conversationType){
    rong.sendTextMessage({
            conversationType: ''+conversationType+'',
            targetId: ''+targetId+'',
            text: ''+content+'',
            extra: ''+extra+''
        }, function (ret, err) {
            if (ret.status == 'prepare'){
                //单聊准备发送，向会话页面发送正在发送消息事件
                api.sendEvent({
                    name:'insertSendMessage',
                    extra:{
                        data:messageData
                    }
                })
                
            }else if (ret.status == 'success'){
                //成功后处理
                
            }else if (ret.status == 'error'){
                //失败
            }
        }
    );
}
/*
＊融云的初始化
*/
function rongCloud(){
    var token = $api.getStorage('token');
    //融云初始化
    rong.init(function(ret, err){
    });
    //监听新消息
    receiveMessageListener();
    //连接
    rong.connect({
        token: ''+token+''
    },function(ret, err){
        if(ret.status=='success'){
            //消息列表
            coversationList();
        }
    });
}
apiready = function(){
    rong = api.require('rongCloud');
    rongCloud();
    //监听来自会话页面发送消息的事件
    api.addEventListener({
        name:'sendMessage'
    },function(ret){
        if(ret && ret.value){
            var value = ret.value;
            sendMessage(''+value.type+'',''+value.targetId+'',''+value.content+'',''+value.extra+'',''+value.conversationType+'');
        }
    })
};
</script>

会话页面的实现

<script>
var targetId,historyMessages;
//发送聊天
function chat(){
    //向会话列表页发送消息事件
    api.sendEvent({
        name:'sendMessage',
        extra:{
            type:'text',
            targetId:''+targetId+'',
            content:'消息内容',
            conversationType:'PRIVATE',
            extra:''
        }
    })
}
apiready = function(){
    //当前会话用户id和当前会话历史消息从消息列表页点击传递进来
    targetId = api.pageParam.targetId;
    historyMessages = api.pageParam.historyMessages;

    //监听发送新消息写入,这个事件主要来处理发送消息插入到会话窗口中
    api.addEventListener({
        name:'insertSendMessage'
    },function(ret){
        if(ret && ret.value){
            var newMessageData = ret.value;
            //
        }
    })

    //监听收到新消息写入
    api.addEventListener({
        name:'getNewMessage'
    },function(ret){
        if(ret && ret.value){
            //监听成功
            var newMessageData = ret.value;
            alert(JSON.stringify(newMessageData));
            //根据targetId和当前会话用户id判断一下，如果相等则写入
        }
    })

    
};
</script>

融云项目案例开发教程

推荐阅读