feat(desktop): connection support disconnect and offline event

src/lang/connections.ts

@@ -866,4 +866,11 @@ export default {
     ja: '保持メッセージの取り扱い',
     hu: 'Üzenetmegőrzés kezelése',
   },
+  onDisconnect: {
+    zh: '服务器已主动断开连接',
+    en: 'The Broker has actively disconnected',
+    tr: 'Sunucu aktif bir şekilde bağlantıyı kesmiştir',
+    ja: 'サーバーから積極的に接続が切断されました',
+    hu: 'A kiszolgáló aktívan bontotta a kapcsolatot',
+  },
 }

src/views/connections/ConnectionsDetail.vue

@@ -281,7 +281,7 @@
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
 import { ipcRenderer } from 'electron'
-import { MqttClient, IConnackPacket, IPublishPacket, IClientPublishOptions } from 'mqtt'
+import { MqttClient, IConnackPacket, IPublishPacket, IClientPublishOptions, IDisconnectPacket } from 'mqtt'
 import _ from 'lodash'
 import { Subject, fromEvent } from 'rxjs'
 import { bufferTime, map, filter, takeUntil } from 'rxjs/operators'
@@ -567,6 +567,8 @@ export default class ConnectionsDetail extends Vue {
         this.client.on('connect', this.onConnect)
         this.client.on('error', this.onError)
         this.client.on('reconnect', this.onReConnect)
+        this.client.on('disconnect', this.onDisconnect)
+        this.client.on('offline', this.onOffline)
         this.onMessageArrived(this.client as MqttClient, id)
       }
 
@@ -586,7 +588,7 @@ export default class ConnectionsDetail extends Vue {
     } catch (error) {
       const err = error as Error
       this.connectLoading = false
-      this.notifyErrorWithCopilot(err.toString())
+      this.notifyMsgWithCopilot(err.toString())
     }
   }
 
@@ -933,7 +935,7 @@ export default class ConnectionsDetail extends Vue {
   }
 
   private handleSubTopicError(errMsg: string, info?: string) {
-    this.notifyErrorWithCopilot(errMsg, info, () => {
+    this.notifyMsgWithCopilot(errMsg, info, () => {
       this.subListRef.showDialog = false
     })
   }
@@ -1021,7 +1023,7 @@ export default class ConnectionsDetail extends Vue {
       msgTitle = error.toString()
     }
     this.forceCloseTheConnection()
-    this.notifyErrorWithCopilot(msgTitle)
+    this.notifyMsgWithCopilot(msgTitle)
     this.$log.error(`${this.record.name} connect fail, MQTT.js onError trigger, ${error.stack}`)
     this.$emit('reload')
   }
@@ -1065,6 +1067,22 @@ export default class ConnectionsDetail extends Vue {
     this.connectLoading = false
   }
 
+  // Emitted after receiving disconnect packet from broker. MQTT 5.0 feature.
+  private onDisconnect(packet: IDisconnectPacket) {
+    this.notifyMsgWithCopilot(this.$tc('connections.onDisconnect'), JSON.stringify(packet), () => {}, 'warning')
+    const logMessage = `Received disconnect packet from Broker. MQTT.js onDisconnect trigger, the packet details: ${JSON.stringify(
+      packet,
+    )}`
+    this.$log.warn(logMessage)
+  }
+
+  // Emitted when the client goes offline.
+  private onOffline() {
+    this.$log.info(
+      `The connection ${this.record.name} (clientID ${this.record.clientId}) is offline. MQTT.js onOffline trigger.`,
+    )
+  }
+
   private forceCloseTheConnection() {
     this.client.end!(true)
     this.reTryConnectTimes = 0
@@ -1785,11 +1803,19 @@ export default class ConnectionsDetail extends Vue {
   }
 
   /**
-   * Notifies the user with an error message using the Copilot feature.
+   * Notifies the user with a message and provides an option to ask Copilot for assistance.
    *
-   * @param {string} msgTitle - The title of the error message.
+   * @param {string} msgTitle - The title of the message.
+   * @param {string} promptInfo - Additional information to prompt the user.
+   * @param {function} callback - The callback function to be executed after asking Copilot.
+   * @param {string} type - The type of the message ('error' or 'warning') defualt error.
    */
-  private notifyErrorWithCopilot(msgTitle: string, promptInfo?: string, callback?: () => void) {
+  private notifyMsgWithCopilot(
+    msgTitle: string,
+    promptInfo?: string,
+    callback?: () => void,
+    type: 'error' | 'warning' = 'error',
+  ) {
     const askCopilotButton = `
       <button id="notify-copilot-button">Ask Copilot</button>
     `
@@ -1798,7 +1824,7 @@ export default class ConnectionsDetail extends Vue {
       title: msgTitle,
       dangerouslyUseHTMLString: true,
       message,
-      type: 'error',
+      type,
       duration: 4000,
       offset: 30,
     })