java开发融云web聊天

基于融云聊天api开发后台管理系统对app聊天功能

之前本人已经写过一个基于融云web Api的聊天功能，当初是未充值去开发。

之后企业进行了会员充值，则现在进行代码的更新。

以下是web聊天功能：基于JSP开发

因为app端可以发送语音，图片，所以这些功能也都更新上去了

功能1：首先，当管理员登录后台管理系统时，显示的是系统的主界面。这个时候，如果有app用户发来消息，则右下角有消息提醒：

这种情况，那我们需要在主界面：index页面做一个融云的监听功能：

 

这是所有包, 所有包可以到git 里面去下载，官方有提供文档。

消息提示框，和消息提示声音，可以让前端来弄以下，你这边只需要写功能代码，相应的修改下就行。

那么我们的消息监听就写好了。

 clientNewMsg(id,message.content);

这个js代码 是写在聊天页面的。等下下面讲到。

功能2：现在我们写聊天页面

点击进入聊天页面，页面格式需要自己去写。

我也没有做过多的页面优化，

简单的看一下即可.

下面主要实现里面的聊天功能。

1：首先我们需要自己去定义好友这种概念，

即：用户发消息给管理端，那么该用户与该管理员形成一个好友关系，将该关系插入到数据库中。

点击聊天 首先去加载好友列表：

2：我们这边需要自己设定一个再聊概念，

即：A 根 admin 聊天 这他们就有一种再聊关系，那么B,C,D,E,F等等 与admin 无再聊关系。这个需要自己在数据库中定义出来。

当我们初始化加载会话列表(即好友列表)时，需要将该管理员与所有用户的再聊关系情况。即管理员与所有用户没有聊天关系

//获取会话列表
    function findMsgUser(){
        var currUserId = '${currUserId}';
        
        $.get("${ctx}/webMessageUserList/selectWebMessageUserList.htmls",{only_md5:'${currUserId}'},function(data){
            var objList = eval(data);
            var htmls = "";
            
            if(objList.code == 20000){
                for(i=0;i                     var b = objList.entity[i].users_only_md5;
                    htmls += "

";
                        if(regNull(objList.entity[i].users_info_photo) || null == objList.entity[i].users_info_photo || "null" == objList.entity[i].users_info_photo)
                            htmls += "";
                        else
                            htmls += "";
                        htmls += "

" + 
                        ""+objList.entity[i].users_info_nick+"";
                        if(objList.entity[i].web_message_user_list_read_count > 0)
                            htmls += " "+objList.entity[i].web_message_user_list_read_count+"";
                        else
                            htmls += " "+objList.entity[i].web_message_user_list_read_count+"";
                        htmls += "

" + 
                        "

";
                }
            }else{
                var htmls = "

"+
                    ""+
                    "暂无会话用户

";
            }
            
            $(".NMUsermain").html(htmls);
        });
    }

3：会话列表出来以后，我们需要跟用户聊天，则点击一个具体的用户；

上面一段html 里面有一个pushUser 这个js方法。

当我们点击一个具体的用户时，则需要将该管理员与该用户形成一个再聊关系，即修改数据库状态即可。同时需要将该管理员与其他用户取消再聊关系，这样就能保证，管理员永远与一个用户形成再聊关系。

//客服跟用户聊天
    function pushUser(users_only_md5){
        toUserId = users_only_md5;
        hisHtmls = "";
        $("#liaotian").html(hisHtmls);
        $("#toUserId").val(users_only_md5);
        $("#users_nick").html($("#"+users_only_md5).prev().html());
    
        
        //赋予一个再聊状态
        $.post("${ctx}/webMessageUserList/updateWebMessageUserListState.htmls",
        {
            users_only_md5:users_only_md5,
            master_only_md5:"${currUserId}"
        },function(data){
            var obj = eval(data);
            
            if(obj.code == 20000){
                getHistroyMessage(users_only_md5);
            }else{
                alert(obj.msg);
            }
        });
    }

timestrap : 0 永远默认从最新的一条数据获取，默认获取20条，这边可以在做一个下拉加载数据功能，目前我还没做。

 //获取历史聊天记录
    function getHistroyMessage(targetId){
        var count = 20;  // 2 <= count <= 20
        var timestrap = 0; //0, 1483950413013
        var start = new Date().getTime();
        instance.getHistoryMessages(RongIMLib.ConversationType.PRIVATE, targetId, timestrap, count, {
            onSuccess: function(list, hasMsg) {
                //可通过sort订制其他顺序
                list.sort(function(a,b){
                    return a.sentTime > b.sentTime;
                });
                if(typeof(list) == "undefined" || "" == list){
                    alert("没有更多历史记录了");
                    return;
                }else{
                    hisMsgHtml(list);
                    $("#"+targetId).html(0);
               }
            },
            onError: function(error) {
                console.log("获取历史消息记录失败");
               // showResult("获取历史消息失败",error,start);
            }
        });
    }

 

