hua1995116 · heha-creat · May 24, 2020 · Feb 1, 2021
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+npm-debug.log
+.idea
+.vscode
+node_modules
+client
+package-lock.json
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,24 @@
+FROM node:8.5.0
+
+# Create app directory
+WORKDIR /usr/src/app
+
+# Install app dependencies
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+# where available (npm@5+)
+COPY package.json ./
+
+RUN npm install --registry=https://registry.npm.taobao.org
+
+# If you are building your code for production
+# RUN npm ci --only=production
+
+# Bundle app source
+COPY . .
+
+
+EXPOSE 9090
+
+ENV NODE_ENV=production
+
+CMD [ "node", "prod.server.js" ]
diff --git a/client/public/index.html b/client/public/index.html
@@ -9,27 +9,27 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_500440_lugc2s6o3tg.css">
     <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-112201282-1"></script>
+    <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-112201282-1"></script> -->
 </head>
 <body>
 <div id="app"></div>
 <!-- built files will be auto injected -->
 </body>
-<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+<!-- <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 <script>
   (adsbygoogle = window.adsbygoogle || []).push({
     google_ad_client: "ca-pub-9600452473812541",
     enable_page_level_ads: true
   });
-</script>
+</script> -->
 <!-- Global site tag (gtag.js) - Google Analytics -->
-<script>
+<!-- <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
 
     gtag('config', 'UA-112201282-1');
-</script>
+</script> -->
 <script src="https://cdn.bootcss.com/vConsole/3.2.2/vconsole.min.js"></script>
 <script>
     var debug = location.href.match(/debug=(\w+)/);

diff --git a/client/src/api/axios.js b/client/src/api/axios.js
@@ -1,5 +1,6 @@
 import axios from 'axios';
 import Toast from "@components/Toast";
+import Alert from "@components/Alert";
 import {setItem, getItem} from '@utils/localStorage';
 
 const baseURL = '';
