修复了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 id="bottom-box"></view>
</view> </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_col">
<view class="flex_grow"> <view class="flex_grow">
<input type="text" class="content" v-model="content" placeholder="请输入聊天内容" @focus="focus" @confirm="send" <input type="text" class="content" v-model="content" placeholder="请输入聊天内容" @focus="focus" @confirm="send"
@ -30,7 +35,7 @@
</view> </view>
<button class="send" @tap="send">发送</button> <button class="send" @tap="send">发送</button>
</view> </view>
</view> </uni-transition>
<!-- <view v-show="showplc" :style="{'min-height': (keyboardHeight+200)+'px'}" class="placeholder">显示</view> --> <!-- <view v-show="showplc" :style="{'min-height': (keyboardHeight+200)+'px'}" class="placeholder">显示</view> -->
</view> </view>
</template> </template>
@ -66,6 +71,8 @@
TEXT: '', TEXT: '',
historyTextList: [], // token12000,使 historyTextList: [], // token12000,使
tempRes: '', // tempRes: '', //
socketing: false, //
showStop: false, //
scrollTop: 0, scrollTop: 0,
shouldScrollToBottom: true shouldScrollToBottom: true
} }
@ -102,7 +109,7 @@
// this.c_content = n; // this.c_content = n;
if (this.timer) clearInterval(this.timer); if (this.timer) clearInterval(this.timer);
let cl = this.c_content.length; let cl = this.c_content.length;
let nc = this.n_content.split('') let nc = this.n_content.split('');
this.timer = setInterval(() => { this.timer = setInterval(() => {
if (cl < nc.length) { if (cl < nc.length) {
this.c_content += nc[cl]; this.c_content += nc[cl];
@ -113,6 +120,8 @@
}) })
}) })
} else { } else {
// console.log(this.socketing==false, cl == nc.length);
if (this.socketing == false) this.showStop = false;
clearInterval(this.timer); clearInterval(this.timer);
this.$nextTick(() => { this.$nextTick(() => {
uni.pageScrollTo({ uni.pageScrollTo({
@ -121,7 +130,7 @@
}) })
} }
}, 60) }, 60)
} },
}, },
methods: { methods: {
copyText(str) { copyText(str) {
@ -255,6 +264,26 @@
this.ajax.loadText = '正在获取消息'; 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() { send() {
if (!this.content) { if (!this.content) {
@ -264,23 +293,7 @@
}) })
return; 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 = { let data = {
"id": new Date().getTime(), "id": new Date().getTime(),
@ -289,8 +302,6 @@
"pic": "/static/avatar.png" "pic": "/static/avatar.png"
} }
this.TEXT = this.content; this.TEXT = this.content;
this.n_content = '';
this.c_content = '';
this.talkList.push(data); this.talkList.push(data);
this.talkList.push({ this.talkList.push({
"id": new Date().getTime(), "id": new Date().getTime(),
@ -298,6 +309,9 @@
"type": 2, "type": 2,
"pic": "/static/avatar.png" "pic": "/static/avatar.png"
}); });
this.n_content = '';
this.c_content = '';
this.socketing = true;
// return ; // return ;
this.$nextTick(() => { this.$nextTick(() => {
// //
@ -316,7 +330,7 @@
let realThis = this; let realThis = this;
this.socketTask = uni.connectSocket({ this.socketTask = uni.connectSocket({
//url: encodeURI(encodeURI(myUrl).replace(/\+/g, '%2B')), //url: encodeURI(encodeURI(myUrl).replace(/\+/g, '%2B')),
url: 'wss://chat.lihaink.cn/chat', url: 'wss://chat.lihaink.cn/chat' + '?timestamp=' + Date.now(),
method: 'GET', method: 'GET',
success: res => { success: res => {
console.log(res, "ws成功连接...") 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)); else this.params = JSON.parse(JSON.stringify(this.historyTextList));
console.log(this.params);
this.isSurpass(); this.isSurpass();
realThis.socketTask.send({ // uni realThis.socketTask.send({ // uni
data: JSON.stringify(this.params), data: JSON.stringify(this.params),
success() { success() {
console.log('第一帧发送成功') console.log('第一帧发送成功');
} }
}); });
}); });
@ -368,6 +382,7 @@
console.log('收到API返回的内容', res.data); console.log('收到API返回的内容', res.data);
let obj = JSON.parse(res.data) let obj = JSON.parse(res.data)
// console.log(""+obj.payload); // console.log(""+obj.payload);
if(!realThis.wsLiveFlag) return ;
let dataArray = obj.payload.choices.text; let dataArray = obj.payload.choices.text;
for (let i = 0; i < dataArray.length; i++) { for (let i = 0; i < dataArray.length; i++) {
this.talkList[this.talkList.length - 1].content += dataArray[i].content; this.talkList[this.talkList.length - 1].content += dataArray[i].content;
@ -377,6 +392,7 @@
let temp = JSON.parse(res.data) let temp = JSON.parse(res.data)
// console.log("0726",temp.header.code) // console.log("0726",temp.header.code)
if (temp.header.code !== 0) { if (temp.header.code !== 0) {
this.socketing = false;
console.log(`${temp.header.code}:${temp.message}`); console.log(`${temp.header.code}:${temp.message}`);
realThis.socketTask.close({ realThis.socketTask.close({
success(res) { success(res) {
@ -390,6 +406,7 @@
} }
if (temp.header.code === 0) { if (temp.header.code === 0) {
if (res.data && temp.header.status === 2) { if (res.data && temp.header.status === 2) {
this.socketing = false;
this.historyTextList.push({ this.historyTextList.push({
"role": "assistant", "role": "assistant",
"content": this.tempRes "content": this.tempRes
@ -409,14 +426,14 @@
}) })
}, },
// //
isSurpass(){ isSurpass() {
let sum = this.params.reduce((accumulator, currentValue) => { let sum = this.params.reduce((accumulator, currentValue) => {
return accumulator + currentValue.content; return accumulator + currentValue.content;
}, ''); }, '');
if(sum.length>5000){ if (sum.length > 5000) {
this.params.shift(); this.params.shift();
return this.isSurpass(); return this.isSurpass();
}else { } else {
console.log(`本次发送${sum.length}`); console.log(`本次发送${sum.length}`);
return sum; return sum;
} }
@ -456,6 +473,7 @@
this.getMerHistory(); this.getMerHistory();
} }
}, },
// ,,
touchmove(e) { touchmove(e) {
uni.hideKeyboard() uni.hideKeyboard()
} }
@ -675,4 +693,12 @@
// transform: translateY(0); /* transform */ // transform: translateY(0); /* transform */
// transition: transform 0.3s ease; /* */ // transition: transform 0.3s ease; /* */
} }
.downsocket {
display: flex;
justify-content: center;
align-items: center;
background-color: #2573fb !important;
color: #fff !important;
}
</style> </style>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long