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