-
+
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 b24c91f10a59baf6e320f0784e942f956faea99f..bd5bdf3262266a9a53409b450d5090a7f35f8bb2 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 ba28e217490f014985fcc4de9e8f9bd665d97348..3a5b075bdf6ae4a7272b94a8dcc77063dc28e57c 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 fba63ff5f2c5445d3d2eb3e885579cea96c55741..6e84ff7b3a7106c9a33d6df8e83ea9d1282e3964 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 @@
-
+
-
- 
-
- 
+
+ 
+