修复了APP端断开weboscket连接后,重新连接时还会接收上一次消息的bug,新增了中断按钮,新增了动画效果
This commit is contained in:
parent
228dee5dbd
commit
41588cddb3
|
@ -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, // APP端存在BUG,正常关闭的code为1000,无法正常关闭,需要将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
Loading…
Reference in New Issue