Skip to content

Commit

Permalink
refactor(connection): remove client property on connection model
Browse files Browse the repository at this point in the history
  • Loading branch information
@ysfscream @oceanlvr
ysfscream authored and oceanlvr committed Jul 27, 2021
1 parent c6131ce commit 75cd8c5
Show file tree
Hide file tree
Showing 7 changed files with 79 additions and 97 deletions.
133 changes: 72 additions & 61 deletions src/components/SubscriptionsList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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/#',
Expand Down Expand Up @@ -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
}
Expand Down Expand Up @@ -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: '',
Expand All @@ -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() {
Expand All @@ -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
}
}
Expand Down
10 changes: 1 addition & 9 deletions src/types/global.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ declare global {
// Vuex state
interface ActiveConnection {
[id: string]: {
client: MqttClient | {}
client: MqttClient
messages: MessageModel[]
subscriptions?: SubscriptionModel[]
}
Expand Down Expand Up @@ -216,7 +216,6 @@ declare global {
unreadMessageCount: number
messages: MessageModel[]
subscriptions: SubscriptionModel[]
client: Partial<MqttClient>
sessionExpiryInterval?: number
receiveMaximum?: number
topicAliasMaximum?: number
Expand Down Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion src/utils/mqttUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
3 changes: 0 additions & 3 deletions src/views/connections/ConnectionForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -534,9 +534,6 @@ export default class ConnectionCreate extends Vue {
subscriptions: [],
messages: [],
unreadMessageCount: 0,
client: {
connected: false,
},
will: {
lastWillTopic: '',
lastWillPayload: '',
Expand Down
23 changes: 6 additions & 17 deletions src/views/connections/ConnectionsDetail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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')
Expand All @@ -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')
}
Expand Down
3 changes: 0 additions & 3 deletions src/views/connections/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,6 @@ export default class Connections extends Vue {
subscriptions: [],
messages: [],
unreadMessageCount: 0,
client: {
connected: false,
},
ca: '',
cert: '',
key: '',
Expand Down
3 changes: 0 additions & 3 deletions src/views/window/Window.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,6 @@ export default class Window extends Vue {
subscriptions: [],
messages: [],
unreadMessageCount: 0,
client: {
connected: false,
},
ca: '',
cert: '',
key: '',
Expand Down

0 comments on commit 75cd8c5

Please sign in to comment.