From 374083231b5748d5efd59a6d88cff0653374f6f7 Mon Sep 17 00:00:00 2001 From: luo <1363066635@qq.com> Date: Thu, 25 Mar 2021 15:43:30 +0800 Subject: [PATCH 1/8] modify --- .../src/main/resources/static/browse.html | 135 +------- .../resources/static/css/bootstrap.min.css | 7 + .../resources/static/css/choice-register.css | 2 +- .../resources/static/css/company-register.css | 100 +++--- .../resources/static/css/fakeLoader.min.css | 1 + .../src/main/resources/static/css/index.css | 76 ++++- .../resources/static/css/person-register.css | 304 +++++++++--------- .../src/main/resources/static/css/search.css | 70 ++++ .../src/main/resources/static/images/line.png | Bin 0 -> 999 bytes .../src/main/resources/static/index.html | 103 +++--- .../resources/static/individual-register.html | 77 +++-- .../resources/static/js/fakeLoader.min.js | 1 + .../main/resources/static/js/page/browse.js | 98 ++++-- .../static/js/page/choice-register.js | 8 +- .../main/resources/static/js/page/index.js | 0 .../main/resources/static/js/page/isLogin.js | 44 ++- .../main/resources/static/js/page/login.js | 39 ++- .../main/resources/static/js/page/search.js | 22 ++ .../src/main/resources/static/search.html | 99 ++++-- 19 files changed, 677 insertions(+), 509 deletions(-) create mode 100644 share_project/src/main/resources/static/css/bootstrap.min.css create mode 100644 share_project/src/main/resources/static/css/fakeLoader.min.css create mode 100644 share_project/src/main/resources/static/images/line.png create mode 100644 share_project/src/main/resources/static/js/fakeLoader.min.js create mode 100644 share_project/src/main/resources/static/js/page/index.js create mode 100644 share_project/src/main/resources/static/js/page/search.js diff --git a/share_project/src/main/resources/static/browse.html b/share_project/src/main/resources/static/browse.html index 883e1ed9..e55725a0 100644 --- a/share_project/src/main/resources/static/browse.html +++ b/share_project/src/main/resources/static/browse.html @@ -13,7 +13,7 @@
-
+
+
+
@@ -82,7 +84,7 @@
{{item.friendName}}
-
文字太长会咋样文字太长会咋样文字太长会咋样文字太长会咋样文字太长会咋样
+
{{item.lastMessage}}
{{item.sendTime}}
@@ -93,81 +95,48 @@
{{currentFriendName}}
-
-
+
+
-
    -
  • -
    - -
    - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - -
    • -
  • - +
      + +
    • - -
      - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉啊啊啊啊顶顶顶顶的点点滴滴 - -
      • -
    • -
      - +
      - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 + + {{item.content}}
      +
      +
      {{item.sendTime}}
      • -
    • - -
      - -
      - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉啊啊啊啊顶顶顶顶的点点滴滴 - -
      • -
    • +
    • - +
      - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 + + {{item.content}} +
      +
      {{item.sendTime}}
      • -
    • - -
      - -
      - 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉啊啊啊啊顶顶顶顶的点点滴滴 - -
    +
    + 请和你的好友开始聊天吧! +
