From 42b671a0af7f8a2de83c5004cd68053d2a080669 Mon Sep 17 00:00:00 2001 From: YuShifan <894402575bt@gmail.com> Date: Mon, 26 Jul 2021 15:34:46 +0800 Subject: [PATCH] refactor(connection): remove client property on connection model --- src/components/SubscriptionsList.vue | 133 +++++++++++--------- src/main/getMenuTemplate.ts | 2 +- src/types/global.d.ts | 10 +- src/utils/mqttUtils.ts | 1 - src/views/connections/ConnectionForm.vue | 3 - src/views/connections/ConnectionsDetail.vue | 23 +--- src/views/connections/index.vue | 3 - src/views/window/Window.vue | 3 - 8 files changed, 80 insertions(+), 98 deletions(-) diff --git a/src/components/SubscriptionsList.vue b/src/components/SubscriptionsList.vue index 7081900b02..c3e5469ac3 100644 --- a/src/components/SubscriptionsList.vue +++ b/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 = { + 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 } } diff --git a/src/main/getMenuTemplate.ts b/src/main/getMenuTemplate.ts index 47545fd01c..ad52451294 100644 --- a/src/main/getMenuTemplate.ts +++ b/src/main/getMenuTemplate.ts @@ -3,7 +3,7 @@ import updateChecker from './updateChecker' const isMac = process.platform === 'darwin' -const getMenuTemplate = (win: BrowserWindow): $TSFixed => { +const getMenuTemplate = (win: BrowserWindow) => { return [ // App ...(isMac diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 110b5fb061..7602b485e8 100644 --- a/src/types/global.d.ts +++ b/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 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 diff --git a/src/utils/mqttUtils.ts b/src/utils/mqttUtils.ts index 9f976defa8..19517a21cd 100644 --- a/src/utils/mqttUtils.ts +++ b/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) { diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue index b62506db1e..328168124a 100644 --- a/src/views/connections/ConnectionForm.vue +++ b/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: '', diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue index 8b96da70dc..059eb49bae 100644 --- a/src/views/connections/ConnectionsDetail.vue +++ b/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') } diff --git a/src/views/connections/index.vue b/src/views/connections/index.vue index 72bff93de3..673dc2e548 100644 --- a/src/views/connections/index.vue +++ b/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: '', diff --git a/src/views/window/Window.vue b/src/views/window/Window.vue index c0c5eecf23..7d2f0067ff 100644 --- a/src/views/window/Window.vue +++ b/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: '',