rong.setOnReceiveMessageListener(function (ret, err) {
/****1.融云的消息以sendEvent的方式通信到其他页面****/
api.sendEvent({
name: 'rongMsg',
extra: {
msgNoti: ret.result.message
}
});
var notiMsg;
var name = getNickNameA($api.getStorage("name" + ret.result.message.senderUserId));
//如果有聊过天
if (name == "匿名者") {
name = "有位新朋友";
}
/*****2.判断消息类型********/
if (ret.result.message.objectName == "RC:TxtMsg") {
if (!(ret.result.message.content.text.indexOf("<img"))) {
notiMsg = name + "发来了一个表情,快去看看吧";
} else {
notiMsg = name + ":" + ret.result.message.content.text;
}
} else {
notiMsg = name + "发来了一张图片,快去看看吧";
}
//在手机通知栏进行状态栏通知
api.notification({
notify: {
content: notiMsg
}
}, function (ret, err) {
// console.log(JSON.stringify(ret));
// $api.setStorage("notiID" + ret.result.message.senderUserId, ret.id);
});
});
在聊天界面通过如下代码接收event方法传递来的消息.
//接收信息
api.addEventListener({
name: 'rongMsg'
}, function (ret, err) {
// alert(JSON.stringify(ret));
var msg;
msg = ret.value;
// console.log(JSON.stringify(msg.msgNoti));
var tag;
var para;
if (msg.msgNoti.objectName == "RC:TxtMsg") {
tag = "TxtMsg";
} else if (msg.msgNoti.objectName == "RC:ImgMsg") {
tag = "ImgMsg";
} else if (msg.msgNoti.objectName == "RC:VcMsg") {
tag = "VcMsg";
} else if (msg.msgNoti.objectName == "RC:LBSMsg") {
tag = "LBSMsg";
}
para = {
firstSendType: "aui-chat-receiver",
secondSendType: "aui-chat-receiver-avatar",
thirdSendType: "aui-chat-receiver-cont",
fourthSendType: "aui-chat-left-triangle",
content: msg.msgNoti.content,
tag: tag,
receivedTime: getTrueTime(msg.msgNoti.receivedTime),
messageDirection: "RECEIVE",
receiveIcon: receiver_icon
};
if (!timeTag) {
para.receivedTime = "";
}
//与他聊天
if (targetId == msg.msgNoti.targetId) {
//通过doT进行设置
//如果是文字
if (tag == "TxtMsg") {
var interText = doT.template($("#text-message-content-template").text());
$("#message-content").append(interText(para));
}
if (tag == "ImgMsg") {
var interText = doT.template($("#img-message-content-template").text());
$("#message-content").append(interText(para));
}
goBottom();
timeTag = false;
}
});
二.出现键盘聊天frame页面高度的变化
在项目中的聊天键盘用到的是UIChatBox控件,这里我们可以通过监听他的状态从而实现对frame高度的改变.
<span style="font-size:18px;">/******1.监听键盘聊天框键盘弹出,用于调整聊天窗口高度*****/
//move(输入框所在区域弹动事件) 就是输入框收起和弹出变化
UIChatBox.addEventListener({
target: 'inputBar',
name: 'move'
}, function (ret, err) {
//api.toast({msg: JSON.stringify(ret),location: 'top'}); //50
//api.toast({msg: JSON.stringify(err),location:'middle'}); //283
//点击输入框时会话界面高度发生变化
setChatFrameByInputMove(ret.inputBarHeight, ret.panelHeight);
});
</span>
function setChatFrameByInputChange(inputBarHeight, panelHeight) {
api.setFrameAttr({
name: 'chat_frm',
rect: {
x: 0,
y: header_h,
w: api.winWidth,
h: api.winHeight - header_h - inputBarHeight - panelHeight - 35,
},
});
setTimeout('setBottom()', 200);
}
//进入到底部
function setBottom() {
api.sendEvent({
name: 'chatFrm_goBottom',
extra: {}
});
}
上述代码可以实现出现聊天键盘,改变聊天frame的高度.我的思路是这样,大家有其他的方法可以评论中贴出来一起讨论.
三.优化聊天文字信息中的表情符号
整个聊天界面使用的是AUI中的聊天UI,在此感谢流浪男提供了这么好的前端UI框架!
var sourcePath = "widget://image/emotion";//表情存放目录
var emotionData;//存储表情
//表情符转换为表情
function transText(text, imgWidth, imgHeight) {
//表情大小定义为18*18
var imgWidth = 18;
var imgHeight = 18;
var regx = /\[(.*?)\]/gm;
var textTransed = text.replace(regx, function (match) {
var imgSrc = emotionData[match];
if (!imgSrc) { /* 说明不对应任何表情,直接返回即可.*/
return match;
}
var img = "<img src='" + imgSrc + "' width='" + imgWidth + "' height ='" + imgHeight + "' />";
return img;
});
return textTransed;
}
/*获取所有表情图片的名称和真实URL地址,以JSON对象形式返回。其中以表情文本为 属性名,以图片真实路径为属性值*/
function getImgsPaths(sourcePathOfChatBox, callback) {
var jsonPath = sourcePathOfChatBox + "/emotion.json";//表情的JSON数组
api.readFile({
path: jsonPath
}, function (ret, err) {
if (ret.status) {
var emotionArray = JSON.parse(ret.data);
var emotion = {};
for (var i in emotionArray) {
var emotionItem = emotionArray[i];
var emotionText = emotionItem["text"];
var emotionUrl = "../image/emotion/" + emotionItem["name"] + ".png";
emotion[emotionText] = emotionUrl;
}
/*把emotion对象 回调出去*/
if ("function" === typeof(callback)) {
callback(emotion);
}
}
});
}
首先要先将表情存到制定路径下
widget://image/emotion";//表情存放目录
之后在sendTextMessage方法中,将文本用transText方法进行转换.
<span style="white-space:pre"> </span>rong.sendTextMessage({
conversationType: 'PRIVATE',
targetId: targetId,
text: transText(msg_txt, 15, 15),
extra: ''
}, function (ret, err) {
<span style="white-space:pre"> </span>});
这样就实现了表情的发送了.
四.一些开发者提出的问题答疑
1.msgObj变量
msgObj是一个全局变量,用于接收新的消息.因为优化了消息接收机制,所以升级的版本这个变量已经不存在.
2.关于时间戳的添加
时间戳的添加实现的思路是这样的:每一条消息,融云都会返回一个时间,首先将这个时间转换成hh:mm的形式并保存,如果再接受的新消息与之前保存的时间相差3分钟(这个时间间隔自己设定),那么通过time_flag这个bool值来判断是否在聊天界面加上时间戳.
3.关于消息接受方接受时间的延迟 (16-11-17补充)
很多朋友都遇到了这个问题,APP 关掉之后收不到消息发送方发出的消息.我觉得(仅代表个人观点)因为融云的初始化方法是在程序打开后实现的,而消息接受的前提是 init 方法与 connect 都正确执行.这一点与原生 app 有着不同.在 iOS 原生 APP 中,消息还可以通过远程通知的方式发送给接受者.即使关掉 app,保证网络环境畅通的状态下仍然可以收到消息.
消息接受,发送的思路就是这样,文章随着项目的推进还会不断更新,谢谢大家的关注与支持!有什么不对的地方欢迎批评指正!我的微信:656593047 有什么问题一起探讨!