要在微信小程序实现聊天对话功能,回话是流式应答,这里使用了WebSocket技术。WebSocket大家应该都很熟悉,使用wx.connectSocket就可以了。这里可能需要注意下的是流式应答,后端如何发送,前端如何接收。直接上代码:
可以扫码体验:
后端关键代码:
// 定义正则表达式
String regex = "data:\\s*(\\{.*\\})";
// 创建Pattern对象
Pattern pattern = Pattern.compile(regex);
String line;
while ((line = reader.readLine()) != null) {
// 处理每条数据
// System.out.println(line);
// 创建Matcher对象
Matcher matcher = pattern.matcher(line);
// 查找匹配项
if (matcher.find()) {
String dataValue = matcher.group(1);
JSONObject jsonObject = JSON.parseObject(dataValue);
String content = jsonObject.getString("result");
Boolean end = jsonObject.getBoolean("is_end");
JSONObject data = new JSONObject();
data.put("content", content);
data.put("end", end);
data.put("type", "message");
webSocketServer.sendInfo(uid.toString(), data.toJSONString());
}
}
小程序ts代码:
data: {
messages: [], // 聊天消息列表
inputValue: '', // 输入框的值
ask: '', // 输入框的值
socketOpen: false, // WebSocket 连接状态
socketTask: null, // WebSocket 实例
answering: false, // 回答中。。。
type: 2,
credit: 0,
scrollTop: 0,
}
scrollToBottom() {
// 在需要滚动到最底部的时机
const query = wx.createSelectorQuery();
query.select('.chat-container').boundingClientRect();
query.select('.msgList').boundingClientRect();
query.exec(res => {
const scorllHeight = res[0].height;
const listHeight = res[1].height;
this.setData({
scrollTop: listHeight - scorllHeight + 92
});
});
},
async onLoad() {
const chatList = 历史聊天记录;
const chatListMessage: any = [];
if (chatList && chatList.length > 0) {
chatList.map((v: any) => {
const ask = {
sender: 'user',
avatar: '',
content: v.ask,
createTime: v.createTime,
id: v.id,
};
const answer = {
sender: 'chat',
avatar: 'xxx',
content: v.answer,
id: v.id,
}
chatListMessage.push(ask);
chatListMessage.push(answer);
})
}
// 初始化聊天消息列表,包含一条欢迎消息
const messages: any = [
{
sender: 'chat',
avatar: 'xxx',
content: `欢迎`
},
...this.data.messages,
...chatListMessage
]
// @ts-ignore
this.setData({ messages });
this.scrollToBottom();
},
//滾動到底部
bindscroll() {
// console.log(1);
},
onUnload: function () {
// 页面卸载时关闭 WebSocket 连接
this.closeSocket();
},
inputChange: function (e: any) {
// 监听输入框值的变化
this.setData({
inputValue: e.detail.value
});
},
async sendMessage() {
// 发送消息
const message = this.data.inputValue;
if (message.trim() === '') {
showToast("请输入问题");
return;
}
// 添加用户发送的消息到聊天消息列表
const newMessage = {
sender: 'user',
avatar: '',
content: message
};
//@ts-ignore
this.data.messages.push(newMessage);
// 清空输入框
this.setData({
messages: this.data.messages,
inputValue: '',
});
this.data.ask = message;
// 发送消息到 Chat
this.sendToChat(message);
},
sendToChat: function (message: any) {
if (!this.data.socketOpen) {
// 如果 WebSocket 连接未打开,则创建连接
this.createSocket();
}
this.setData({ answering: true });
// 这里请求后台
// 处理 Chat 的回答消息
const newMessage: any = {
sender: 'chat',
avatar: '',
content: ""
};
//@ts-ignore
this.data.messages.push(newMessage);
// 更新聊天消息列表并滚动到最新消息
this.setData({ messages: this.data.messages });
this.scrollToBottom();
},
createSocket: function () {
// 创建 WebSocket 连接
const socketTask = wx.connectSocket({
url: ``, // 替换为你的 WebSocket 服务器地址
success: () => {
console.log('WebSocket 连接成功');
},
fail: (error) => {
console.error('WebSocket 连接失败', error);
}
});
// 监听 WebSocket 连接打开事件
socketTask.onOpen(() => {
console.log('WebSocket 连接已打开');
this.setData({
socketOpen: true,
socketTask: socketTask
});
});
// 监听 WebSocket 接收到服务器的消息事件
socketTask.onMessage((res: any) => {
const data = JSON.parse(res.data);
// console.log(data);
if (data.type === 'message') {
// 收到 Chat 的回答消息
this.handleChatResponse(data);
}
});
// 监听 WebSocket 连接关闭事件
socketTask.onClose(() => {
console.log('WebSocket 连接已关闭');
this.setData({
socketOpen: false,
socketTask: null
});
});
// 监听 WebSocket 错误事件
socketTask.onError((error) => {
console.error('WebSocket 错误', error);
});
},
closeSocket: function () {
if (this.data.socketOpen) {
// 关闭 WebSocket 连接
this.data.socketTask.close();
}
},
handleChatResponse: async function (data: any) {
// 处理 Chat 的回答消息
const index = this.data.messages.length - 1;
this.data.messages[index].content += data.content;
// 更新聊天消息列表并滚动到最新消息
this.setData({ messages: this.data.messages });
if (data.end) {
this.setData({ answering: false, messages: this.data.messages });
this.data.ask = "";
};
this.scrollToBottom();
},
可以扫码体验:文章来源:https://www.toymoban.com/news/detail-846170.html
文章来源地址https://www.toymoban.com/news/detail-846170.html
到了这里,关于微信小程序WebSocket实现stream流式聊天对话功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!