修复了APP端断开weboscket连接后,重新连接时还会接收上一次消息的bug,新增了中断按钮,新增了动画效果
This commit is contained in:
parent
228dee5dbd
commit
41588cddb3
|
@ -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 {
|
||||
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
Loading…
Reference in New Issue