java开发融云web聊天

本文详细介绍如何利用融云API开发后台管理系统中的聊天功能,包括监听消息、好友列表管理、历史消息获取及发送消息等核心操作,适用于APP与后台间的即时通讯需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

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

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

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

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


<script src="${ctx}/rong/init.js"></script>
<script src="${ctx}/rong/RongIMLib-2.3.3.min.js"></script>
<script src="${ctx}/rong/RongEmoji-dev.js"></script>
<script src="${ctx}/rong/Libamr-2.2.5.min.js"></script> 
<script src="${ctx}/rong/RongIMVoice-2.2.6.js"></script>

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

<script type="text/javascript">
    var instance = null;
    var userInfo = {
        appKey : "${appKey}",
        token : "${userToken}"
    };
    
    var callbacks = {
        getInstance : function(_instance){
            instance = _instance;
        },
        receiveNewMessage : function(message){
        },
        getCurrentUser : function(userInfo){
            userId = userInfo.userId;
            //$("#login").val(userId);
        }
    };
    init(userInfo, callbacks);
    
    //初始化声音库
    var RongIMVoice = RongIMLib.RongIMVoice;
    RongIMVoice.init();
</script>

<script type="text/javascript">
    // 消息监听器
    RongIMClient.setOnReceiveMessageListener({
        // 接收到的消息
        onReceived: function (message) {
            
            //消息提示框和声音
            $("#noticemain").animate({
                    bottom : '5%'
                },1500,function(){
                    play();
            }).show();
            
            var id = message.targetId;//发送人
            clientNewMsg(id,message.content);
        }
    });
    //关闭提示框
    $('.ntshanchu').click(function(){
        $("#noticemain").animate({
            bottom : '-6rem'
        },1500);
    })
    
    function play() {
        var audio = document.getElementById( "audioMsg" );
        audio.play();
    }
</script>

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

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

 clientNewMsg(id,message.content);

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

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

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

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

简单的看一下即可.

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

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

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

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

<script type="text/javascript">
    //获取会话列表
    setTimeout("findMsgUser()",100);
</script>

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<objList.entity.length;i++){
                    var b = objList.entity[i].users_only_md5;
                    htmls += "<div class=\"NMUserlist\" onclick=\"pushUser('"+objList.entity[i].users_only_md5+"')\">";
                        if(regNull(objList.entity[i].users_info_photo) || null == objList.entity[i].users_info_photo || "null" == objList.entity[i].users_info_photo)
                            htmls += "<img alt=\"用户头像\" src=\"${ctx}/img/user.png\">";
                        else
                            htmls += "<img alt=\"用户头像\" src=\""+objList.entity[i].users_info_photo+"\">";
                        htmls += "<div class=\"list_top\">" + 
                        "<label>"+objList.entity[i].users_info_nick+"</label>";
                        if(objList.entity[i].web_message_user_list_read_count > 0)
                            htmls += "&nbsp;<span style=\"color:white;display:block;\" id=\""+objList.entity[i].users_only_md5+"\">"+objList.entity[i].web_message_user_list_read_count+"</span>";
                        else
                            htmls += "&nbsp;<span style=\"color:white;display:none;\" id=\""+objList.entity[i].users_only_md5+"\">"+objList.entity[i].web_message_user_list_read_count+"</span>";
                        htmls += "</div>" + 
                        "</div>";
                }
            }else{
                var htmls = "<div class=\"NMUserlist\">"+
                    "<img alt=\"用户头像\" width=\"40px\" height=\"40px\" src=\"${ctx}/img/xitong.png\">"+
                    "<label>暂无会话用户</label></div>";
            }
            
            $(".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<list.length;i++){
            var listObj = list[i];
            if("undefined" != typeof(listObj)){
                var listContent = list[i].content;
                if("undefined" != typeof(listContent)){
                    
                    if("undefined" != typeof(listContent.extra)){
                        //这是管理员发送
                        htmls += "<div class=\"rightd\">"+
                        "<div class=\"rightdimg\">"+
                        "<img src=\"${ctx}/img/xitong.png\" style=\"width:40px;height:40px;\"/>"+
                        "</div>"+
                        "<div class=\"speech right\"><p>"+listContent.content+"</p></div>"+
                        "</div>";
                    }else{
                        htmls += currMsg(listContent);
                    }
                }
            }else{
                
            }
        }
        $("#liaotian").append(htmls);
        $('#liaotian').scrollTop($('#liaotian')[0].scrollHeight);
    }

 

//当前聊天界面
    function currMsg(listContent){
        var htmls = "";
        htmls += "<div class=\"leftd\">"+
                "<div class=\"leftdimg\">";
           if(regNull(listContent.user.portrait) || null == listContent.user.portrait || "null" == listContent.user.portrait)
               htmls += "<img src=\"${ctx}/img/user.png\" style=\"width:40px;height:40px;\"/>";
           else
               htmls += "<img src=\""+listContent.user.portrait+"\" style=\"width:40px;height:40px;\"/>";
           
           htmls += "</div>";
           if("TextMessage" == listContent.messageName){
            htmls += "<div class=\"speech left\"><p>"+listContent.content+"</p></div>"+
                "</div>";
           }else if("ImageMessage" == listContent.messageName){
               htmls += "<div class=\"speech left\"><p><img src='"+listContent.imageUri+"'/></p></div>"+
                "</div>";
           }else if("VoiceMessage" == listContent.messageName){
               
               //语音消息
               htmls += "<div class=\"speech left\"><button class=\"play\" onclick=\"play('"+listContent.content+"')\"></button></div>"+
                "</div>";
           }
        
        //将头像复制进去
           $("#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 = "<div class=\"rightd\">"+
                            "<div class=\"rightdimg\">"+
                            "<img src=\"${ctx}/img/xitong.png\"/>"+
                            "</div>"+
                            "<div class=\"speech right\"><p>"+message.content.content+"</p></div>"+
                            "</div>";
                
                    $("#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); 多打印打印数据结构,就知道该怎么取。

互相学习。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值