Merge branch 'feature/yi' of https://git.hshuishang.com/maguodong/uniapp-ZHSQ into feature/yi
This commit is contained in:
赵毅
commit
b37a945e42
@ -45,7 +45,7 @@
|
||||
<view class="input-container">
|
||||
<textarea v-model="inputMessage" :adjust-position="true" class="message-input" placeholder="请输入消息..."
|
||||
@confirm="sendMessage" @input="handleInput"></textarea>
|
||||
<button :disabled="!canSend || !client || !client.isConnected" class="send-btn" @tap="sendMessage">
|
||||
<button :disabled="!canSend || !client || !isConnected" class="send-btn" @tap="sendMessage">
|
||||
发送
|
||||
</button>
|
||||
</view>
|
||||
@ -88,8 +88,10 @@ export default {
|
||||
isLoadingHistory: false,
|
||||
// 心跳包定时器
|
||||
keepaliveTimer: null,
|
||||
selfClientId: uni.getStorageSync('openId'),
|
||||
// MQTT工具实例
|
||||
client: null,
|
||||
mqttConfig: {},
|
||||
// 重连失败提示定时器
|
||||
reconnectFailedTimer: null
|
||||
}
|
||||
@ -103,46 +105,46 @@ export default {
|
||||
this.chatTarget = JSON.parse(options.item)
|
||||
this.chatTarget.title = `客服${ this.chatTarget.employee_name }`
|
||||
}
|
||||
|
||||
// 创建MQTT工具实例
|
||||
// this.mqttUtils = new MqttUtils({
|
||||
// username: 'dev01',
|
||||
// password: '211561',
|
||||
// clientId: 'mqtt_8812321421_' + Math.random().toString(16).substr(2, 8),
|
||||
// protocolVersion: 3,
|
||||
// connectTimeout: 30 * 1000,
|
||||
// reconnectPeriod: 5000,
|
||||
// keepalive: 60,
|
||||
// clean: true,
|
||||
// // 配置重连参数
|
||||
// maxReconnectAttempts: 15,
|
||||
// reconnectExponentialBackoff: true
|
||||
// });
|
||||
// this.mqttUtils.connect()
|
||||
|
||||
// 初始化MQTT连接
|
||||
this.initChat()
|
||||
this.getMqttConfig()
|
||||
},
|
||||
onShow(){
|
||||
// 检查MQTT连接状态
|
||||
// if (this.mqttUtils && !this.mqttUtils.getIsConnected()) {
|
||||
// this.connectingStatus = '连接中...';
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
async connect(){
|
||||
const options = {
|
||||
clientId: 'mqtt_888888888'
|
||||
clientId: this.selfClientId
|
||||
}
|
||||
this.client = MqttUtils.connect(options)
|
||||
this.isConnected = !!this.client
|
||||
await this.subscribe()
|
||||
this.client.on('message', (topic, message) => {
|
||||
let de = new TextDecoder('utf-8')
|
||||
let msg = de.decode(message)
|
||||
let jsMsg = JSON.parse(msg)
|
||||
console.log('收到消息', topic, msg)
|
||||
if (jsMsg.send_client === this.selfClientId || jsMsg.receive_client === this.selfClientId) {
|
||||
console.log('接收或发送人是我')
|
||||
if (jsMsg.send_client === this.mqttConfig.clientId || jsMsg.receive_client === this.mqttConfig.clientId) {
|
||||
console.log('接收或发送人是我的聊天对象')
|
||||
this.messages.push({
|
||||
content: jsMsg.content,
|
||||
time: Date.now(),
|
||||
isSelf: jsMsg.send_client === this.selfClientId,
|
||||
isLoading: false
|
||||
})
|
||||
console.log('收到我的消息', this.messages)
|
||||
this.scrollToView = 'msg-' + (this.messages.length - 1)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
async subscribe(){
|
||||
if (this.isConnected && this.client) {
|
||||
this.client.subscribe('contact/message/receive_msg', { qos: 0 }, function(err){
|
||||
if (!err) {
|
||||
console.log('订阅成功')
|
||||
this.client.publish({ 'contact/message/send_msg': 0 }, 'hello mqtt')
|
||||
console.log('订阅成功', 'contact/message/receive_msg', { qos: 0 })
|
||||
} else {
|
||||
console.log('订阅失败:', err)
|
||||
this.connectingStatus = '订阅失败，请重试'
|
||||
@ -157,123 +159,7 @@ export default {
|
||||
try {
|
||||
// 显示连接状态
|
||||
this.connectingStatus = '连接中...'
|
||||
|
||||
await this.connect()
|
||||
// // 获取MQTT连接配置
|
||||
// await this.getMqttConfig();
|
||||
|
||||
// // 连接MQTT服务器
|
||||
// this.mqttUtils.connect();
|
||||
|
||||
// // 监听事件
|
||||
// this.mqttUtils.on('connect', (connack) => {
|
||||
// console.log('MQTT连接成功:', connack);
|
||||
// this.isConnected = true;
|
||||
// this.connectingStatus = '';
|
||||
|
||||
// // 订阅主题
|
||||
// this.mqttUtils.subscribe('contact/message/receive_msg', (err) => {
|
||||
// if (err) {
|
||||
// console.error('订阅失败:', err);
|
||||
// this.connectingStatus = '订阅失败，请重试';
|
||||
// } else {
|
||||
// console.log('订阅成功: contact/message/receive_msg');
|
||||
// // 加载历史消息
|
||||
// this.loadHistoryMessages();
|
||||
|
||||
// // 启动心跳包
|
||||
// this.startKeepalive();
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
// this.mqttUtils.on('error', (error) => {
|
||||
// console.log('MQTT连接错误:', error);
|
||||
// console.error('错误码:', error.code);
|
||||
// console.error('错误详情:', error.message);
|
||||
// this.isConnected = false;
|
||||
// this.connectingStatus = '连接失败，请检查网络';
|
||||
// });
|
||||
|
||||
// this.mqttUtils.on('disconnect', () => {
|
||||
// console.log('MQTT连接已断开');
|
||||
// })
|
||||
|
||||
// this.mqttUtils.on('message', (topic, message) => {
|
||||
// console.log('收到消息:', topic, message.toString());
|
||||
// try {
|
||||
// // 解析消息
|
||||
// let msgData;
|
||||
// if (typeof message === 'string') {
|
||||
// try {
|
||||
// msgData = JSON.parse(message);
|
||||
// } catch (e) {
|
||||
// console.error('消息解析失败', e);
|
||||
// return;
|
||||
// }
|
||||
// } else {
|
||||
// msgData = JSON.parse(message.toString());
|
||||
// }
|
||||
|
||||
// // 只处理与当前聊天对象相关的消息
|
||||
// if (msgData.receive_client === this.mqttConfig.clientId &&
|
||||
// msgData.send_client === this.chatTarget.openId) {
|
||||
|
||||
// // 添加到消息列表
|
||||
// this.messages.push({
|
||||
// id: `msg_${Date.now()}_${Math.random()}`,
|
||||
// content: msgData.content,
|
||||
// isSelf: false,
|
||||
// time: Date.now(),
|
||||
// isLoading: false
|
||||
// });
|
||||
|
||||
// // 滚动到底部
|
||||
// this.scrollToBottom();
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error('处理消息失败', error);
|
||||
// }
|
||||
// });
|
||||
|
||||
// this.mqttUtils.on('reconnect', (attempts, delay) => {
|
||||
// console.log('MQTT正在重连...', attempts, delay);
|
||||
// this.connectingStatus = `连接已断开，正在重连(${attempts})...`;
|
||||
// });
|
||||
|
||||
// this.mqttUtils.on('close', () => {
|
||||
// console.log('MQTT连接关闭');
|
||||
// this.isConnected = false;
|
||||
// this.connectingStatus = '连接已关闭';
|
||||
// this.stopKeepalive();
|
||||
// });
|
||||
|
||||
// this.mqttUtils.on('offline', () => {
|
||||
// console.log('MQTT离线');
|
||||
// this.isConnected = false;
|
||||
// this.connectingStatus = '离线，请检查网络';
|
||||
// this.stopKeepalive();
|
||||
// });
|
||||
|
||||
// this.mqttUtils.on('end', () => {
|
||||
// console.log('MQTT客户端结束');
|
||||
// this.isConnected = false;
|
||||
// this.connectingStatus = '客户端已结束';
|
||||
// this.stopKeepalive();
|
||||
// });
|
||||
|
||||
// // 添加重连失败事件监听
|
||||
// this.mqttUtils.on('reconnectFailed', () => {
|
||||
// console.error('MQTT重连失败，已达到最大重连次数');
|
||||
// this.connectingStatus = '连接失败，请检查网络后重试';
|
||||
|
||||
// // 5秒后尝试重新初始化连接
|
||||
// this.reconnectFailedTimer = setTimeout(() => {
|
||||
// console.log('重连失败后，尝试重新初始化连接');
|
||||
// this.initChat();
|
||||
// }, 5000);
|
||||
// });
|
||||
|
||||
} catch (error) {
|
||||
console.error('初始化聊天失败', error)
|
||||
this.connectingStatus = '连接失败，请重试'
|
||||
@ -289,29 +175,19 @@ export default {
|
||||
async getMqttConfig(){
|
||||
console.log('🚀 ~ getMqttConfig ~ getMqttConfig:', 11111)
|
||||
try {
|
||||
// // 直接使用已创建的MQTT实例的clientId
|
||||
// if (this.mqttUtils && this.mqttUtils.options.clientId) {
|
||||
// this.mqttConfig.clientId = this.mqttUtils.options.clientId;
|
||||
// return Promise.resolve();
|
||||
// }
|
||||
|
||||
// 如果没有已创建的实例或clientId，则通过API获取
|
||||
return new Promise((resolve, reject) => {
|
||||
const params = {
|
||||
worker_id: this.chatTarget.id || '',
|
||||
open_id: uni.getStorageSync('openId') || ''
|
||||
open_id: this.selfClientId || ''
|
||||
}
|
||||
request(apiArr.csGetToClientId, 'POST', params).then((res) => {
|
||||
console.log('聊天列表:', res)
|
||||
// 检查响应数据格式是否正确
|
||||
if (res && res.client_bind && res.client_bind.client_id_one && res.client_bind.client_id_two) {
|
||||
this.mqttConfig.clientId = res.client_bind.client_id_one // 登录人的open_id
|
||||
this.chatTarget.openId = res.client_bind.client_id_two // 接收方的open_id
|
||||
|
||||
// 如果MQTT实例已创建，更新clientId
|
||||
if (this.mqttUtils) {
|
||||
this.mqttUtils.options.clientId = this.mqttConfig.clientId
|
||||
}
|
||||
|
||||
this.mqttConfig.bind_id = res.client_bind.id
|
||||
resolve()
|
||||
} else {
|
||||
console.error('MQTT配置响应格式不正确:', res)
|
||||
@ -371,44 +247,26 @@ export default {
|
||||
// 发送消息
|
||||
sendMessage(){
|
||||
const content = this.inputMessage.trim()
|
||||
console.log('发送消息', content)
|
||||
if (!content || !this.client || !this.isConnected) return
|
||||
|
||||
// 创建消息对象
|
||||
const message = {
|
||||
id: `msg_${ Date.now() }_${ Math.random() }`,
|
||||
content: content,
|
||||
isSelf: true,
|
||||
time: Date.now(),
|
||||
isLoading: true
|
||||
}
|
||||
|
||||
// 添加到消息列表
|
||||
// this.messages.push(message);
|
||||
|
||||
// 滚动到底部
|
||||
this.scrollToBottom()
|
||||
|
||||
console.log('需要发送的对象', this.mqttConfig)
|
||||
// 按照用户提供的格式构建发送消息
|
||||
const msgData = {
|
||||
bind_id: 1, // 聊天列表的ID，这里暂时固定为1
|
||||
bind_id: this.mqttConfig.bind_id, // 聊天列表的ID，这里暂时固定为1
|
||||
send_client: this.mqttConfig.clientId, // 消息发送方open_id
|
||||
receive_client: this.chatTarget.openId, // 消息接收方open_id
|
||||
type: 1, // 消息类型，1表示文字消息
|
||||
content: content, // 消息内容
|
||||
receive_read_status: 2 // 接收方阅读状态
|
||||
}
|
||||
|
||||
console.log('发送消息', msgData)
|
||||
this.client.publish(
|
||||
'contact/message/send_msg', // 使用指定的发送消息主题
|
||||
JSON.stringify(msgData),
|
||||
{ Qos: 0 },
|
||||
(err) => {
|
||||
// 更新消息状态
|
||||
const index = this.messages.findIndex(m => m.id === message.id)
|
||||
if (index !== -1) {
|
||||
this.$set(this.messages[index], 'isLoading', false)
|
||||
}
|
||||
|
||||
if (err) {
|
||||
console.error('发送消息失败', err)
|
||||
// 可以在这里添加消息发送失败的处理逻辑
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user