diff --git a/share_project/src/main/resources/static/js/page/chat.js b/share_project/src/main/resources/static/js/page/chat.js index a215fe667ce7ec9fd6d2ba138ee914a654232f18..8036aae4f5e164d51ff21aae270e0432516772d5 100644 --- a/share_project/src/main/resources/static/js/page/chat.js +++ b/share_project/src/main/resources/static/js/page/chat.js @@ -18,7 +18,7 @@ const app = new Vue({ el: "#chat", data: { isMask: false, - // 用户个人信息 + // TODO 用户个人信息 到时候要发个请求 将这个当前的用户信息更新 username: "admin", userPicture: "images/pic.jpg", searchInfo: "", @@ -38,8 +38,12 @@ const app = new Vue({ linkId: '', // 存储聊天框里面的值 msgContent: '', + + // 即时聊天webSokect - websocket: null + websocket: null, + // 防止一直重连websocket + lockReconnect: false }, created() { @@ -80,6 +84,16 @@ const app = new Vue({ if (chatContent.sendUser == this.currentFriendName) { // 将消息放进去对应的数组中 this.currentChatHistory.push(chatContent); + + // 设置上一条消息 + var index = this.friendsList.findIndex(item => { + return item.friendName == this.currentFriendName; + }); + if (index != -1) { + this.$set(this.friendsList[index], 'lastMessage', chatContent.content); + } else { + console.log('有经过的消息未设置为上一条消息!' + chatContent); + } } else { // 如果不是正在聊天的那个人 就将该user的未读消息+1 // 查找对应的friend的下标 @@ -90,8 +104,11 @@ const app = new Vue({ // 说明找到了 将其的unread+1 this.$set(this.friendsList[index], 'unread', parseInt(this.friendsList[index].unread) + 1); console.log(parseInt(this.friendsList[index].unread) + 1); + // 设置当前好友的上一条消息为这个 + this.$set(this.friendsList[index], 'lastMessage', chatContent.content); + } else { - alert('有未读消息不知道往哪去!'); + console.log('发出去的消息经过这里了!' + chatContent); } } }; @@ -101,8 +118,10 @@ const app = new Vue({ console.log('关闭连接!'); }; //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 - window.onbeforeunload = function() { - this.websocket.close(); + window.onbeforeunload = async() => { + var url = 'http://zshare.free.idcfengye.com/share/chat/resetWindows?username=' + this.username; + await axios.get(url); + console.log('切换了窗口嘛!'); }; }, @@ -117,9 +136,25 @@ const app = new Vue({ this.websocket.send(JSON.stringify(chatMsg)); // 添加sendUser属性 然后添加到本来的列表中 chatMsg.sendUser = this.username; - chatMsg.sendTime = 'now'; + // 格式化日期 + chatMsg.sendTime = this.dateFormat(new Date(), 'yyyy-mm-dd hh:mm:ss'); // 添加進去聊天历史列表 this.currentChatHistory.push(chatMsg); + + // 设置上一条消息为这一条 暂时不确定 应该不需要这个 + var index = this.friendsList.findIndex(item => { + return item.friendName == this.currentFriendName; + }); + if (index != -1) { + // 说明找到了 将其的unread+1 + this.$set(this.friendsList[index], 'lastMessage', this.msgContent); + } else { + console.log('没有将这个发出去的消息设置为未读消息那里!!' + chatMsg); + } + + // 清空输入内容框 + this.msgContent = ''; + }, //获取当前用户的用户名和头像 getCurrentUserInfo: function() { @@ -134,7 +169,8 @@ const app = new Vue({ //获取当前用户的聊天列表 getChatList: function() { this.isMask = true; - axios.get("http://zshare.free.idcfengye.com/share/chat/getChatList?fromUser=admin") + var url = "http://zshare.free.idcfengye.com/share/chat/getChatList?fromUser=" + this.username; + axios.get(url) .then(res => { //获取json数据 if (res.data.status == '1') { @@ -150,7 +186,7 @@ const app = new Vue({ // 当点击用户想要打开对话框时 发送下面两个请求 拿历史记录、建立连接 getHistory: function(friendName) { this.isMask = true; - var url = 'http://zshare.free.idcfengye.com/share/chat/getChatRecords/' + friendName + '?fromUser=admin¤tIndex=1' + var url = 'http://zshare.free.idcfengye.com/share/chat/getChatRecords/' + friendName + '?fromUser=' + this.username + '¤tIndex=1' axios.get(url).then(res => { if (res.data.status == '1') { console.log(res.data); @@ -162,7 +198,7 @@ const app = new Vue({ }, // 跟对方建立连接 判断对方是否在线 getStaus: function(friendName) { - var url = 'http://zshare.free.idcfengye.com/share/chat/inWindows/' + friendName + '?fromUser=admin'; + var url = 'http://zshare.free.idcfengye.com/share/chat/inWindows/' + friendName + '?fromUser=' + this.username; axios.get(url).then(res => { console.log(friendName); @@ -204,6 +240,44 @@ const app = new Vue({ this.flagOfSearch = true; }, + + // 格式化日期 + dateFormat: function(date, format) { + if (typeof date === "string") { + var mts = date.match(/(\/Date\((\d+)\)\/)/); + if (mts && mts.length >= 3) { + date = parseInt(mts[2]); + } + } + date = new Date(date); + if (!date || date.toUTCString() == "Invalid Date") { + return ""; + } + var map = { + "M": date.getMonth() + 1, //月份 + "d": date.getDate(), //日 + "h": date.getHours(), //小时 + "m": date.getMinutes(), //分 + "s": date.getSeconds(), //秒 + "q": Math.floor((date.getMonth() + 3) / 3), //季度 + "S": date.getMilliseconds() //毫秒 + }; + + format = format.replace(/([yMdhmsqS])+/g, function(all, t) { + var v = map[t]; + if (v !== undefined) { + if (all.length > 1) { + v = '0' + v; + v = v.substr(v.length - 2); + } + return v; + } else if (t === 'y') { + return (date.getFullYear() + '').substr(4 - all.length); + } + return all; + }); + return format; + } }, // 监听,当信息数组发送变化时自动滚动到最下面 watch: {