接上一篇实现收发消息
这一篇实现聊天窗口的功能
接收到消息或者发送消息，让页面显示最新的消息内容
就像qq微信聊天那样，接收到消息，或者你发送消息之后，让最新的消息显示在最下面
实现思路就是, 监听发送和接收消息事件, 一旦触发了事件, 就让聊天内容所在的元素的底端和其所在滚动区的可视区域的底端对齐(滚动到最底部)
ele.scrollIntoView(true | false)这个方法就是让当前的元素滚动到浏览器窗口的可视区域内
- 如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
- 如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。
利用这个方法达到想要的目的
// 滚动到页面底部
function slideBut() {
// 所有的聊天内容都放置在.main这个div中
$api.dom('.main').scrollIntoView(false);
}
// 接收消息 or 发送消息都调用一下此函数, 就可以达到想要的效果
接收或着发送消息之后,append一个标签
// 接收消息后新建消息
function addReceMsg(msg, headImg) {
$api.append($api.dom('.main'),'<div class="other clearfix"><img class="fl" src="../../image/tx_5.jpg"><p class="fl">' + msg + '</p></div>');
slideBut();
}
// 发送消息后新建消息
function addSendMsg(msg, headImg) {
$api.append($api.dom('.main'),'<div class="oneself clearfix"><img class="fr" src="'+ headImg +'"><p class="fr"> ' + msg + ' </p></div>');
slideBut();
}
查看聊天记录
下拉加载历史聊天记录，显示在页面上部
- 利用
UIPullRefreshFlash这个下拉刷新模块实现, 下拉发送请求获取历史聊天记录 - 每次查询20条,查询完就把
oldestMessageId这个参数减去20, 这样就能保证每次查询的都是不同的内容 - 如果
oldestMessageId的值小于0, 不再进行请求.
我这里是页面加载完请求最新的消息记录, 获得oldestMessageId这个值, 把它保存在一个全局变量中, 每次请求完把这个变量减去20
// 最新聊天记录
rong.getLatestMessages({
conversationType: 'PRIVATE',
targetId: 'testUser1',
count: 20
}, function(ret, err) {
for (var i = ret.result.length-1; i >= 0 ; i--) {
if (ret.result[i].messageDirection == 'RECEIVE') {
// 消息方向：SEND(发送) 或者 RECEIVE(接受)
addReceMsg(ret.result[i].content.text)
} else {
addSendMsg(ret.result[i].content.text, headImg);
}
}
// 最新的消息的messageId就是oldestMessageId,获取历史记录函数内部-20处理
messageId = ret.result[0].messageId;
})
查询完, 把历史消息插入到聊天窗口上面
// 查看历史记录 往上面添加消息
function addSendMsgTop(msg, headImg) {
$api.prepend($api.dom('.main'),'<div class="oneself clearfix"><img class="fr" src="'+ headImg +'"><p class="fr"> ' + msg + ' </p></div>');
}
function addReceMsgTop(msg, headImg) {
$api.prepend($api.dom('.main'),'<div class="other clearfix"><img class="fl" src="../../image/tx_5.jpg"><p class="fl">' + msg + '</p></div>');
}