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

This commit is contained in:
weipengfei 2023-09-22 14:26:12 +08:00
parent 228dee5dbd
commit 41588cddb3
3 changed files with 1232 additions and 836 deletions

View File

@ -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, // APPBUG,code1000,,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 {
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
}
this.showStop = true;
//
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
@ -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>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long