- - - + + + - - + +
diff --git a/share_project/src/main/resources/static/css/browse.css b/share_project/src/main/resources/static/css/browse.css index 6faecbc0..cc1a0fb3 100644 --- a/share_project/src/main/resources/static/css/browse.css +++ b/share_project/src/main/resources/static/css/browse.css @@ -10,6 +10,9 @@ textarea { box-sizing: border-box; } + +/* 遮罩层 也就是加载的时候显示的动画 */ + .mask { position: fixed; width: 100%; diff --git a/share_project/src/main/resources/static/css/chats.css b/share_project/src/main/resources/static/css/chats.css index 1db1124b..212aeae3 100644 --- a/share_project/src/main/resources/static/css/chats.css +++ b/share_project/src/main/resources/static/css/chats.css @@ -13,6 +13,21 @@ input:focus { outline: none; } + +/* 遮罩层 也就是加载的时候显示的动画 */ + +.mask { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 99999; + background: url(../images/loading2.gif) no-repeat center center; + background-size: 300px auto; + background-color: rgba(255, 255, 255, .7); +} + .large { position: absolute; top: 0px; @@ -444,7 +459,20 @@ input:focus { border-radius: 10px; } -.chat-time { + +/* 还没有打开对话框的时候 提示信息 */ + +.chatMsg { + text-align: center; + font-size: 16px; + color: #FADA3C; + font-weight: bold; + margin-top: 10px; + letter-spacing: 1px; +} + + +/* .chat-time { position: relative; height: 63px; } @@ -457,21 +485,7 @@ input:focus { font-family: SourceHanSansCN-Light; font-weight: 300; color: #AAAAAA; -} - -.line { - position: absolute; - top: -64px; - left: 58px; - background: linear-gradient(to left, #F6F6F6, #C0C0C0, #F6F6F6); - height: .8px; - width: 125px; - margin-top: 100px; -} - -.chat-time .line:last-child { - left: 358px; -} +} */ .you, .me { @@ -511,6 +525,16 @@ input:focus { max-width: 305px; } + +/* 聊天时间上面的分割线 */ + +.line { + border-top: 0.8px dashed black; + width: 100%; + margin-top: 6px; + font-size: 8px; +} + .image-friend, .image-me { float: left; diff --git a/share_project/src/main/resources/static/index.html b/share_project/src/main/resources/static/index.html index 9bc3b0da..9b5aedd7 100644 --- a/share_project/src/main/resources/static/index.html +++ b/share_project/src/main/resources/static/index.html @@ -29,7 +29,7 @@
- + 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 b24c91f1..bd5bdf32 100644 --- a/share_project/src/main/resources/static/js/page/chat.js +++ b/share_project/src/main/resources/static/js/page/chat.js @@ -17,9 +17,10 @@ const app = new Vue({ el: "#chat", data: { + isMask: false, // 用户个人信息 - username: "", - userPicture: "", + username: "admin", + userPicture: "images/pic.jpg", searchInfo: "", // 获取到的好友列表 friendsList: [], @@ -28,14 +29,92 @@ const app = new Vue({ // focus类 focusID: '-1', // 存一下当前点击的好友的名字 - currentFriendName: '' + currentFriendName: '', + // 存一下当前点击好友的头像 + currentFriendPic: '', + // 存储和当前好友的聊天记录 + currentChatHistory: [], + // 存储和当前聊天的linkId + linkId: '', + // 存储聊天框里面的值 + msgContent: '', + // 即时聊天webSokect + websocket: null }, created() { // this.getCurrentUserInfo(); this.getChatList(); - + // this.initWebSocket(); }, methods: { + // 初始化webSocket + initWebSocket: function() { + //TODO 这个地址需要修改 + const target = "ws://zshare.free.idcfengye.com/share/websocket"; + + //判断当前浏览器是否支持WebSocket + if ('WebSocket' in window) { + this.websocket = new WebSocket(target); + } else { + alert('Not support websocket') + }; + //连接发生错误的回调方法 + this.websocket.onerror = function() { + // setMessageInnerHTML("error"); + alert('连接发生错误！') + }; + //连接成功建立的回调方法 + this.websocket.onopen = function(event) { + // setMessageInnerHTML("Loc MSG: 建立连接"); + alert('连接成功！') + }; + //接收到消息的回调方法 + this.websocket.onmessage = function(event) { + // setMessageInnerHTML(event.data); + // data: "{"fromUser":"admin","content":"hhh","sendTime":1617023867997}" + var chatContent = JSON.parse(event); + // 判断是从哪里发过来的 如果是正在聊天的那个娃 就直接添加到正在聊天的历史记录的数组中 + if (chatContent.fromUser == this.currentFriendName) { + // 将消息放进去对应的数组中 + this.currentChatHistory.push(event); + } else { + // 如果不是正在聊天的那个人 就将该user的未读消息+1 + // 查找对应的friend的下标 + var index = this.friendsList.findIndex(item => { + return item.friendName == event.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); + } else { + alert('有未读消息不知道往哪去！'); + } + } + console.log(event); + }; + //连接关闭的回调方法 + this.websocket.onclose = function() { + // setMessageInnerHTML("Loc MSG:关闭连接"); + console.log('关闭连接！'); + }; + //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 + window.onbeforeunload = function() { + this.websocket.close(); + }; + }, + + // 使用websocket发送消息 + websocketSend: function() { + var chatMsg = { + content: this.messageInput, + toUser: this.currentFriendName, + linkId: this.linkId + } + this.websocket.send(JSON.stringify(chatMsg)); + }, + + //获取当前用户的用户名和头像 getCurrentUserInfo: function() { axios.get("/share/user/isLogin").then(function(response) { @@ -48,11 +127,14 @@ const app = new Vue({ //获取当前用户的聊天列表 getChatList: function() { + this.isMask = true; axios.get("http://zshare.free.idcfengye.com/share/chat/getChatList?fromUser=admin") .then(res => { //获取json数据 if (res.data.status == '1') { this.friendsList = res.data.data; + this.isMask = false; + console.log(this.friendsList); } }).catch(err => { @@ -61,15 +143,29 @@ 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' axios.get(url).then(res => { - console.log(res.data); + if (res.data.status == '1') { + console.log(res.data); + this.currentChatHistory = res.data.data; + this.isMask = false; + + } }) }, + // 跟对方建立连接 判断对方是否在线 getStaus: function(friendName) { var url = 'http://zshare.free.idcfengye.com/share/chat/inWindows/' + friendName + '?fromUser=admin'; axios.get(url).then(res => { console.log(friendName); + + // 建立连接的同时会把全部消息设置为已读 这个因为没有重新去请求后台，所以自己做一个就行 + var index = this.friendsList.findIndex(item => { + return item.friendName == friendName; + }); + // console.log(index); + this.$set(this.friendsList[index], 'unread', 0); }) }, @@ -80,10 +176,14 @@ const app = new Vue({ // 输入消息的对话框自动对焦 this.$nextTick(function() { //DOM 更新了 - this.$refs.messageInput.focus() + this.$refs.messageInput.focus(); }); // 记住当前聊天的好友 this.currentFriendName = item.friendName; + // 记住当前聊天好友的头像 + this.currentFriendPic = item.friendPicture; + // 记住当前好友的linkID + this.linkId = item.linkId; }, // 当点击上面的小搜索框 需要展示出大的搜索框 showBigSearch: function() { @@ -98,6 +198,17 @@ const app = new Vue({ this.flagOfSearch = true; }, - + }, + // 监听，当信息数组发送变化时自动滚动到最下面 + 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/js/page/isLogin.js b/share_project/src/main/resources/static/js/page/isLogin.js index ba28e217..3a5b075b 100644 --- a/share_project/src/main/resources/static/js/page/isLogin.js +++ b/share_project/src/main/resources/static/js/page/isLogin.js @@ -2,7 +2,7 @@ const header = new Vue({ el: "#nav", data: { // 暂时先填true来测试 - isLogin: "", + isLogin: "true", userPicture: "", unread: 0, isShow: 'none' diff --git a/share_project/src/main/resources/static/search.html b/share_project/src/main/resources/static/search.html index fba63ff5..6e84ff7b 100644 --- a/share_project/src/main/resources/static/search.html +++ b/share_project/src/main/resources/static/search.html @@ -28,7 +28,7 @@
- + @@ -82,7 +82,7 @@ - + \ No newline at end of file diff --git a/share_project/src/main/resources/static/webSocketTest.html b/share_project/src/main/resources/static/webSocketTest.html index 9ca1a274..0cd26645 100644 --- a/share_project/src/main/resources/static/webSocketTest.html +++ b/share_project/src/main/resources/static/webSocketTest.html @@ -2,16 +2,15 @@ -     + -     My WebSocket -     + My WebSocket + @@ -20,14 +19,13 @@
-
- 消息： - 频道号： +
消息： + 频道号： +
-- Gitee