修复了APP端断开weboscket连接后,重新连接时还会接收上一次消息的bug,新增了中断按钮,新增了动画效果

pages/index/index.vue

@@ -22,7 +22,12 @@
         <view id="bottom-box"></view>
       </view>
     </view>
-    <view class="box-2">
+    <uni-transition custom-class="box-2" mode-class="slide-left" :show="showStop">
+      <view class="flex_col">
+        <view class="flex_grow content downsocket" @click="closeSocketTask">中断连接</view>
+      </view>
+    </uni-transition>
+    <uni-transition custom-class="box-2" mode-class="slide-right" :show="!showStop">
       <view class="flex_col">
         <view class="flex_grow">
           <input type="text" class="content" v-model="content" placeholder="请输入聊天内容" @focus="focus" @confirm="send"
@@ -30,7 +35,7 @@
         </view>
         <button class="send" @tap="send">发送</button>
       </view>
-    </view>
+    </uni-transition>
     <!-- <view v-show="showplc" :style="{'min-height': (keyboardHeight+200)+'px'}" class="placeholder">显示</view> -->
   </view>
 </template>
@@ -66,6 +71,8 @@
         TEXT: '',
         historyTextList: [], // 历史会话信息，由于最大token12000,可以结合实际使用，进行移出
         tempRes: '', // 临时答复保存
+        socketing: false, // 是否正在接收
+        showStop: false, // 是否显示中断按钮
         scrollTop: 0,
         shouldScrollToBottom: true
       }
@@ -102,7 +109,7 @@
         // this.c_content = n;
         if (this.timer) clearInterval(this.timer);
         let cl = this.c_content.length;
-        let nc = this.n_content.split('')
+        let nc = this.n_content.split('');
         this.timer = setInterval(() => {
           if (cl < nc.length) {
             this.c_content += nc[cl];
@@ -113,6 +120,8 @@
               })
             })
           } else {
+            // console.log(this.socketing==false, cl == nc.length);
+            if (this.socketing == false) this.showStop = false;
             clearInterval(this.timer);
             this.$nextTick(() => {
               uni.pageScrollTo({
@@ -121,7 +130,7 @@
             })
           }
         }, 60)
-      }
+      },
     },
     methods: {
       copyText(str) {
@@ -255,6 +264,26 @@
           this.ajax.loadText = '正在获取消息';
         }
       },
+      // 关闭连接
+      closeSocketTask() {
+        try {
+          clearInterval(this.timer);
+          this.talkList[this.talkList.length - 1].content = this.c_content + '';
+          // console.log(this.talkList[this.talkList.length - 1].content);
+          // this.c_content = '';
+          // this.n_content = '';
+          this.socketTask.close({
+            code: 500,      // APP端存在BUG,正常关闭的code为1000,无法正常关闭,需要将code换为其他值
+            complete: (res)=>{
+              this.showStop = false;
+              console.log('主动断开', res);
+              this.wsLiveFlag = false;
+            }
+          })
+        } catch (e) {
+          //TODO handle the exception
+        }
+      },
       // 发送信息
       send() {
         if (!this.content) {
@@ -264,23 +293,7 @@
           })
           return;
         }
-        try {
+        this.showStop = true;
-          clearInterval(this.timer);
-          this.talkList[this.talkList.length - 1].content = this.c_content + '';
-          this.c_content = '';
-          this.n_content = '';
-          this.socketTask.close({
-            success: (res) => {
-              console.log('关闭成功', res);
-              this.wsLiveFlag = false;
-            },
-            fail(err) {
-              console.log('关闭失败', err)
-            }
-          })
-        } catch (e) {
-          //TODO handle the exception
-        }
         // 将当前发送信息 添加到消息列表。
         let data = {
           "id": new Date().getTime(),
@@ -289,8 +302,6 @@
           "pic": "/static/avatar.png"
         }
         this.TEXT = this.content;
-        this.n_content = '';
-        this.c_content = '';
         this.talkList.push(data);
         this.talkList.push({
           "id": new Date().getTime(),
@@ -298,6 +309,9 @@
           "type": 2,
           "pic": "/static/avatar.png"
         });
+        this.n_content = '';
+        this.c_content = '';
+        this.socketing = true;
         // return ;
         this.$nextTick(() => {
           // 清空内容框中的内容
@@ -316,7 +330,7 @@
         let realThis = this;
         this.socketTask = uni.connectSocket({
           //url: encodeURI(encodeURI(myUrl).replace(/\+/g, '%2B')),
-          url: 'wss://chat.lihaink.cn/chat',
+          url: 'wss://chat.lihaink.cn/chat' + '?timestamp=' + Date.now(),
           method: 'GET',
           success: res => {
             console.log(res, "ws成功连接...")
@@ -351,14 +365,14 @@
           //     }
           //   }
           // };
-          if (this.historyTextList.length > 9) this.params = JSON.parse(JSON.stringify(this.historyTextList.splice(-9)));
+          if (this.historyTextList.length > 9) this.params = JSON.parse(JSON.stringify(this.historyTextList
+            .splice(-9)));
           else this.params = JSON.parse(JSON.stringify(this.historyTextList));
-          console.log(this.params);
           this.isSurpass();
           realThis.socketTask.send({ // 发送消息，，都用uni的官方版本
             data: JSON.stringify(this.params),
             success() {
-              console.log('第一帧发送成功')
+              console.log('第一帧发送成功');
             }
           });
         });
@@ -368,6 +382,7 @@
           console.log('收到API返回的内容：', res.data);
           let obj = JSON.parse(res.data)
           // console.log("我打印的"+obj.payload);
+          if(!realThis.wsLiveFlag) return ;
           let dataArray = obj.payload.choices.text;
           for (let i = 0; i < dataArray.length; i++) {
             this.talkList[this.talkList.length - 1].content += dataArray[i].content;
@@ -377,6 +392,7 @@
           let temp = JSON.parse(res.data)
           // console.log("0726",temp.header.code)
           if (temp.header.code !== 0) {
+            this.socketing = false;
             console.log(`${temp.header.code}:${temp.message}`);
             realThis.socketTask.close({
               success(res) {
@@ -390,6 +406,7 @@
           }
           if (temp.header.code === 0) {
             if (res.data && temp.header.status === 2) {
+              this.socketing = false;
               this.historyTextList.push({
                 "role": "assistant",
                 "content": this.tempRes
@@ -409,14 +426,14 @@
         })
       },
       // 判断文字是否超过五千字
-      isSurpass(){
+      isSurpass() {
         let sum = this.params.reduce((accumulator, currentValue) => {
           return accumulator + currentValue.content;
         }, '');
-        if(sum.length>5000){
+        if (sum.length > 5000) {
           this.params.shift();
           return this.isSurpass();
-        }else {
+        } else {
           console.log(`本次发送${sum.length}字`);
           return sum;
         }
@@ -456,6 +473,7 @@
           this.getMerHistory();
         }
       },
+      // 当滑动页面时,收起键盘,与微信聊天效果保持一致
       touchmove(e) {
         uni.hideKeyboard()
       }
@@ -675,4 +693,12 @@
     // transform: translateY(0); /* 初始化 transform 属性 */
     // transition: transform 0.3s ease; /* 添加过渡效果 */
   }
+
+  .downsocket {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #2573fb !important;
+    color: #fff !important;
+  }
 </style>