window.debug = true; // 记录聊天双方信息 var dataInfo = {}; // 存储应用数据 var app = {}; app.gid = undefined; // 储存聊天的会话记录信息 app.sessions = {}; // 聊天记录是否已经展开 app.isShowRecord = false; $(document).ready(ready); function connectServer() { // 连接XMPP服务器 Client.connect(app.userInfo.userId, app.userInfo.certification); } // 接收到 /** * 处理接收到Message * * @param message 用户接收到的消息 */ function onMessage(message) { console.log('subscribe received message', message); // 如果是当前会话,则直接显示消息 if (app.currentSession && message.senderInfo === app.currentSession.linkman) { // 显示消息 drawMessage(message, false); } // 缓存消息 console.log(message); if (message.senderInfo && message.receiverInfo) { saveMessageToLocal(message, false); } return true; } /** * 用户发送消息 * * @param message 已填充的消息 */ function sendMessage(message) { if (!message) { return ; } if (Client.isConnected()) { if (!message.receiver || message.receiver == '') { alert("请输入联系人!"); return; } message = Client.sendMessage(message); // 显示消息 drawMessage(message || {}, true); saveMessageToLocal(message, true); $("#input-msg").empty(); } else { alert("请先登录!"); } } function activate() { app = httpUtils.queryParams() || {}; if (window.debug) { console.log('[DEBUG]App Info', app); } onfire.on('chat.message', onMessage); ChatService.queryChatInfoWhenUserVisitWebSite(app.gid, function (data) { if (!data.success) { console.log('Message', data.message); return ; } app.userInfo = data.chatInfo.userInfo; app.enterprise = data.chatInfo.enterprise; app.groups = data.groups || []; // 绘制用户信息 drawUserInfo(); // 绘制会话列表 app.sessions = handlerSessionData(data.sessions || []); drawSessionList(app.sessions); // 绘制会话区域 if (app.currentSession) { drawTitle(); showChatArea(); handlerUnReadMessage(); } connectServer(); }, function (error) { console.log(error); window.location.href = '/'; }); } function handlerUnReadMessage() { // 获取未读消息缓存 messageService.loadReadableMessageWhenUserRead(app.currentSession.owner, app.currentSession.linkman, function (messages) { if (window.debug) { console.log('message.unread', messages); } // 显示消息 messages.forEach(function (message) { drawMessage(message, message.style == 'SEND'); }); }, function (error) { console.log(error); }); } function handlerSessionData(data) { var sessions = {}; if (data && data.length > 0) { for (var i = 0; i < data.length; i++) { if (!data[i].linkman || data[i].linkman === '') { continue; } if (!sessions[data[i].linkman]) { sessions[data[i].linkman] = data[i]; sessions[data[i].linkman].userInfo = sessions[data[i].linkman].linkmanInfo.userInfo; sessions[data[i].linkman].enterprise = sessions[data[i].linkman].linkmanInfo.enterprise; } else { if (sessions[data[i].linkman].timeSend < data[i].timeSend) { sessions[data[i].linkman] = data[i]; } } } } // 获取当前会话 var current = false; for (var property in sessions) { if (sessions.hasOwnProperty(property) && sessions[property] && sessions[property].current) { current = true; app.currentSession = sessions[property] || {}; break ; } } if (!current) { delete app.currentSession; } return sessions; } function formatTime(timestamp) { if (timestamp == null) return ''; var date = new Date(timestamp * 1000), year = date.getFullYear(), month = '' + (date.getMonth() + 1), day = '' + date.getDate(); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return [year, month, day].join('-'); } function formatHourTime(timestamp) { if (timestamp == null) return ''; var date = new Date(timestamp * 1000), hour = '' + date.getHours(), minute = '' + date.getMinutes(); if (hour.length < 2) hour = '0' + hour; if (minute.length < 2) minute = '0' + minute; return [hour, minute].join(':'); } function formatFullTime(timestamp) { if (timestamp == null) return ''; var date = new Date(timestamp * 1000), year = date.getFullYear(), month = '' + (date.getMonth() + 1), day = '' + date.getDate(), hour = '' + date.getHours(), minute = '' + date.getMinutes(), second = '' + date.getSeconds(); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; if (hour.length < 2) hour = '0' + hour; if (minute.length < 2) minute = '0' + minute; if (second.length < 2) second = '0' + second; return [year, month, day].join('-') + ' ' + [hour, minute, second].join(':'); } function showChatArea() { $('#chat-area').show(); } function hideChatArea() { $('#chat-area').hide(); } function drawUserInfo() { console.log('APP', app); var str = '
' + '
' + '' + app.userInfo.name + '
' + '

'; if (app.enterprise){ str +=(app.enterprise.name); }else {str +=('个人账户');} str +=('

'); $('#member-title').html(str); /*
*/ } function drawTitle() { var name = ''; if (app.currentSession) { if (app.currentSession.linkmanInfo.enterprise != null){ // if ('ENTERPRISE' === app.currentSession.communicatorType) { // name = app.currentSession.linkmanInfo.userInfo.name + '-' + app.currentSession.linkmanInfo.enterprise.name; // } else { name = app.currentSession.linkmanInfo.enterprise.name; // } }else{ name = '个人账户'; } } $('#chat-title').html('

' + name + '(' + app.currentSession.linkmanInfo.userInfo.name.substring(0,1) + '**)

'); /*
*/ } /** * 清空聊天记录 */ function clearMessage() { $("#chat-receiver-log ul").empty(); } /** * 展示消息内容 * * @param message 消息内容 * @param isSend 是否为发送消息 */ function drawMessage(message, isSend) { var userName = ''; /*if (!isSend) { if (message.senderType === 'STORE') { userName = app.currentSession.enterprise.name; } if (message.senderType === 'ENTERPRISE') { userName = app.currentSession.userInfo.name + '-' + app.currentSession.enterprise.name; } } else { userName = app.userInfo.name; }*/ //暂时没用到这个userName console.log(message.content) $('#chat-receiver-log ul').append('
  • ' + '
    ' + '头像' + '
    ' + '
    ' + message.content + '
    ' + '
    ' + '
  • '); var height = $('#chat-receiver-log')[0].scrollHeight; $("#chat-receiver-log").animate({ scrollTop : height }, 300); } function drawSessionList(sessions) { $('#session-list .list-group').text(''); // $('#session-list .list-group2').text(''); for (var property in sessions) { if (sessions[property].isBlack){ continue; } if (sessions.hasOwnProperty(property) && sessions[property]) { var sessionStyle = '', record = ''; if (!sessions[property].read) { //sessionStyle = 'bg-warning'; } if (app.currentSession && app.currentSession.linkman && app.currentSession.linkman !== '') { if (sessions[property].id === app.currentSession.id) { sessionStyle = 'active'; } } if (sessions[property].type == 1) { record = sessions[property].content.replace(//, '[表情]'); } else if (sessions[property].type == 2) { record = '[图片]'; } else if (sessions[property].type == 3) { record = '[文件]'; } var flag = "'" + sessions[property].linkman + "'"; var enStr; if(sessions[property].enterprise == null){ enStr = '个人账户'+'('+sessions[property].userInfo.name.substring(0,1)+"**)"; }else{ enStr = sessions[property].enterprise.name+'('+sessions[property].userInfo.name.substring(0,1)+"**)"; } var listStr = '
    ' + '' + // '
    寄售
    ' + '
    ' + '
    ' + '' + enStr + '' + '' + formatHourTime(sessions[property].timeSend) + '' + '
    ' + '
    ' + (sessions[property].content.substring(0, 4) == ''; message.uuid = guid(); if (window.debug) { console.log('[DEBUG]Send Message', message.content); } sendMessage(message); } function previewImg(url) { $('#preview-img img').attr('src', url); $('#preview-img').show(); } function closePreview() { $('#preview-img').hide(); } /** * 点击图片按钮发送图片 */ function uploadImage() { var file = $('#upload-image')[0].files[0]; if (file) { var fileSize = 0; if (file.size > 1024 * 1024) { fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'; } else { fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; } // console.log('File Information', fileSize); var formData = new FormData(); formData.append('file', file); var fileObj = $("#upload-image") $('#loading').show(); FileService.uploadImage(formData, function (data) { sendImage(data); $('#loading').hide(); fileObj.val("") }, function (error) { $('#loading').hide(); console.log(error); fileObj.val(""); }) } } function drawHistoryMessage(message, isSend) { var name = '', enterpriseName = '', classStyle = ''; if (!isSend) { name = app.currentSession.userInfo.name; enterpriseName = app.currentSession.enterprise?app.currentSession.enterprise.name:'个人帐号'; } else { name = app.userInfo.name; enterpriseName = app.enterprise?app.enterprise.name:'个人帐号'; classStyle = 'customer'; } $('#chat-record>ul').prepend('
  • ' + '

    ' + name.substring(0,1)+'**' + ' ( ' + enterpriseName + ' ) ' + '

    ' + '

    ' + message.content + '

    ' + '
  • '); } function loadHistoryMessage(max, min) { messageService.loadHistoryMessage(app.gid, app.currentSession.linkman, max, min, function (messages) { app.history = messages; if (messages && messages.length > 0) { messages.forEach(function (message) { drawHistoryMessage(message, message.style === 'SEND'); }); } var record = $('#chat-record ul')[0]; var lastRecord = $('#chat-record ul li:last-child').height(); var height = record.scrollHeight + lastRecord; console.log(height); $("#chat-record ul").animate({ scrollTop : height }, 0); // 绘制聊天历史记录 }, function (error) { console.log(error); }) } /** * 显示聊天历史信息 */ function showChatRecord() { if (!app.isShowRecord) { app.isShowRecord = true; $('.col-md-8 >.row').css('right','232px'); $('#chat-send-area').css('right','217px'); $('#chat-record').show(); $('#chat-area').css({'width':'391px'}); $('#show-chat-record').html(' 关闭聊天记录'); $('#show-chat-record').css('color', 'red'); $('#chat-record>ul').html(''); var max = Math.round(new Date().getTime() / 1000) - (60 * 60 * 24); loadHistoryMessage(max, null); } else { app.isShowRecord = false; $('.col-md-8 >.row').css('right','15px'); $('#chat-send-area').css('right','0'); $('#chat-record').hide(); $('#chat-area').css({'width':'609px'}); $('#show-chat-record').html(' 聊天记录'); $('#show-chat-record').css('color', '#337ab7'); } } /** * 开启新的会话 */ function switchNewSession(communicator) { // console.log(communicator); if (!communicator || communicator === '') return ; var session = app.sessions[communicator]; sessionService.updateSessionStateWhenUserSwitchNewSession(session.id, function (sessions) { // 绘制会话列表 app.sessions = handlerSessionData(sessions || []); drawSessionList(app.sessions); // 绘制会话区域 if (app.currentSession) { drawTitle(); showChatArea(); clearMessage(); handlerUnReadMessage(); } }, function (error) { console.log(error); }); } function closeChatArea() { delete app.currentSession; hideChatArea(); drawSessionList(app.sessions); } /** * 加载分组数据 * */ function reloadData(flag) { ChatService.queryChatInfoWhenUserVisitWebSite(app.gid, function (data) { if (!data.success) { console.log('Message', data.message); return; } app.userInfo = data.chatInfo.userInfo; app.enterprise = data.chatInfo.enterprise; app.groups = data.groups || []; app.sessions = handlerSessionData(data.sessions || []); // drawSessionList(app.sessions); if (flag) { toSingleList(); } else { toDoubleList(); } }); } /** * 分组列表展示 * */ function drawSessionGroup() { // $('#session-list .list-group').text(''); $('#session-list .list-group2').text(''); var tempStr = '
      '; app.groups.forEach(function (item, index) { if (item.chatSessionList == null){ tempStr += '
    • ' + item.groupName + ' (0)
    • '; }else { tempStr += '
    • ' + item.groupName + ' ('+item.chatSessionList.length +')
    • '; } }); $('#session-list .list-group2').append(tempStr); } /** * 分组详细列表 * */ function showDetailList(index) { var temp_index = parseInt(index) + 1; var tempEl = $('#session-list .list-group2 .group-list >li:nth-child(' + temp_index + ')'); if (tempEl.find('ul').length == 0) { var tempStr = '
        '; if (app.groups[index].chatSessionList) { app.groups[index].chatSessionList.forEach(function (item, item_index) { var id = "'" + item.linkman + "'"; if (item.linkmanInfo.enterprise && item.linkmanInfo.enterprise!=null){ tempStr += '
      • ' + item.linkmanInfo.enterprise.name +'('+item.linkmanInfo.userInfo.name.substring(0,1)+'**)
      • '; }else{ tempStr += '
      • 个人账户('+item.linkmanInfo.userInfo.name.substring(0,1)+'**)
      • '; } }); tempStr += '
      '; tempEl.append(tempStr); } } else { tempEl.find('ul').remove() } } /** * 转换显示列表为最近联系人 * */ function toSingleList() { drawSessionList(app.sessions); $('#session-list .list-group').show(); $('#session-list .list-group2').hide(); } /** * 转换显示列表为分组 * */ function toDoubleList() { drawSessionGroup(); $('#session-list .list-group').hide(); $('#session-list .list-group2').show(); } /** * 转换显示列表 * */ function changeSelectList(type, e) { var flag = type == 'single' ? true : false; var left = $(e.target).parent()[0].firstElementChild; var right = $(e.target).parent()[0].lastElementChild; left.setAttribute('class', flag ? 'single active' : 'single'); left.firstElementChild.setAttribute('src', flag ? '/style/img/single-active.png' : '/style/img/single.png'); right.setAttribute('class', !flag ? 'double active' : 'double'); right.firstElementChild.setAttribute('src', !flag ? '/style/img/double-active.png' : '/style/img/double.png'); reloadData(flag); } /** * 右键分组菜单 * */ function onGroupMenu(event, index) { hideGroupListMenu(); $('.linkman-menu').hide(); if (event.button == 2) { document.oncontextmenu = function () { return false; } var groupName = app.groups[index].groupName; var x = event.pageX; var y = event.pageY; $('.group-menu').attr('style', 'top: ' + y + 'px; left: ' + x + 'px;'); $('.group-menu li').attr('name', index); if ('我的好友' == groupName){ $('.group-menu .delete-group').hide(); }else { $('.group-menu .delete-group').show(); } $('.group-menu').show(); $(document).click(function () { $('.group-menu').hide(); }) } } /** * 右键联系人操作菜单 * */ function onLinkmanMenu(event, index, item_index) { hideGroupMenu(); if (event.button == 2) { document.oncontextmenu = function () { return false; } var x = event.pageX; var y = event.pageY; var deleteObj = $('.linkman-menu >li:nth-child(2)'); var toBlackObj = $('.linkman-menu >li:nth-child(3)'); $('.linkman-menu').attr('style', 'top: ' + y + 'px; left: ' + x + 'px;'); var groupName = app.groups[index].groupName; if ('我的好友' == groupName){ $('.linkman-menu .delete-linkman').hide(); }else { $('.linkman-menu .delete-linkman').show(); } $('.linkman-menu').show(); $('.linkman-menu >li:first-child').attr('onmouseenter','showGroupList(event,' + index +',' + item_index + ')'); deleteObj.attr('onclick', 'selectLinkmanMenuItem(event, "2",' + index + ',' + item_index +')'); deleteObj.attr('onmouseenter', 'hideGroupListMenu()'); toBlackObj.attr('onclick', 'selectLinkmanMenuItem(event, "3",' + index + ',' + item_index +')'); toBlackObj.attr('onmouseenter', 'hideGroupListMenu()'); $(document).click(function () { $('.linkman-menu').hide(); $('.group-list-menu').hide(); }) } } /** * 分组列表菜单展示 * */ function showGroupList(event, index, item_index) { var obj = $('.group-list-menu'); obj.text(''); var str = ''; var type = 1; if (app.groups) { app.groups.forEach(function (item) { str += '
    • ' + item.groupName + '
    • ' }) } var x = $(event.target).parent().css('left'); var y = $(event.target).parent().css('top'); obj.append(str); obj.css({'top': y, 'left': parseInt(x.substring(0, x.length-2)) + 145 + 'px'}); obj.show(); } /** * 分组菜单选择 * */ function selectGroupMenuItem(e, type) { var ownid = app.gid; var index = $(e.target).attr('name'); var groupName = app.groups[index].groupName; if (type == 'add') { var str = '
    • ' $('#session-list .list-group2 .group-list').append(str); $('#session-list .list-group2 .group-list >li:last-child >div > input').focus(); } else if (type == 'rename') { var list_index = parseInt(index) +1; var tempEl = '#session-list .list-group2 .group-list >li:nth-child(' + list_index + ')'; var str = '' $(tempEl + '>div >span').hide(); $(tempEl + '>div').append(str); $(tempEl + '>div >input').focus(); } else if (type === 'remove') { if (app.groups[index].groupName === '我的好友') { return; } $('.remind-box').text(''); var str = '
      '; str += '
      是否要删除该分组?
      选定的分组将会被删除,组内联系人将会移至系统默认分组“我的好友。
      '; str += '
      取消 确定
      '; $('.remind-box').append(str); $('.remind-box').show(); } } /** * 联系人菜单选择 * type: * 1:移动联系人 * 2:删除联系人 * 3:加入黑名单 * */ function selectLinkmanMenuItem(event, type, index, item_index) { var chatSessionId = app.groups[index].chatSessionList[item_index].id; var name = app.groups[index].chatSessionList[item_index].linkmanInfo.userInfo.name; var ownid = app.gid; var fromGroupName = app.groups[index].groupName; if (type == 1) { var toGroupName = $(event.target).text() groupService.moveToGroup(chatSessionId, ownid, fromGroupName, toGroupName, function (data) { reloadData(); drawSessionGroup(); },function (error) { }) } else if (type == 2) { $('.remind-box').text(''); var str = '
      '; str += '
      删除后对方将从联系人列表中消失。
      '; str += '
      ' + name.substring(0,1)+'**' +'
      '; str += '
      取消 确定
      '; $('.remind-box').append(str); $('.remind-box').show(); } else if (type == 3) { $('.remind-box').text(''); var str = '
      '; str += '
      确认将该联系人加入至黑名单吗?
      移至黑名单后将无法接收此人会话消息。
      '; str += '
      ' + name.substring(0,1)+'**' +'
      '; str += '
      取消 确定
      '; $('.remind-box').append(str); $('.remind-box').show(); } } /** * 隐藏分组菜单 * */ function hideRemindBox() { $('.remind-box').hide(); } /** * 确认删除分组 * */ function submitDeleteGroupAction(index) { var ownid = app.gid; var groupName = app.groups[index].groupName; groupService.removeGroup(ownid, groupName, function (data) { reloadData(); drawSessionGroup(); hideRemindBox(); },function (error) { alert('删除分组失败!'); }) } /** * 确认删除联系人 * */ function submitDeleteAction(index, item_index) { var chatSessionId = app.groups[index].chatSessionList[item_index].id; var ownid = app.gid; var fromGroupName = app.groups[index].groupName; groupService.removeLinkman(chatSessionId, ownid, fromGroupName, function (data) { reloadData(); drawSessionGroup(); hideRemindBox(); },function (error) { alert('删除联系人失败!'); }) } /** * 确认加入黑名单 * */ function submitBlackAction(index, item_index) { var chatSessionId = app.groups[index].chatSessionList[item_index].id; var ownid = app.gid; var fromGroupName = app.groups[index].groupName; groupService.setlinkmanToBlacklist(chatSessionId, ownid, fromGroupName, function (data) { reloadData(); drawSessionGroup(); hideRemindBox(); },function (error) { alert('加入黑名单失败!'); }) } /** * 隐藏分组菜单 * */ function hideGroupMenu() { $('.group-menu').hide(); } /** * 隐藏分组列表菜单 * */ function hideGroupListMenu() { $('.group-list-menu').hide(); } function onAddGroup(event) { if (event.keyCode && event.keyCode !== 13) { return; } var val = $(event.target).val(); if (!val || val == '') { $('#session-list .list-group2 .group-list >li:last-child').remove(); } else { groupService.addGroup(app.gid, val, function (data) { reloadData(); drawSessionGroup(); }, function (error) { }) } } function onRenameGroup(event, index) { if (event.keyCode && event.keyCode !== 13) { return; } var _this = $(event.target) var val = _this.val(); if (!val || val == '') { _this.prev().show(); _this.remove(); } else { var groupName = app.groups[index].groupName; groupService.renameGroup(app.gid, groupName, val, function (data) { reloadData(); drawSessionGroup(); }, function (error) { }) } } /** * 搜索联系人 * */ function onSearchLinkman(type) { if (type && type == 'keyup' && event.keyCode!=13) { return; } searchLinkMan(); } function searchLinkMan() { var keyword = $('#session-list .search-user >input').val(); var ownerId = app.gid; groupService.searchLinkman(keyword, ownerId, function (data) { app.sessions = handlerSessionData(data.success || []); drawSessionList(app.sessions); },function (error) { }) } $(window).resize(function () { //当浏览器大小变化时 // alert($(window).height()); //浏览器时下窗口可视区域高度 //alert($(document).height()); //浏览器时下窗口文档的高度 //alert($(document.body).height()); //浏览器时下窗口文档body的高度 //alert($(document.body).outerHeight(true)); //浏览器时下窗口文档body的总高度 包括border padding margin*/ });