//将历史记录填充到聊天框中
    function hisMsgHtml(list){
        var htmls = "";
        
        for(i=0;i             var listObj = list[i];
            if("undefined" != typeof(listObj)){
                var listContent = list[i].content;
                if("undefined" != typeof(listContent)){
                    
                    if("undefined" != typeof(listContent.extra)){
                        //这是管理员发送
                        htmls += "

"+
                        "

"+
                        ""+
                        "

"+
                        "

"+listContent.content+"

"+
                        "

";
                    }else{
                        htmls += currMsg(listContent);
                    }
                }
            }else{
                
            }
        }
        $("#liaotian").append(htmls);
        $('#liaotian').scrollTop($('#liaotian')[0].scrollHeight);
    }

 

//当前聊天界面
    function currMsg(listContent){
        var htmls = "";
        htmls += "

"+
                "

";
           if(regNull(listContent.user.portrait) || null == listContent.user.portrait || "null" == listContent.user.portrait)
               htmls += "";
           else
               htmls += "";
           
           htmls += "

";
           if("TextMessage" == listContent.messageName){
            htmls += "

"+listContent.content+"

"+
                "

";
           }else if("ImageMessage" == listContent.messageName){
               htmls += "

"+
                "

";
           }else if("VoiceMessage" == listContent.messageName){
               
               //语音消息
               htmls += "

"+
                "

";
           }
        
        //将头像复制进去
           $("#userPhoto").val(listContent.user.portrait);    
           return htmls;
    }

 

这个时候点击一个用户，可以取到该管理员与用户的聊天记录。

条件：需开通生成环境的历史消息记录存储功能，开通后2小时内生效，建议在生效后在去测试。不然融云一直会提示你code：1 鬼知道这什么玩意。

当管理员与用户形成这聊天功能。那管理员需要发送消息给前端(app)

发送消息功能：

//私聊
    function privateMessage(){
        var sendMsg = $("#sendMessage").val();
        sendOutId = "${currUserId}";
        if("" == $.trim(sendMsg)){
            alert("请输入聊天内容");
            $('#sendMessage').focus();
            return;
        }
        var conversationtype = RongIMLib.ConversationType.PRIVATE; // 私聊
        var targetId = $("#toUserId").val(); //目标 Id
        
        var userInfo = {
            id : targetId,
            name : $("#"+targetId).prev().html(),
            icon: $("#userPhoto").val()
        };
        
        var msg = new RongIMLib.TextMessage({content:$.trim(sendMsg),user:userInfo,extra:sendOutId});
        
        var conversationtype = RongIMLib.ConversationType.PRIVATE; // 单聊,其他会话选择相应的消息类型即可。
        var pushData = ""+$.trim(sendMsg)+"";//这个暂时还没研究
        RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                onSuccess: function (message) {
                    var htmls = "

"+
                            "

"+
                            ""+
                            "

"+
                            "

"+message.content.content+"

"+
                            "

";
                
                    $("#liaotian").append(htmls);
                    var sendMsg = $("#sendMessage").val("");
                    $('#liaotian').scrollTop($('#liaotian')[0].scrollHeight);
                },
                onError: function (errorCode,message) {
                   console.log(message.content.content);
                }
            }, false, pushData
        );
    }

 

 var userInfo = {
            id : targetId,
            name : $("#"+targetId).prev().html(),
            icon: $("#userPhoto").val()
        };

这个功能是将用户的信息封装起来，这样前端就可以直接去到用户信息，官方文档里面有，但是不明显，我也是跟前端调了半天才找了。然后又调试半天。

以上就是所有管理员与用户的聊天功能。包含文字聊天，app端发送语音，app端发送图片等。

需要修改的地方有：注册融云的id 我这边用的是MD5注册，需要修改你们使用到的。

还有部分查询的接口，比如好友列表，修改再聊状态，查询用户信息等。

 

//播放音频
    function play(Voice){
        if(Voice){
            var duration = Voice.length/1024;    // 音频持续大概时间(秒)
            RongIMVoice.preLoaded(Voice, function(){
                RongIMVoice.play(Voice,duration);
            });
        }else{
            console.log('请传入 amr 格式的 base64 音频文件');
        }
    }

 

其实多看看官方文档。然后写的时候页面上多console.log(message); 多打印打印数据结构，就知道该怎么取。

互相学习。