diff --git a/share_project/src/main/resources/static/chats.html b/share_project/src/main/resources/static/chats.html index 1ecc37faa67895f927c34e352823d41ac083f4dd..a4e574e02809bfd3cc0540bf726cc98910258860 100644 --- a/share_project/src/main/resources/static/chats.html +++ b/share_project/src/main/resources/static/chats.html @@ -93,7 +93,7 @@
{{currentFriendName}}
-
+
+
+ + + + + + + + +
+
diff --git a/share_project/src/main/resources/static/css/chats.css b/share_project/src/main/resources/static/css/chats.css index 212aeae368c9b0be62cf2365afda1d9b0c8f2664..a4064509b76a86b7b036c1587210bfa8ae09e1a9 100644 --- a/share_project/src/main/resources/static/css/chats.css +++ b/share_project/src/main/resources/static/css/chats.css @@ -425,11 +425,12 @@ input:focus { .chat-middle { width: 533px; - height: 340px; + height: 327px; background: #FFFFFF; border: 1px solid #E6E6E6; overflow-x: hidden; overflow-y: hidden; + padding-top: 13px; } .chat-middle:hover { 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 8036aae4f5e164d51ff21aae270e0432516772d5..bd448aa8842730e0411cee7997677e791887c4c6 100644 --- a/share_project/src/main/resources/static/js/page/chat.js +++ b/share_project/src/main/resources/static/js/page/chat.js @@ -38,14 +38,41 @@ const app = new Vue({ linkId: '', // 存储聊天框里面的值 msgContent: '', + // 存储聊天记录的总页数 + totalHistoryNum: 1, // 即时聊天webSokect websocket: null, // 防止一直重连websocket - lockReconnect: false + // lockReconnect: false, + // 心跳检测 + // heartCheck: { + // timeout: 1000, //1分钟发一次心跳 + // timeoutObj: null, + // serverTimeoutObj: null, + // reset: function() { + // clearTimeout(this.timeoutObj); + // clearTimeout(this.serverTimeoutObj); + // return this; + // }, + // start: function() { + // var self = this; + // this.timeoutObj = setTimeout(function() { + // //这里发送一个心跳，后端收到后，返回一个心跳消息， + // //onmessage拿到返回的心跳就说明连接正常 + // ws.send("ping"); + // console.log("ping!") + // self.serverTimeoutObj = setTimeout(function() { //如果超过一定时间还没重置，说明后端主动断开了 + // ws.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次 + // }, self.timeout) + // }, this.timeout) + // } + // }, }, + + created() { // this.getCurrentUserInfo(); this.getChatList(); @@ -65,58 +92,71 @@ const app = new Vue({ alert('Not support websocket') }; //连接发生错误的回调方法 - this.websocket.onerror = function() { + this.websocket.onerror = () => { + // this.reconnect(target); // setMessageInnerHTML("error"); alert('连接发生错误！') }; + //连接关闭的回调方法 + this.websocket.onclose = () => { + // setMessageInnerHTML("Loc MSG:关闭连接"); + // this.reconnect(target); + console.log('关闭连接！'); + }; + //连接成功建立的回调方法 - this.websocket.onopen = function(event) { + this.websocket.onopen = (event) => { + // this.heartCheck.reset().start(); //心跳检测重置 + // setMessageInnerHTML("Loc MSG: 建立连接"); alert('连接成功！') }; //接收到消息的回调方法 this.websocket.onmessage = (event) => { - // setMessageInnerHTML(event.data); - // data: "{"sendUser":"admin","content":"hhh","sendTime":1617023867997}" - var chatContent = JSON.parse(event.data); - console.log(chatContent); - // 判断是从哪里发过来的 如果是正在聊天的那个娃 就直接添加到正在聊天的历史记录的数组中 - if (chatContent.sendUser == this.currentFriendName) { - // 将消息放进去对应的数组中 - this.currentChatHistory.push(chatContent); + // this.heartCheck.reset().start(); //拿到任何消息都说明当前连接是正常的 - // 设置上一条消息 - 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的下标 - var index = this.friendsList.findIndex(item => { - return item.friendName == chatContent.sendUser; - }); - if (index != -1) { - // 说明找到了 将其的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); + // 说明不是心跳检测 + if (event.data != 'pong') { + // setMessageInnerHTML(event.data); + // data: "{"sendUser":"admin","content":"hhh","sendTime":1617023867997}" + var chatContent = JSON.parse(event.data); + console.log(chatContent); + // 判断是从哪里发过来的 如果是正在聊天的那个娃 就直接添加到正在聊天的历史记录的数组中 + if (chatContent.sendUser == this.currentFriendName) { + // 将消息放进去对应的数组中 + // 这里要格式化时间 + chatContent.sendTime = this.dateFormat(chatContent.sendTime, 'yyyy-mm-dd hh:mm:ss') + 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 { - console.log('发出去的消息经过这里了！' + chatContent); + // 如果不是正在聊天的那个人 就将该user的未读消息+1 + // 查找对应的friend的下标 + var index = this.friendsList.findIndex(item => { + return item.friendName == chatContent.sendUser; + }); + if (index != -1) { + // 说明找到了 将其的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 { + console.log('发出去的消息经过这里了！' + chatContent); + } } } }; - //连接关闭的回调方法 - this.websocket.onclose = function() { - // setMessageInnerHTML("Loc MSG:关闭连接"); - console.log('关闭连接！'); - }; + //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 window.onbeforeunload = async() => { var url = 'http://zshare.free.idcfengye.com/share/chat/resetWindows?username=' + this.username; @@ -124,6 +164,15 @@ const app = new Vue({ console.log('切换了窗口嘛！'); }; }, + // websocket重新连接 + // reconnect: (url) => { + // if (this.lockReconnect) return; + // this.lockReconnect = true; + // setTimeout(() => { //没连接上会一直重连，设置延迟避免请求过多 + // this.initWebSocket(); + // this.lockReconnect = false; + // }, 2000); + // }, // 使用websocket发送消息 websocketSend: function() { @@ -156,6 +205,7 @@ const app = new Vue({ this.msgContent = ''; }, + //获取当前用户的用户名和头像 getCurrentUserInfo: function() { axios.get("/share/user/isLogin").then(function(response) { @@ -186,7 +236,7 @@ const app = new Vue({ // 当点击用户想要打开对话框时 发送下面两个请求 拿历史记录、建立连接 getHistory: function(friendName) { this.isMask = true; - var url = 'http://zshare.free.idcfengye.com/share/chat/getChatRecords/' + friendName + '?fromUser=' + this.username + '¤tIndex=1' + var url = 'http://zshare.free.idcfengye.com/share/chat/getChatRecords/' + friendName + '?fromUser=' + this.username + '&startIndex=0&pageSize=6'; axios.get(url).then(res => { if (res.data.status == '1') { console.log(res.data); @@ -196,6 +246,19 @@ const app = new Vue({ } }) }, + // 向上滚动获取历史记录 + scrollHistory: async function(event) { + if (event.target.scrollTop == 0) { + // 更新聊天记录 + // 当前有多少条记录 + var currentIndex = this.currentChatHistory.length; + var pageSize = 6; + var url = 'http://zshare.free.idcfengye.com/share/chat/getChatRecords/' + this.currentFriendName + '?fromUser=' + this.username + '&startIndex=' + currentIndex + '&pageSize=' + pageSize; + var history = await axios.get(url); + var tempHistory = history.data.data; + this.currentChatHistory = tempHistory.concat(this.currentChatHistory); + } + }, // 跟对方建立连接 判断对方是否在线 getStaus: function(friendName) { var url = 'http://zshare.free.idcfengye.com/share/chat/inWindows/' + friendName + '?fromUser=' + this.username; @@ -226,6 +289,7 @@ const app = new Vue({ this.currentFriendPic = item.friendPicture; // 记住当前好友的linkID this.linkId = item.linkId; + console.log(this.linkId); }, // 当点击上面的小搜索框 需要展示出大的搜索框 showBigSearch: function() { @@ -280,15 +344,15 @@ const app = new Vue({ } }, // 监听，当信息数组发送变化时自动滚动到最下面 - watch: { - currentChatHistory: function() { - setTimeout(() => { - this.$nextTick(() => { - var container = this.$el.querySelector("#chatContainer"); - console.log(container); - container.scrollTop = container.scrollHeight; - }); - }, 0); - } - } + // watch: { + // currentChatHistory: function() { + // setTimeout(() => { + // this.$nextTick(() => { + // var container = this.$el.querySelector("#chatContainer"); + // console.log(container); + // container.scrollTop = container.scrollHeight; + // }); + // }, 0); + // } + // } }) \ No newline at end of file diff --git a/share_project/src/main/resources/static/test.html b/share_project/src/main/resources/static/test.html new file mode 100644 index 0000000000000000000000000000000000000000..b3907fba87faeb1b98b8386366927150b05f36e3 --- /dev/null +++ b/share_project/src/main/resources/static/test.html @@ -0,0 +1,42 @@ + + + + + + + + Document + + + +
点我
+ + + + + + \ No newline at end of file