java开发融云web聊天

最新推荐文章于 2021-03-16 08:29:47 发布

原创最新推荐文章于 2021-03-16 08:29:47 发布 · 946 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JAVA融云WEB聊天

融云聊天专栏收录该内容

1 篇文章

订阅专栏

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

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

基于融云聊天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<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 += " <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 += " <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); 多打印打印数据结构，就知道该怎么取。

互相学习。