接上一篇實現收發消息
這一篇實現聊天窗口的功能
接收到消息或者發送消息，讓頁面顯示最新的消息內容
就像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>');
}