聊天实时

src/layout/header/notice.vue

@@ -7,8 +7,9 @@
 </template>
 
 <script>
+import _ from 'lodash';
 import WS from '../../util/websocket';
-import { mapState, createNamespacedHelpers } from 'vuex';
+import { mapState, createNamespacedHelpers, mapMutations } from 'vuex';
 const { mapActions } = createNamespacedHelpers('shopNotice');
 export default {
   name: 'notice',
@@ -31,50 +32,73 @@ export default {
   },
   methods: {
     ...mapActions(['cnr']),
+    ...mapMutations(['setMessage']),
     async initWebSocket() {
       const shop_id = _.get(this.user, 'shop._id');
-      const url = `ws://localhost:12214/dev/point/chat/v1/api/ws`;
-      const ws = new WS(url, shop_id, (res) => console.log(res));
-    },
-
-    toNotice() {
-      this.$router.push({ path: `/selfShop/notice` });
-    },
-    async getNotRead() {
-      const res = await this.cnr(this.user.shop._id);
-      if (this.$checkRes(res)) {
-        this.$set(this, `notice`, res.data);
-      }
-    },
-    channel() {
-      const shop_id = _.get(this.user, 'shop._id');
-      if (!shop_id) return;
-      this.$stomp({
-        [`/exchange/${this.$ex}/${shop_id}`]: this.onMessage,
+      // const url = `ws://192.168.1.197:12214/dev/point/chat/v1/api/ws`;
+      const url = `ws://broadcast.waityou24.cn/dev/point/chat/v1/api/ws`;
+      const ws = new WS(url, shop_id, (res) => {
+        console.log(res);
+        if (res.data != 'connect success') this.onMessage(res.data);
       });
     },
     onMessage(message) {
-      let body = message.body;
-      if (!body) return;
-      body = JSON.parse(body);
-      const type = body.type;
+      let data = JSON.parse(message);
+      let type = data.type;
+      console.log(type);
       if (type === 'shopMsg') {
-        // this.$notify({
-        //   title: '新消息',
-        //   message: '您有新的消息,请注意及时处理!',
-        //   position: 'top-right',
-        //   type: 'warning',
-        // });
-        // this.getNotRead();
-      } else if (type === 'chat') {
-        this.$notify({
+        this.instance = this.$notify({
           title: '新消息',
-          message: '有顾客进行咨询,请及时回复!',
+          message: '您有新的消息,请注意及时处理!',
           position: 'top-right',
           type: 'warning',
+          onClick: () => {
+            this.close();
+            this.toNotice();
+          },
         });
+        this.getNotRead();
+      } else if (type === 'chat') {
+        if (this.$route.path === '/selfShop/message') this.setMessage(data);
+        else {
+          this.instance = this.$notify({
+            title: '新消息',
+            message: '有顾客进行咨询,请及时回复!',
+            position: 'top-right',
+            type: 'warning',
+            onClick: () => {
+              this.close();
+              this.toApproval();
+            },
+          });
+        }
       }
     },
+    close() {
+      this.instance.close();
+    },
+    // 系统提示
+    toNotice() {
+      if (this.$route.path != '/selfShop/notice') this.$router.push({ path: `/selfShop/notice` });
+      else this.$message({ type: `warning`, message: `已在该页面` });
+    },
+    // 聊天
+    toApproval() {
+      if (this.$route.path != '/selfShop/message') this.$router.push({ path: `/selfShop/message` });
+      else this.$message({ type: `warning`, message: `已在该页面` });
+    },
+    // 查询未读消息数量
+    async getNotRead() {
+      const res = await this.cnr(this.user.shop._id);
+      if (this.$checkRes(res)) this.$set(this, `notice`, res.data);
+    },
+    // channel() {
+    //   const shop_id = _.get(this.user, 'shop._id');
+    //   if (!shop_id) return;
+    //   this.$stomp({
+    //     [`/exchange/${this.$ex}/${shop_id}`]: this.onMessage,
+    //   });
+    // },
   },
 };
 </script>

src/store/index.js

@@ -82,8 +82,13 @@ import room from './module/message/room';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: { ...ustate },
-  mutations: { ...umutations },
+  state: { ...ustate, msg: undefined },
+  mutations: {
+    ...umutations,
+    setMessage(state, payload) {
+      state.msg = payload;
+    },
+  },
   actions: {},
   modules: {
     users,

src/util/websocket.js

@@ -56,9 +56,9 @@ class websocketUtil {
   //开启心跳检测
   start() {
     this.heartbeatInterval = setTimeout(() => {
-      this.data = { value: 'ping', method: 'heartBeat' };
-      console.log(this.data);
-      this.send(JSON.stringify(this.data));
+      // this.data = { value: 'ping', method: 'heartBeat' };
+      // console.log(this.data);
+      // this.send(JSON.stringify(this.data));
     }, this.timeout);
   }
   //重新连接

src/views/selfShop/message/index.vue

@@ -41,7 +41,6 @@ const moment = require('moment');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: room } = createNamespacedHelpers('room');
 const { mapActions: users } = createNamespacedHelpers('users');
-const { mapActions: address } = createNamespacedHelpers('address');
 const { mapActions: chatRecord } = createNamespacedHelpers('chatRecord');
 
 export default {
@@ -55,8 +54,6 @@ export default {
   data: function () {
     return {
       loadings: false,
-      searchName: '',
-      searchInfo: {},
       // 聊天房间列表
       roomList: [],
       // 聊天记录
@@ -76,8 +73,7 @@ export default {
       form: {},
       // 判断显示聊天记录
       show: '0',
-      // 判断显示地址
-      add: '0',
+      message: {},
     };
   },
   created() {
@@ -87,7 +83,6 @@ export default {
   },
   methods: {
     ...users({ userFetch: 'fetch' }),
-    ...address({ addFetch: 'fetch' }),
     ...room({ roomQuery: 'query', roomFetch: 'fetch', roomDelete: 'delete' }),
     ...chatRecord(['query', 'delete', 'fetch', 'update', 'create', 'read']),
     // 查询
@@ -167,8 +162,8 @@ export default {
         let data = { _id: res.data.room, customer: this.customer, shop: this.shop };
         this.toClose();
         this.search();
-        if (this.customer_id) this.searchDetail();
-        if (!this.customer_id) this.toView(data);
+        if (this.customer_id == this.customer._id) this.searchDetail();
+        else this.toView(data);
       }
     },
     // 关闭
@@ -181,8 +176,19 @@ export default {
       this.$set(this, `shop`, this.user.shop);
     },
   },
+  watch: {
+    msg: {
+      handler(val, oVal) {
+        if (val) {
+          if (this.customer && this.customer._id && this.form.room) this.toView({ customer: this.customer, _id: this.form.room });
+          else if (this.customer && this.customer._id) this.toView({ customer: this.customer });
+          this.search();
+        }
+      },
+    },
+  },
   computed: {
-    ...mapState(['user']),
+    ...mapState(['user', 'msg']),
     customer_id() {
       return this.$route.query.customer_id;
     },
@@ -204,7 +210,7 @@ export default {
     text-align: center;
     font-size: 300px;
     color: #ccc;
-    padding: 10% 0;
+    padding: 4% 0;
     height: 80vh;
     overflow-y: auto;
   }