@@ -23,8 +24,13 @@ instance.interceptors.request.use(async config => {
 // 对返回的内容做统一处理
 instance.interceptors.response.use(response => {
   if (response.status === 200) {
-    return response;
+    if (response.data.errno === 0) {
+      return response.data.data;
+    }
   }
+  Alert({
+    content: response.data.msg,
+  });
   return Promise.reject(response);
 }, error => {
   if (error) {

diff --git a/client/src/api/server.js b/client/src/api/server.js
@@ -44,7 +44,15 @@ const Service = {
   // 查询好友李彪
   postListFriend: data => Axios.post('/api/friend/list', data),
   // 请求公告
-  getNotice: () => Axios.get('https://s3.qiufengh.com/config/notice-config.js')
+  getNotice: () => Axios.get('https://s3.qiufengh.com/config/notice-config.js'),
+
+  getGroupList: (data) => Axios.get('/api/group/list', {
+    params: data
+  }),
+
+  getGroupUserList: (data) => Axios.get('/api/group/userList', {
+    params: data
+  }),
 };
 
 export default Service;

diff --git a/client/src/components/GroupList/index.vue b/client/src/components/GroupList/index.vue
diff --git a/client/src/components/Message/index.vue b/client/src/components/Message/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="clear" :class="[isSelf ? 'right' : 'left']" ref="msg">
     <div class="name">
-      <span v-if="mytime">{{ getdate }}</span> &nbsp;&nbsp;{{ name }}
+      <span v-if="mytime">{{ getdate }}</span> &nbsp;&nbsp;{{ username }}
     </div>
     <div class="body">
       <div class="tip" v-if="isSelf">
@@ -15,10 +15,10 @@
           @click.native="handleClick"
           class="head-place"
           size="small"
-          :src="avatar"
+          :src="avatarPro"
           v-flex-touch="handleTouch"
         ></Avatar>
-        <div v-if="img">
+        <div v-if="msgType === 'img'">
           <div class="img-wrapper">
             <div class="img-bg" v-if="loading && loading !== 100">{{loading}}%</div>
             <img
@@ -28,13 +28,13 @@
               alt=""
               :data-item="isLast && 'last'"
               class="img"
-              v-preview="img"
+              v-preview="pic.src"
               preview-title-enable="true"
               preview-nav-enable="true"
             />
           </div>
         </div>
-        <span v-if="msg">
+        <span v-if="msgType === 'text'">
           <span v-html="linkMsg" class="msg"></span>
         </span>
       </div>
@@ -55,7 +55,7 @@ export default {
     Avatar,
     Status,
   },
-  props: ["id", "name", "img", "msg", "head", "mytime", "is-self", "container", "isNeedScroll", "firstNode", 'isLast', 'status', 'clientId', 'roomid', "obj", 'loading'],
+  props: ["id", "username", "msg", "mytime", "is-self", "container", "isNeedScroll", "firstNode", 'isLast', 'status', 'clientId', 'groupId', "obj", 'loading', 'msgType', 'avatar'],
   computed: {
     getdate() {
       return dateFormat(new Date(this.mytime), "yyyy-MM-dd HH:mm:ss");
@@ -73,10 +73,10 @@ export default {
         }
       );
     },
-    avatar() {
-      let avatar = this.head;
+    avatarPro() {
+      let avatar = this.avatar;
       const reg = /\.\/static\/img\/(\d+)\.jpg/;
-      const matches = this.head.match(reg);
+      const matches = avatar.match(reg);
       if (matches) {
         avatar = `//s3.qiufengh.com/avatar/${matches[1]}.jpeg`;
       }
@@ -87,7 +87,7 @@ export default {
       }
     },
     pic() {
-      let pic = this.img;
+      let pic = this.msg;
       let width = 200;
       let height = 200;
       const picParse = /width=([0-9]+)&height=([0-9]+)/.exec(pic);
@@ -146,7 +146,7 @@ export default {
         if(this.status === 'loading') {
           this.$store.commit('setRoomDetailStatus', {
             clientId: this.clientId,
-            roomid: this.roomid,
+            groupId: this.groupId,
             status: 'error',
             typeList: ['status']
           })
@@ -158,12 +158,11 @@ export default {
     },
     handleClick() {
       this.$emit('avatarClick', {
-        id: this.name,
+        id: this.username,
       });
     },
     handleTouch(e) {
-      console.log(e);
-      this.$emit('flexTouch', `@${this.name}，`);
+      this.$emit('flexTouch', `@${this.username}，`);
     }
   }
 };

diff --git a/client/src/components/userHead/index.vue b/client/src/components/userHead/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="user-header">
     <div class="head">
-      <img :src="src" alt="">
+      <img :src="avatar" alt="">
     </div>
     <div class="name">
       {{username}}
     </div>
     <div class="background">
-      <img :src="src" alt="">
+      <img :src="avatar" alt="">
     </div>
   </div>
 </template>
@@ -16,7 +16,7 @@
 export default {
 
   components: {},
-  props: ['src', 'username'],
+  props: ['avatar', 'username'],
   data () {
     return {
     };

diff --git a/client/src/main.js b/client/src/main.js
@@ -3,7 +3,7 @@
 import Vue from 'vue';
 import App from './App';
 import router from './router/index';
-import store from './store';
+import store from './store/index1';
 import './styles/reset.css';
 import './styles/default.css';
 // 使用museui组件
@@ -66,20 +66,19 @@ socket.on('reconnect', async (attemptNumber) => {
 
 socket.on('connect', async () => {
   console.log('connect');
-  const roomId = queryString(window.location.href, 'roomId');
-  const userName = store.state.userInfo.userid;
-  const src = store.state.userInfo.src;
-  const userId = store.state.userInfo.id;
+  // const roomId = queryString(window.location.href, 'roomId');
+  const username = store.state.userInfo.username;
+  const avatar = store.state.userInfo.avatar;
+  const userId = store.state.userInfo.userId;
   if (userId) {
+    await store.dispatch('getGroupList', { userId });
+    const groupList = store.state.group.groupList;
     // 此处逻辑需要抽离复用
     await handleInit({
-      socket,
-      store,
-      name: userName,
-      id: userId,
-      src,
-      env,
-      roomList: ['room1', 'room2']
+      username,
+      userId,
+      avatar,
+      groupList
     })
   }
 });
@@ -95,31 +94,31 @@ socket.on('disconnect', () => {
 });
 
 socket.on('message', function (obj) {
-  const userName = store.state.userInfo.userid;
-  const { roomid, username, img } = obj;
-  if(userName === username) {
-    if(img) {
+  const userIdLocal = store.state.userInfo.userId;
+  const { groupId, userId, msgType, clientId, msg } = obj;
+  if(userIdLocal === userId) {
+    if(msgType === 'img') {
       console.log('img', obj);
       store.commit('setRoomDetailStatus', {
-        clientId: obj.clientId,
-        roomid: obj.roomid,
+        clientId,
+        groupId,
         status: 'finish',
         loading: 100,
-        img: obj.img,
+        img: msg,
         typeList: ['status', 'loading', 'img']
       })
     } else {
       store.commit('setRoomDetailStatus', {
-        clientId: obj.clientId,
-        roomid: obj.roomid,
+        clientId,
+        groupId,
         status: 'finish',
         typeList: ['status']
       })
     }
 
   } else {
     store.commit('setRoomDetailInfosAfter', {
-      roomid,
+      groupId,
       msgs: [obj]
     });
     if (Notification.permission === "granted") {
@@ -131,7 +130,7 @@ socket.on('message', function (obj) {
 
 socket.on('count', (obj) => {
   console.log(obj);
-  store.commit("setUnread", obj);
+  // store.commit("setUnread", obj);
 })
 
 socket.on('room', (obj) => {
@@ -146,24 +145,28 @@ socket.on('friend', (obj) => {
   store.commit('setFriendList', obj);
 })
 
-document.addEventListener('touchstart', (e) => {
-  if(!e.target.className) {
-    return;
-  }
-  if (e.target.className.indexOf('emoji') > -1 || e.target.parentNode.className.indexOf('emoji') > -1) {
-    store.commit('setEmoji', true);
-  } else {
-    store.commit('setEmoji', false);
-  }
-});
-
-document.addEventListener('click', (e) => {
-  if (e.target.className.indexOf('emoji') > -1 || e.target.parentNode.className.indexOf('emoji') > -1) {
-    store.commit('setEmoji', true);
-  } else {
-    store.commit('setEmoji', false);
-  }
-});
+// document.addEventListener('touchstart', (e) => {
+//   if(!e.target.className) {
+//     return;
+//   }
+//   console.log(e.target.className);
+//   if (e.target.className.indexOf('emoji') > -1 || e.target.parentNode.className.indexOf('emoji') > -1) {
+//     store.commit('setEmoji', true);
+//   } else {
+//     store.commit('setEmoji', false);
+//   }
+// });
+
+// document.addEventListener('click', (e) => {
+//   if(!e.target.className) {
+//     return;
+//   }
+//   if (e.target.className.indexOf('emoji') > -1 || e.target.parentNode.className.indexOf('emoji') > -1) {
+//     store.commit('setEmoji', true);
+//   } else {
+//     store.commit('setEmoji', false);
+//   }
+// });
 
 /* eslint-disable no-new */
 new Vue({