优化聊天历史消息加载与MQTT连接配置

- 修改utils引用路径为绝对路径
- loadHistoryMessages方法添加await关键字确保异步执行
- 重构历史消息处理逻辑，直接更新消息列表
- MQTT连接配置增加SSL支持
- 更新MQTT连接地址为wxs协议
- 添加MQTT断开连接方法
- 关闭生产环境代码压缩以便调试
- 开启开发环境URL校验

packages/customerService/index/index.vue

@@ -57,7 +57,7 @@ packages/customerService/index/index
 </template>
 
 <script>
-import { menuButtonInfo, picUrl, request } from '../../../utils'
+import { menuButtonInfo, picUrl, request } from '@/utils'
 import { apiArr } from '@/api/customerService'
 import mqttTool from '@/utils/mqtt'
 
@@ -218,7 +218,7 @@ export default {
         // 连接成功后启动心跳包
         this.startKeepalive()
         // 连接成功后立即加载历史消息
-        this.loadHistoryMessages()
+        await this.loadHistoryMessages()
       } catch (error) {
         console.error('初始化聊天失败', error)
         this.connectingStatus = '连接失败，请检查网络'
@@ -321,15 +321,16 @@ export default {
 
           // 将获取到的历史消息添加到消息列表开头
           // 这里需要根据消息的发送方判断是否是自己发送的消息
-          const formattedMessages = historyMessages.map(msg => ({
+          historyMessages.map(msg => (
+              this.messages = [{
                 content: msg.content,
                 time: new Date(msg.create_time).getTime(),
                 isSelf: msg.send_client === this.chatTarget.openId,
                 isLoading: false
-          })).reverse() // 因为是按时间降序获取的，所以需要反转
+              }, ...this.messages])) // 因为是按时间降序获取的，所以需要反转
 
           // 添加到消息列表开头
-          this.messages = [...formattedMessages, ...this.messages]
+          // this.messages = [...formattedMessages, ...this.messages]
 
           // 增加页码
           this.pageNum++

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -17114,7 +17114,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _mqtt = _interopRequireDefault(__webpack_require__(/*! mqtt/dist/mqtt */ 300));
-var _vue = _interopRequireDefault(__webpack_require__(/*! vue */ 25));
 var _buffer = __webpack_require__(/*! buffer */ 53);
 // 引入Buffer，适配小程序环境
 
@@ -17134,13 +17133,14 @@ mqttTool.connect = function (params) {
     username: 'dev01',
     password: '211561',
     clean: true,
+    useSSL: true,
     reconnectPeriod: 1000,
     protocolVersion: 4,
     connectTimeout: 600000,
     cleanSession: false
   };
   var client = null;
-  client = _mqtt.default.connect('wx://api.hshuishang.com:8084/mqtt', options);
+  client = _mqtt.default.connect('wxs://gmqt.hshuishang.com:443/mqtt', options);
   console.log('WX', client);
   mqttTool.client = client;
 
@@ -17248,7 +17248,18 @@ mqttTool.publish = function (params) {
     });
   });
 };
-_vue.default.prototype.$mqtt = mqttTool;
+mqttTool.disconnect = function () {
+  return new Promise(function (resolve, reject) {
+    if (mqttTool.client == null) {
+      resolve('未连接');
+      console.log('App_text' + ':unconnect 未连接');
+      return;
+    }
+    mqttTool.client.end();
+    mqttTool.client = null;
+    resolve('连接终止');
+  });
+};
 var _default = mqttTool;
 exports.default = _default;
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../../HBuilderX/plugins/uniapp-cli/node_modules/webpack/buildin/global.js */ 3)))

unpackage/dist/dev/mp-weixin/project.config.json

@@ -7,7 +7,7 @@
     "urlCheck": false,
     "es6": false,
     "postcss": false,
-    "minified": true,
+    "minified": false,
     "newFeature": true,
     "bigPackageSizeSupport": true
   },

unpackage/dist/dev/mp-weixin/project.private.config.json

@@ -2,20 +2,8 @@
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
   "projectname": "uniapp-ZHSQ",
   "setting": {
-    "compileHotReLoad": true
+    "compileHotReLoad": true,
+    "urlCheck": true
   },
-  "libVersion": "3.9.1",
-  "condition": {
-    "miniprogram": {
-      "list": [
-        {
-          "name": "packages/customerService/changeService/index",
-          "pathName": "packages/customerService/changeService/index",
-          "query": "",
-          "scene": null,
-          "launchMode": "default"
-        }
-      ]
-    }
-  }
+  "libVersion": "3.9.1"
 }

utils/mqtt.js

@@ -1,13 +1,14 @@
 import mqtt from 'mqtt/dist/mqtt'
-import Vue from 'vue'
 // 引入Buffer，适配小程序环境
-import { Buffer } from 'buffer';
+import { Buffer } from 'buffer'
+
 // 挂载到全局，确保所有文件可访问
 if (typeof window !== 'undefined') {
-  window.Buffer = Buffer;
-} else if (typeof global !== 'undefined') {
-  global.Buffer = Buffer;
-}
+    window.Buffer = Buffer
+} else
+    if (typeof global !== 'undefined') {
+        global.Buffer = Buffer
+    }
 
 let mqttTool = {
     client: null
@@ -19,13 +20,14 @@ mqttTool.connect = function(params, callbacks = {}){
         username: 'dev01',
         password: '211561',
         clean: true,
+        useSSL: true,
         reconnectPeriod: 1000,
         protocolVersion: 4,
         connectTimeout: 600000,
         cleanSession: false
     }
     let client = null
-    client = mqtt.connect('wx://api.hshuishang.com:8084/mqtt', options)
+    client = mqtt.connect('wxs://gmqt.hshuishang.com:443/mqtt', options)
     console.log('WX', client)
     mqttTool.client = client
 
@@ -46,15 +48,15 @@ mqttTool.connect = function(params, callbacks = {}){
         client.on('reconnect', callbacks.onReconnect)
     }
 
-    client.on('connect', function() {
+    client.on('connect', function(){
         console.log('MQTT连接成功')
     })
 
-    client.on('error', function(error) {
+    client.on('error', function(error){
         console.log('MQTT连接错误:', error)
     })
 
-    client.on('reconnect', function() {
+    client.on('reconnect', function(){
         console.log('MQTT正在重连...')
     })
 
@@ -146,5 +148,16 @@ mqttTool.publish = function(params){
         })
     })
 }
-Vue.prototype.$mqtt = mqttTool
+mqttTool.disconnect = function(){
+    return new Promise((resolve, reject) => {
+        if (mqttTool.client == null) {
+            resolve('未连接')
+            console.log('App_text' + ':unconnect 未连接')
+            return
+        }
+        mqttTool.client.end()
+        mqttTool.client = null
+        resolve('连接终止')
+    })
+}
 export default mqttTool