refactor(connection): remove client property on connection model

src/components/SubscriptionsList.vue

@@ -113,6 +113,14 @@ import { defineColors, getRandomColor } from '@/utils/colors'
 import LeftPanel from '@/components/LeftPanel.vue'
 import MyDialog from '@/components/MyDialog.vue'
 import VueI18n from 'vue-i18n'
+import { ClientSubscribeCallback, MqttClient } from 'mqtt'
+
+enum SubscribeErrorReason {
+  normal,
+  qosSubFailed, // qos is abnormal
+  qosSubSysFailed, // qos is abnormal becauseof $SYS subscribe
+  emptySubFailed, // subscription returns empty array
+}
 
 @Component({
   components: {
@@ -128,11 +136,13 @@ export default class SubscriptionsList extends Vue {
 
   @Action('SHOW_SUBSCRIPTIONS') private changeShowSubscriptions!: (payload: SubscriptionsVisible) => void
   @Action('CHANGE_SUBSCRIPTIONS') private changeSubs!: (payload: Subscriptions) => void
-  @Getter('activeConnection') private activeConnection: $TSFixed
+  @Getter('activeConnection') private activeConnection!: ActiveConnection
   @Getter('currentTheme') private theme!: Theme
 
   private topicColor = ''
-  private currentConnection: $TSFixed = {}
+  private client: Partial<MqttClient> = {
+    connected: false,
+  }
   private showDialog: boolean = false
   private subRecord: SubscriptionModel = {
     topic: 'testtopic/#',
@@ -196,7 +206,7 @@ export default class SubscriptionsList extends Vue {
 
   private saveSubs(): void | boolean {
     this.getCurrentConnection(this.connectionId)
-    if (!this.currentConnection.client || !this.currentConnection.client.connected) {
+    if (!this.client || !this.client.connected) {
       this.$message.warning(this.$t('connections.notConnect') as string)
       return false
     }
@@ -251,44 +261,45 @@ export default class SubscriptionsList extends Vue {
       this.subRecord.qos = qos
       this.subRecord.color = getRandomColor()
     }
-    this.currentConnection.client.subscribe(topic, { qos }, (error: string, res: SubscriptionModel[]) => {
-      if (error) {
-        this.$message.error(error)
-        this.$log.error(`Topic: ${topic} subscribe error ${error} `)
-        return false
-      }
-      let errorReason: SubscribeErrorReason = SubscribeErrorReason.normal
-      if (res.length < 1) {
-        errorReason = SubscribeErrorReason.emptySubFailed
-      } else if (![0, 1, 2].includes(res[0].qos) && topic.match(/^(\$SYS)/i)) {
-        errorReason = SubscribeErrorReason.qosSubSysFailed
-      } else if (![0, 1, 2].includes(res[0].qos)) {
-        errorReason = SubscribeErrorReason.qosSubFailed
-      }
-
-      if (errorReason !== SubscribeErrorReason.normal) {
-        const errorReasonMsg: VueI18n.TranslateResult = this.getErrorReasonMsg(errorReason)
-        const errorMsg: string = `${topic} ${this.$t('connections.subFailed')} ${errorReasonMsg}`
-        this.$log.error(`Topic: ${topic} subscribe error ${errorReasonMsg} `)
-        this.$message.error(errorMsg)
-        return false
-      }
-      const existTopicIndex: number = this.subsList.findIndex((item: SubscriptionModel) => item.topic === topic)
-      if (existTopicIndex !== -1) {
-        this.subsList[existTopicIndex].qos = qos
-      } else {
-        this.subsList.push({ ...this.subRecord })
-      }
-      this.record.subscriptions = this.subsList
-      updateConnection(this.record.id as string, this.record)
-      this.changeSubs({ id: this.connectionId, subscriptions: this.subsList })
-      this.showDialog = false
-      this.$log.info(`Topic: ${topic} successfully subscribed`)
-    })
+    if (this.client.subscribe) {
+      this.client.subscribe(topic, { qos }, (error, res) => {
+        if (error) {
+          this.$message.error(error)
+          this.$log.error(`Topic: ${topic} subscribe error ${error} `)
+          return false
+        }
+        let errorReason = SubscribeErrorReason.normal
+        if (res.length < 1) {
+          errorReason = SubscribeErrorReason.emptySubFailed
+        } else if (![0, 1, 2].includes(res[0].qos) && topic.match(/^(\$SYS)/i)) {
+          errorReason = SubscribeErrorReason.qosSubSysFailed
+        } else if (![0, 1, 2].includes(res[0].qos)) {
+          errorReason = SubscribeErrorReason.qosSubFailed
+        }
+        if (errorReason !== SubscribeErrorReason.normal) {
+          const errorReasonMsg: VueI18n.TranslateResult = this.getErrorReasonMsg(errorReason)
+          const errorMsg: string = `${topic} ${this.$t('connections.subFailed')} ${errorReasonMsg}`
+          this.$log.error(`Topic: ${topic} subscribe error ${errorReasonMsg} `)
+          this.$message.error(errorMsg)
+          return false
+        }
+        const existTopicIndex: number = this.subsList.findIndex((item: SubscriptionModel) => item.topic === topic)
+        if (existTopicIndex !== -1) {
+          this.subsList[existTopicIndex].qos = qos
+        } else {
+          this.subsList.push({ ...this.subRecord })
+        }
+        this.record.subscriptions = this.subsList
+        updateConnection(this.record.id as string, this.record)
+        this.changeSubs({ id: this.connectionId, subscriptions: this.subsList })
+        this.showDialog = false
+        this.$log.info(`Topic: ${topic} successfully subscribed`)
+      })
+    }
   }
 
   private removeSubs(row: SubscriptionModel): void | boolean {
-    if (!this.currentConnection.client || !this.currentConnection.client.connected) {
+    if (!this.client || !this.client.connected) {
       this.$notify({
         title: this.$t('connections.notConnect') as string,
         message: '',
@@ -299,26 +310,28 @@ export default class SubscriptionsList extends Vue {
       return false
     }
     const { topic, qos } = row
-    this.currentConnection.client.unsubscribe(topic, { qos }, (error: string) => {
-      if (error) {
-        this.$message.error(error)
-        return false
-      }
-      const payload: {
-        id: string
-        subscriptions: SubscriptionModel[]
-      } = {
-        id: this.record.id as string,
-        subscriptions: this.subsList.filter(($: SubscriptionModel) => $.topic !== topic),
-      }
-      this.record.subscriptions = payload.subscriptions
-      updateConnection(this.record.id as string, this.record)
-      this.changeSubs(payload)
-      this.subsList = payload.subscriptions
-      this.$emit('deleteTopic')
-      this.$log.info(`Unsubscribe topic: ${topic}`)
-      return true
-    })
+    if (this.client.unsubscribe) {
+      this.client.unsubscribe(topic, { qos }, (error) => {
+        if (error) {
+          this.$message.error(error)
+          return false
+        }
+        const payload: {
+          id: string
+          subscriptions: SubscriptionModel[]
+        } = {
+          id: this.record.id as string,
+          subscriptions: this.subsList.filter(($: SubscriptionModel) => $.topic !== topic),
+        }
+        this.record.subscriptions = payload.subscriptions
+        updateConnection(this.record.id as string, this.record)
+        this.changeSubs(payload)
+        this.subsList = payload.subscriptions
+        this.$emit('deleteTopic')
+        this.$log.info(`Unsubscribe topic: ${topic}`)
+        return true
+      })
+    }
   }
 
   private resetSubs() {
@@ -332,9 +345,7 @@ export default class SubscriptionsList extends Vue {
   private getCurrentConnection(id: string) {
     const $activeConnection = this.activeConnection[id]
     if ($activeConnection) {
-      this.currentConnection = $activeConnection
-    } else {
-      this.currentConnection = {}
+      this.client = $activeConnection.client
     }
   }
 

src/types/global.d.ts

@@ -70,7 +70,7 @@ declare global {
   // Vuex state
   interface ActiveConnection {
     [id: string]: {
-      client: MqttClient | {}
+      client: MqttClient
       messages: MessageModel[]
       subscriptions?: SubscriptionModel[]
     }
@@ -216,7 +216,6 @@ declare global {
     unreadMessageCount: number
     messages: MessageModel[]
     subscriptions: SubscriptionModel[]
-    client: Partial<MqttClient>
     sessionExpiryInterval?: number
     receiveMaximum?: number
     topicAliasMaximum?: number
@@ -246,13 +245,6 @@ declare global {
     key: string | string[] | Buffer | Buffer[] | undefined
   }
 
-  enum SubscribeErrorReason {
-    normal,
-    qosSubFailed, // qos is abnormal
-    qosSubSysFailed, // qos is abnormal becauseof $SYS subscribe
-    emptySubFailed, // subscription returns empty array
-  }
-
   interface ConnectionTreeState {
     id: string
     expanded: boolean

src/utils/mqttUtils.ts

@@ -2,7 +2,6 @@ import { IClientOptions } from 'mqtt'
 import time from '@/utils/time'
 import { getSSLFile } from '@/utils/getFiles'
 import { loadHistoryMessageHeaders, loadHistoryMessagePayloads } from '@/api/connection'
-import { Connection } from 'typeorm'
 
 const setMQTT5Properties = (option: IClientOptions['properties']): IClientOptions['properties'] | undefined => {
   if (option === undefined) {

src/views/connections/ConnectionForm.vue

@@ -534,9 +534,6 @@ export default class ConnectionCreate extends Vue {
     subscriptions: [],
     messages: [],
     unreadMessageCount: 0,
-    client: {
-      connected: false,
-    },
     will: {
       lastWillTopic: '',
       lastWillPayload: '',

src/views/connections/ConnectionsDetail.vue

@@ -365,7 +365,7 @@ export default class ConnectionsDetail extends Vue {
   @Action('UNREAD_MESSAGE_COUNT_INCREMENT') private unreadMessageIncrement!: (payload: UnreadMessage) => void
   @Action('SET_SCRIPT') private setScript!: (payload: { currentScript: ScriptState | null }) => void
 
-  @Getter('activeConnection') private activeConnection: $TSFixed
+  @Getter('activeConnection') private activeConnection!: ActiveConnection
   @Getter('showSubscriptions') private showSubscriptions!: boolean
   @Getter('autoResub') private autoResub!: boolean
   @Getter('maxReconnectTimes') private maxReconnectTimes!: number
@@ -649,12 +649,7 @@ export default class ConnectionsDetail extends Vue {
   }
   // Get current connection
   private getConnectionValue(id: string) {
-    const currentActiveConnection:
-      | {
-          id?: string
-          client: MqttClient
-        }
-      | undefined = this.activeConnection[id]
+    const currentActiveConnection = this.activeConnection[id]
     const $clientInfoVisible: boolean | undefined = this.clientInfoVisibles[id]
     if ($clientInfoVisible === undefined) {
       this.showClientInfo = true
@@ -1308,11 +1303,8 @@ export default class ConnectionsDetail extends Vue {
   // Register connected clients message event listeners
   private setClientsMessageListener() {
     Object.keys(this.activeConnection).forEach((connectionID: string) => {
-      const $connection: {
-        id?: string
-        client: MqttClient
-      } = this.activeConnection[connectionID]
-      const client: MqttClient = $connection.client
+      const $connection = this.activeConnection[connectionID]
+      const { client } = $connection
       let msgEventCount = 0
       if (client.listenerCount) {
         msgEventCount = client.listenerCount('message')
@@ -1331,11 +1323,8 @@ export default class ConnectionsDetail extends Vue {
   // Remove connected clients message event listeners
   private removeClinetsMessageListener() {
     Object.keys(this.activeConnection).forEach((connectionID: string) => {
-      const currentActiveConnection: {
-        id?: string
-        client: MqttClient
-      } = this.activeConnection[connectionID]
-      const client: MqttClient = currentActiveConnection.client
+      const currentActiveConnection = this.activeConnection[connectionID]
+      const { client } = currentActiveConnection
       if (client.removeAllListeners) {
         client.removeAllListeners('message')
       }

src/views/connections/index.vue

@@ -69,9 +69,6 @@ export default class Connections extends Vue {
     subscriptions: [],
     messages: [],
     unreadMessageCount: 0,
-    client: {
-      connected: false,
-    },
     ca: '',
     cert: '',
     key: '',

src/views/window/Window.vue

@@ -41,9 +41,6 @@ export default class Window extends Vue {
     subscriptions: [],
     messages: [],
     unreadMessageCount: 0,
-    client: {
-      connected: false,
-    },
     ca: '',
     cert: '',
     key: '',