feat：生产环境配置&断线重连回调

.env.production

@@ -1,5 +1,4 @@
 NODE_ENV=production
-VUE_APP_BASE_API=''
-VUE_APP_BASE_URL='/jyapi'
+VUE_APP_BASE_API='/jyapi'
+VUE_APP_BASE_URL=''
 VUE_APP_BASE_PUBLIC=''
-VUE_APP_WEBSOCKET_URL='ws://'

src/store/modules/webSocket.js

@@ -8,10 +8,14 @@ export default {
     message: null, // 接收到的消息
     timeoutObj: null,
     serverTimeoutObj: null, // 心跳倒计时
-    timeoutNum: null // 断开 重连倒计时
+    timeoutNum: null, // 断开 重连倒计时
+    socketParams: {}, // websocket连接接收参数
+    reconnectState: false
   },
   mutations: {
     webSocketInit (state, params) {
+      state.socketParams = params
+      console.log(params, 'params')
       if (state.webSocket) {
         return
       }
@@ -37,6 +41,10 @@ export default {
         if (params && params.callback) {
           params.callback && params.callback()
         }
+        // 如果是重连传的有值 将state里存得重连状态置为true
+        if (params && params.reconnectStatus) {
+          state.reconnectStatus = true
+        }
       }
       // 接收消息
       state.webSocket.onmessage = res => {
@@ -97,7 +105,8 @@ export default {
       state.timeoutNum && clearTimeout(state.timeoutNum)
       state.timeoutNum = setTimeout(() => {
         // 新连接
-        that.commit('webSocket/webSocketInit')
+        Object.assign(state.socketParams, { reconnectStatus: true })
+        that.commit('webSocket/webSocketInit', state.socketParams)
         state.lockReconnect = false
       }, 5000)
     },
@@ -108,7 +117,8 @@ export default {
     }
   },
   getters: {
-    socketMsg: state => state.message
+    socketMsg: state => state.message,
+    socketStatus: state => state.reconnectStatus
   },
   actions: {
     webSocketInit ({ commit }, params) {

src/views/ChatView.vue

@@ -51,7 +51,7 @@
                   </a>
                   <div v-else class="message-box-flex">
                     <div class="msg-text-box" :class="{'self-msg': item.fool === 1}">
-                      <a class="hyper-link" v-if="isHyperlink(item.content)" :href="item.content">{{item.content}}</a>
+                      <a class="hyper-link" v-if="isHyperlink(item.content)" :href="item.content" target="_blank">{{item.content}}</a>
                       <span v-else v-html="formatSpace(item.content)"></span>
                     </div>
                     <el-popover
@@ -66,7 +66,7 @@
                       <div class="answer-box">
                         <div class="answer-list" v-for="(answer, i) in answerList" :key="i">
                           <span class="a-answer">{{answer.answer}}</span>
-                          <span class="a-send" @click="sendAnswer(answer.answer)">发送答案</span>
+                          <span class="a-send" @click="sendAnswer(answer.answer, 'popover-' + index)">发送答案</span>
                         </div>
                       </div>
                       <div slot="reference" class="recommend-btn" @click="getThreeAnswer(item.content, 'popover-' + index)">推荐回答</div>
@@ -297,8 +297,9 @@ export default {
       }
     },
     // 发送答案
-    sendAnswer (text) {
+    sendAnswer (text, ref) {
       this.$emit('send-answer', text)
+      // this.$refs[ref].doClose()
     },
     formatSpace (val) {
       if (!val) return
@@ -571,6 +572,9 @@ export default {
 .answer-popper{
   min-width: 0;
   padding: 0;
+  .answer-box{
+    max-width: 400px;
+  }
   .answer-list{
     display: flex;
     align-items: center;

src/views/CustomerServiceView.vue

@@ -119,7 +119,7 @@ export default {
   },
   computed: {
     ...mapState('message', ['kfSessionBadge']),
-    ...mapGetters('webSocket', ['socketMsg']),
+    ...mapGetters('webSocket', ['socketMsg', 'socketStatus']),
     getActionList () {
       return ['image']
     },
@@ -167,6 +167,11 @@ export default {
     socketMsg (val) {
       // 监听接收到的消息，进行处理
       this.todoMessage(val)
+    },
+    socketStatus (val) {
+      // 监听websocket重连状态
+      console.log(val, '重连状态')
+      this.todoReconnect(val)
     }
   },
   created () {
@@ -219,6 +224,21 @@ export default {
         })
       }
     },
+    /**
+     * 重连后需要执行得操作
+     */
+    todoReconnect (flag) {
+      // 重连后需要重新设置客服身份 读取当前会话得历史数据
+      if (flag) {
+        const kfInfo = {
+          type: 3,
+          headImg: this.login.headImg,
+          nickName: this.login.nickName
+        }
+        this.webSocketSend(kfInfo)
+        this.getFindMessage()
+      }
+    },
     /**
      * 处理websocket接收到的消息 根据type值判断
      */
@@ -337,8 +357,10 @@ export default {
         this.msgList.push(params)
         this.$nextTick(() => {
           this.$refs?.userSide.setScrollTop()
-          this.showMsgBox = false
         })
+        if (rUserId === this.other.userId) {
+          this.showMsgBox = false
+        }
         // 移除存储的会话标识
         const storageBadge = this.kfSessionBadge
         if (storageBadge && Object.keys(storageBadge).length > 0) {

src/views/CustomerView.vue

@@ -100,7 +100,7 @@ export default {
   },
   computed: {
     ...mapState('message', ['userSessionBadge', 'robotExcuse']),
-    ...mapGetters('webSocket', ['socketMsg']),
+    ...mapGetters('webSocket', ['socketMsg', 'socketStatus']),
     // 聊天框操作配置项
     getActionList () {
       if (this.other.userType === 1) {
@@ -147,6 +147,10 @@ export default {
     socketMsg (val) {
       // 监听接收到的消息，进行处理
       this.todoMessage(val)
+    },
+    socketStatus (val) {
+      console.log(val, '重连状态')
+      this.todoReconnect(val)
     }
   },
   created () {
@@ -166,7 +170,9 @@ export default {
     this.getUserListFn()
     this.getMessageCountFn()
   },
-  mounted () {},
+  mounted () {
+    // this.robotOvertimeReply()
+  },
   methods: {
     ...mapMutations({
       setUserSessionBadge: 'message/setUserSessionBadge', // 存储用户会话标识
@@ -214,6 +220,16 @@ export default {
         })
       }
     },
+    /**
+     * 重连后需要执行得操作
+     */
+    todoReconnect (flag) {
+      // 重连后需要重新设置客服身份 读取当前会话得历史数据
+      if (flag) {
+        this.getUserListFn()
+        this.getFindMessage()
+      }
+    },
     // 处理websocket接收的数据
     todoMessage (res) {
       const data = JSON.parse(res.data)
@@ -546,7 +562,18 @@ export default {
         }
       })
     },
-    // 分页查询聊天内容
+    /**
+     * 与机器人聊-超时自动回复
+     */
+    robotOvertimeReply () {
+      if (this.other.isRobot) {
+        const list = this.getMsgList
+        console.log(list, 'list')
+      }
+    },
+    /**
+     * 分页查询聊天内容
+     */
     async getFindMessage (lastId = 0, scrollFlag = true) {
       const msgType = this.other.userType === 2 ? 2 : 5
       const params = {
@@ -613,8 +640,8 @@ export default {
           const msgSocket = {
             type: 6,
             content: content,
-            nickName: this.login.nickName,
-            headImg: this.login.headImg,
+            // nickName: this.login.nickName,
+            // headImg: this.login.headImg,
             contentType: isHyperlink(content) ? 2 : 1,
             sUserType: 2,
             rUserId: this.other.userId,

vue.config.js

@@ -54,7 +54,7 @@ module.exports = defineConfig({
         }
       },
       '^/api': {
-        target: 'http://192.168.3.128:8077',
+        target: 'http://192.168.3.240:8077',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {