12月22号

一。添加聊天功能

var selfId = '<%=user.Id%>';
var otherId = '<%=friend.Id%>';
// 下拉加载
var allowLoad = true;
var pageNumber = 1;
var pageSize = 10;
$$('.chat').on('ptr:refresh', function () {
loadRecords();
})
// 异步加载聊天记录
loadRecords();
function loadRecords() {
if (!allowLoad) {
return;
}
allowLoad = false;
var params = {
selfId: selfId,
otherId: otherId,
pageNumber: pageNumber,
pageSize: pageSize
}
app.request.get('ChatRecordHandler.ashx', params, function (data) {
var res = JSON.parse(data);
// 如果加载到数据，则显示
if (res.length > 0) {
for (var i = res.length - 1; i >= 0; i--) {
addMessageToPage(res[i]);
}
pageNumber++;
allowLoad = true;
}
// 如果结果长度为0或者小于每页数量，则加载完成
if (res.length == 0 || res.length < pageSize) {
allowLoad = false;
return;
}
// 重置下拉加载
else {
app.ptr.done();
}
});
}
// 接收消息
$(function () {
// 获取集线器
var chat = $.connection.chatHub;

chat.client.consumerMessage = function (fromId, content, timestamp) {
// 在页面显示内容
var message = {
UserId: fromId,
Content: content,
AddTime: timestamp
}
addMessageToPage(message);
}
// 发送消息
$.connection.hub.start().done(function () {
$('#sendMessage').click(function () {
// 获取内容
var content = $('#messageContent').val();
if (!content)
return;
// 发送消息
var timestamp = parseInt(new Date().getTime() / 1000);
chat.server.sendMessage(selfId, otherId, content, timestamp);
$('#messageContent').val('').focus();
// 在页面显示内容
var message = {
UserId: selfId,
Content: content,
AddTime: timestamp
}
addMessageToPage(message);
})
})
})
// 添加消息到页面
var timestampOrigin = 0; // 显示时间的时间戳原点
var timestampSpan = 500; // 显示时间的时间戳跨度
var sentTemplate = Template7.compile($$('#sentMessage').html());
var receivedTemplate = Template7.compile($$('#receivedMessage').html());
function addMessageToPage(message) {
// 添加消息时间
if (message.AddTime - timestampOrigin > timestampSpan) {
var title = $$('<div class="messages-title"></div>');
title.html(transformTimestampToString(message.AddTime))
$$('#messageList').append(title);
timestampOrigin = message.AddTime;
}
// 添加消息内容
if (message.UserId == selfId) {
// 本人消息
$$('#messageList').append(sentTemplate(message));
}
else if (message.UserId == otherId) {
// 对方消息
$$('#messageList').append(receivedTemplate(message));
}
}
function transformTimestampToString(timestamp) {
var date = new Date(timestamp * 1000);
return (date.getMonth() + 1) + '-' +
(date.getDate()) + ' ' +
(date.getHours()) + ':' +
(date.getMinutes());
}