-
v1.3.0
+
v1.3.1
{{ $t('about.update') }}
From 44bdb8e26f3fc6fcf2bef1b8569a10ece9adb12e Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Mon, 27 Apr 2020 23:45:52 +0800
Subject: [PATCH 03/11] fix(about): modify emqx website url
---
src/views/about/index.vue | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index 52520a7e4..37131fae3 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -54,7 +54,7 @@
Copyright © 2020
EMQ X
@@ -120,6 +120,14 @@ export default class About extends Vue {
return require('../../assets/images/mqttx-dark.png')
}
+ get emqxWebsite(): string {
+ let url = 'https://www.emqx.io'
+ if (this.getterLang === 'zh') {
+ url = `${url}/cn/`
+ }
+ return url
+ }
+
private checkUpdate(): void {
ipcRenderer.send('checkUpdate')
}
From 08ab43add3d8e15b3f7d7a737f67689f26dff5d6 Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Mon, 27 Apr 2020 23:56:51 +0800
Subject: [PATCH 04/11] perf(mqttUtils): imporve the code
---
src/store/modules/app.ts | 20 ++++++++++----------
src/utils/getFiles.ts | 7 +++----
src/utils/mqttUtils.ts | 7 +++----
3 files changed, 16 insertions(+), 18 deletions(-)
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index a63da0a45..a04972432 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -1,17 +1,17 @@
import Vue from 'vue'
import { loadSettings, setSettings } from '@/utils/api/setting'
-const TOGGLE_THEME: string = 'TOGGLE_THEME'
-const TOGGLE_LANG: string = 'TOGGLE_LANG'
-const TOGGLE_AUTO_CHECK: string = 'TOGGLE_AUTO_CHECK'
+const TOGGLE_THEME = 'TOGGLE_THEME'
+const TOGGLE_LANG = 'TOGGLE_LANG'
+const TOGGLE_AUTO_CHECK = 'TOGGLE_AUTO_CHECK'
const SET_MAX_RECONNECT_TIMES = 'SET_MAX_RECONNECT_TIMES'
-const CHANGE_ACTIVE_CONNECTION: string = 'CHANGE_ACTIVE_CONNECTION'
-const PUSH_MESSAGE: string = 'PUSH_MESSAGE'
-const REMOVE_ACTIVE_CONNECTION: string = 'REMOVE_ACTIVE_CONNECTION'
-const CHANGE_SUBSCRIPTIONS: string = 'CHANGE_SUBSCRIPTIONS'
-const SHOW_CLIENT_INFO: string = 'SHOW_CLIENT_INFO'
-const SHOW_SUBSCRIPTIONS: string = 'SHOW_SUBSCRIPTIONS'
-const UNREAD_MESSAGE_COUNT_INCREMENT: string = 'UNREAD_MESSAGE_COUNT_INCREMENT'
+const CHANGE_ACTIVE_CONNECTION = 'CHANGE_ACTIVE_CONNECTION'
+const PUSH_MESSAGE = 'PUSH_MESSAGE'
+const REMOVE_ACTIVE_CONNECTION = 'REMOVE_ACTIVE_CONNECTION'
+const CHANGE_SUBSCRIPTIONS = 'CHANGE_SUBSCRIPTIONS'
+const SHOW_CLIENT_INFO = 'SHOW_CLIENT_INFO'
+const SHOW_SUBSCRIPTIONS = 'SHOW_SUBSCRIPTIONS'
+const UNREAD_MESSAGE_COUNT_INCREMENT = 'UNREAD_MESSAGE_COUNT_INCREMENT'
const stateRecord: App = loadSettings()
diff --git a/src/utils/getFiles.ts b/src/utils/getFiles.ts
index 496bdbdcb..5533367c0 100644
--- a/src/utils/getFiles.ts
+++ b/src/utils/getFiles.ts
@@ -1,13 +1,12 @@
import fs from 'fs'
-import path from 'path'
import { SSLPath, SSLContent } from '@/views/connections/types'
export const getSSLFile = (sslPath: SSLPath): SSLContent | undefined => {
const { ca, cert, key } = sslPath
const res: SSLContent = {
- ca: ca !== '' ? [fs.readFileSync(path.join(ca), 'utf-8')] : undefined,
- cert: cert !== '' ? fs.readFileSync(path.join(cert), 'utf-8') : undefined,
- key: key !== '' ? fs.readFileSync(path.join(key), 'utf-8') : undefined,
+ ca: ca !== '' ? [fs.readFileSync(ca)] : undefined,
+ cert: cert !== '' ? fs.readFileSync(cert) : undefined,
+ key: key !== '' ? fs.readFileSync(key) : undefined,
}
return res
}
diff --git a/src/utils/mqttUtils.ts b/src/utils/mqttUtils.ts
index 884e63075..5425e1c45 100644
--- a/src/utils/mqttUtils.ts
+++ b/src/utils/mqttUtils.ts
@@ -1,7 +1,7 @@
import { IClientOptions } from 'mqtt'
import time from '@/utils/time'
import { getSSLFile } from '@/utils/getFiles'
-import { ConnectionModel, SSLPath, SSLContent } from '@/views/connections/types'
+import { ConnectionModel, SSLContent } from '@/views/connections/types'
const setMQTT5Properties = (
option: IClientOptions['properties'],
@@ -63,12 +63,11 @@ export const getClientOptions = (
}
// SSL
if (ssl && certType === 'self') {
- const filePath: SSLPath = {
+ const sslRes: SSLContent | undefined = getSSLFile({
ca: record.ca,
cert: record.cert,
key: record.key,
- }
- const sslRes: SSLContent | undefined = getSSLFile(filePath)
+ })
if (sslRes) {
options.rejectUnauthorized = false
options.ca = sslRes.ca
From cd66a4329b68cf54006ddcb811815c064a4271d6 Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Fri, 8 May 2020 22:47:24 +0800
Subject: [PATCH 05/11] feat(connection): support more MQTT 5.0 features
---
src/lang/connections.ts | 12 ++++++++
src/utils/mqttUtils.ts | 19 ++++++++++++-
src/views/connections/ConnectionForm.vue | 36 ++++++++++++++++++++++++
src/views/connections/types.ts | 3 ++
4 files changed, 69 insertions(+), 1 deletion(-)
diff --git a/src/lang/connections.ts b/src/lang/connections.ts
index 52304f7da..22c08b347 100644
--- a/src/lang/connections.ts
+++ b/src/lang/connections.ts
@@ -155,6 +155,18 @@ export default {
zh: '接收最大数值',
en: 'Receive Maximum',
},
+ topicAliasMaximum: {
+ zh: '主题别名最大值',
+ en: 'Topic Alias Maximum',
+ },
+ requestResponseInformation: {
+ zh: '请求响应信息',
+ en: 'Request Response Information',
+ },
+ requestProblemInformation: {
+ zh: '请求失败信息',
+ en: 'Request Problem Information',
+ },
topicReuired: {
zh: '请输入 Topic',
en: 'Topic is required',
diff --git a/src/utils/mqttUtils.ts b/src/utils/mqttUtils.ts
index 5425e1c45..4eb862fd7 100644
--- a/src/utils/mqttUtils.ts
+++ b/src/utils/mqttUtils.ts
@@ -18,6 +18,18 @@ const setMQTT5Properties = (
option.sessionExpiryInterval === 0) {
properties.receiveMaximum = option.receiveMaximum
}
+ if (option.topicAliasMaximum ||
+ option.topicAliasMaximum === 0) {
+ properties.topicAliasMaximum = option.topicAliasMaximum
+ }
+ if (option.requestResponseInformation === true ||
+ option.requestResponseInformation === false) {
+ properties.requestResponseInformation = option.requestResponseInformation
+ }
+ if (option.requestProblemInformation === true ||
+ option.requestProblemInformation === false) {
+ properties.requestProblemInformation = option.requestProblemInformation
+ }
return properties
}
@@ -52,10 +64,15 @@ export const getClientOptions = (
}
// MQTT Version
if (protocolVersion === 5) {
- const { sessionExpiryInterval, receiveMaximum } = record
+ const { sessionExpiryInterval, receiveMaximum,
+ topicAliasMaximum, requestResponseInformation, requestProblemInformation,
+ } = record
const properties = setMQTT5Properties({
sessionExpiryInterval,
receiveMaximum,
+ topicAliasMaximum,
+ requestResponseInformation,
+ requestProblemInformation,
})
if (properties && Object.keys(properties).length > 0) {
options.properties = properties
diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue
index 5f1bf9a2f..b1e48700a 100644
--- a/src/views/connections/ConnectionForm.vue
+++ b/src/views/connections/ConnectionForm.vue
@@ -234,6 +234,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -355,6 +386,11 @@ export default class ConnectionCreate extends Vue {
lastWillQos: 0,
lastWillRetain: false,
},
+ sessionExpiryInterval: undefined,
+ receiveMaximum: undefined,
+ topicAliasMaximum: undefined,
+ requestResponseInformation: undefined,
+ requestProblemInformation: undefined,
}
get rules() {
diff --git a/src/views/connections/types.ts b/src/views/connections/types.ts
index 115bf522d..ad6be71a2 100644
--- a/src/views/connections/types.ts
+++ b/src/views/connections/types.ts
@@ -42,6 +42,9 @@ export interface ConnectionModel extends SSLPath {
},
sessionExpiryInterval?: number,
receiveMaximum?: number,
+ topicAliasMaximum?: number,
+ requestResponseInformation?: boolean,
+ requestProblemInformation?: boolean,
will?: {
lastWillTopic: string,
lastWillPayload: string,
From b41c7476cdbfc4cae2bc0e263d03931a6766253d Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Sat, 9 May 2020 16:35:01 +0800
Subject: [PATCH 06/11] feat(msg_publish): remove required verification of the
payload
---
src/components/MsgPublish.vue | 9 ++++-----
src/views/connections/ConnectionsContent.vue | 4 ----
2 files changed, 4 insertions(+), 9 deletions(-)
diff --git a/src/components/MsgPublish.vue b/src/components/MsgPublish.vue
index 5ea34dbef..d4eb6f7fd 100644
--- a/src/components/MsgPublish.vue
+++ b/src/components/MsgPublish.vue
@@ -126,15 +126,14 @@ export default class MsgPublish extends Vue {
private handleInputBlur() {
ipcRenderer.removeAllListeners('sendPayload')
}
-
- private beforeDestroy() {
- ipcRenderer.removeAllListeners('sendPayload')
- }
-
private handleLayout() {
const editorRef: EditorRef = this.$refs.payloadEditor as EditorRef
editorRef.editorLayout()
}
+
+ private beforeDestroy() {
+ ipcRenderer.removeAllListeners('sendPayload')
+ }
}
diff --git a/src/views/connections/ConnectionsContent.vue b/src/views/connections/ConnectionsContent.vue
index 3b163d878..9ae427428 100644
--- a/src/views/connections/ConnectionsContent.vue
+++ b/src/views/connections/ConnectionsContent.vue
@@ -582,10 +582,6 @@ export default class ConnectionsContent extends Vue {
this.$message.warning(this.$t('connections.topicReuired') as string)
return false
}
- if (!payload && !retain) {
- this.$message.warning(this.$t('connections.payloadReuired') as string)
- return false
- }
this.client.publish(
topic,
payload,
From c7dbb5e5c6780f655c4451b0245ad3abb5218802 Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Sun, 10 May 2020 20:33:31 +0800
Subject: [PATCH 07/11] refactor(connection): remove requestResponse properties
---
src/utils/mqttUtils.ts | 13 +-----------
src/views/connections/ConnectionForm.vue | 26 ------------------------
2 files changed, 1 insertion(+), 38 deletions(-)
diff --git a/src/utils/mqttUtils.ts b/src/utils/mqttUtils.ts
index 4eb862fd7..b5b71c2e1 100644
--- a/src/utils/mqttUtils.ts
+++ b/src/utils/mqttUtils.ts
@@ -22,14 +22,6 @@ const setMQTT5Properties = (
option.topicAliasMaximum === 0) {
properties.topicAliasMaximum = option.topicAliasMaximum
}
- if (option.requestResponseInformation === true ||
- option.requestResponseInformation === false) {
- properties.requestResponseInformation = option.requestResponseInformation
- }
- if (option.requestProblemInformation === true ||
- option.requestProblemInformation === false) {
- properties.requestProblemInformation = option.requestProblemInformation
- }
return properties
}
@@ -64,15 +56,12 @@ export const getClientOptions = (
}
// MQTT Version
if (protocolVersion === 5) {
- const { sessionExpiryInterval, receiveMaximum,
- topicAliasMaximum, requestResponseInformation, requestProblemInformation,
+ const { sessionExpiryInterval, receiveMaximum, topicAliasMaximum,
} = record
const properties = setMQTT5Properties({
sessionExpiryInterval,
receiveMaximum,
topicAliasMaximum,
- requestResponseInformation,
- requestProblemInformation,
})
if (properties && Object.keys(properties).length > 0) {
options.properties = properties
diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue
index b1e48700a..88179fdeb 100644
--- a/src/views/connections/ConnectionForm.vue
+++ b/src/views/connections/ConnectionForm.vue
@@ -241,30 +241,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -389,8 +365,6 @@ export default class ConnectionCreate extends Vue {
sessionExpiryInterval: undefined,
receiveMaximum: undefined,
topicAliasMaximum: undefined,
- requestResponseInformation: undefined,
- requestProblemInformation: undefined,
}
get rules() {
From 6b6452763d2ce405f3137c81edde3ce2d7cb7bc9 Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Mon, 11 May 2020 16:22:05 +0800
Subject: [PATCH 08/11] feat(topics): split messages view by clicking topic
item
---
package.json | 1 +
src/assets/scss/theme/dark.scss | 1 +
src/assets/scss/theme/light.scss | 1 +
src/assets/scss/theme/night.scss | 1 +
src/components/SubscriptionsList.vue | 62 ++++++++++----------
src/main.ts | 3 +-
src/utils/clickHide.ts | 10 ----
src/utils/topicMatch.ts | 37 ++++++------
src/views/connections/ConnectionsContent.vue | 41 +++++++++++--
yarn.lock | 38 ++++++++++++
10 files changed, 130 insertions(+), 65 deletions(-)
delete mode 100644 src/utils/clickHide.ts
diff --git a/package.json b/package.json
index b190edbe6..054a0d93a 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"mqtt": "^3.0.0",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
+ "vue-clipboard2": "^0.3.1",
"vue-i18n": "^8.11.2",
"vue-property-decorator": "^8.1.0",
"vue-router": "^3.0.3",
diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index e7ed0aa77..61f13a709 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -3,6 +3,7 @@ body.dark {
--color-bg-normal: #282828;
--color-bg-primary: #232323;
--color-bg-topics: #484848;
+ --color-bg-topics_active: #666666;
--color-bg-leftbar: #282828;
--color-bg-leftbar_item: #303030;
--color-bg-item: #395449;
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index 0dfd43152..53391d1bd 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -3,6 +3,7 @@ body.light {
--color-bg-normal: #ffffff;
--color-bg-primary: #F9FAFD;
--color-bg-topics: #F8F8F8;
+ --color-bg-topics_active: #ebebeb;
--color-bg-leftbar: #333844;
--color-bg-leftbar_item: #232731;
--color-bg-item: #EBF8F2;
diff --git a/src/assets/scss/theme/night.scss b/src/assets/scss/theme/night.scss
index 6e35e3068..f51ea9eea 100644
--- a/src/assets/scss/theme/night.scss
+++ b/src/assets/scss/theme/night.scss
@@ -3,6 +3,7 @@ body.night {
--color-bg-normal: #292B33;
--color-bg-primary: #212328;
--color-bg-topics: #414556;
+ --color-bg-topics_active: #ebebeb;
--color-bg-leftbar: #333844;
--color-bg-leftbar_item: #31333F;
--color-bg-item: #31333F;
diff --git a/src/components/SubscriptionsList.vue b/src/components/SubscriptionsList.vue
index d5744180f..15b383613 100644
--- a/src/components/SubscriptionsList.vue
+++ b/src/components/SubscriptionsList.vue
@@ -1,10 +1,5 @@
-
-
+ @click="handleClickTopic(sub, index)">
-
+
{{ sub.topic }}
@@ -143,7 +143,7 @@ export default class SubscriptionsList extends Vue {
private qosOption: qosList = [0, 1, 2]
private subsList: SubscriptionModel[] = []
private copySuccess = false
- private clipboardContent = ''
+ private topicActiveIndex: number | null = null
get rules() {
return {
@@ -162,6 +162,7 @@ export default class SubscriptionsList extends Vue {
@Watch('record')
private handleRecordChanged(val: ConnectionModel) {
+ this.topicActiveIndex = null
this.getCurrentConnection(val.id as string)
}
@@ -297,27 +298,27 @@ export default class SubscriptionsList extends Vue {
}
}
- private handleCopyTopic(topic: string): void | boolean {
- this.clipboardContent = topic
+ private onCopySuccess() {
this.copySuccess = true
setTimeout(() => {
- const clipboard = document.querySelector('#clipboard') as HTMLInputElement
- if (!clipboard) {
- return false
- }
- clipboard.select()
- document.execCommand('Copy')
- setTimeout(() => {
- this.copySuccess = false
- }, 1000)
- }, 500)
+ this.copySuccess = false
+ }, 1000)
+ }
+ private stopClick(): boolean {
+ return false
}
- private handleClickTopic(item: SubscriptionModel) {
- this.$emit('onClickTopic', item)
+ private handleClickTopic(item: SubscriptionModel, index: number) {
+ if (this.topicActiveIndex === null || this.topicActiveIndex !== index) {
+ this.topicActiveIndex = index
+ this.$emit('onClickTopic', item, false)
+ } else if (this.topicActiveIndex === index) {
+ this.topicActiveIndex = null
+ this.$emit('onClickTopic', item, true)
+ }
}
- private created(): void {
+ private created() {
this.getCurrentConnection(this.connectionId)
}
}
@@ -356,6 +357,13 @@ export default class SubscriptionsList extends Vue {
position: relative;
clear: both;
border-radius: 2px;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ user-select: none;
+ transition: all .3s ease;
+ &.active {
+ background: var(--color-bg-topics_active);
+ }
.topic {
max-width: 120px;
margin-left: 5px;
@@ -363,7 +371,6 @@ export default class SubscriptionsList extends Vue {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- user-select: all;
color: var(--color-text-default);
}
.qos {
@@ -403,9 +410,4 @@ export default class SubscriptionsList extends Vue {
}
}
}
-#clipboard {
- position: absolute;
- z-index: -1;
- visibility: hidden;
-}
diff --git a/src/main.ts b/src/main.ts
index c984a119e..7febf77e2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,16 +2,17 @@ import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
import ElementLocale from 'element-ui/lib/locale'
-
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import VueI18n from 'vue-i18n'
+import VueClipboard from 'vue-clipboard2'
import Lang from './lang'
import element from './utils/element'
Vue.use(element)
Vue.use(VueI18n)
+Vue.use(VueClipboard)
const locale: Language = store.state.app.currentLang
const vueI18n: VueI18n = new VueI18n({
diff --git a/src/utils/clickHide.ts b/src/utils/clickHide.ts
deleted file mode 100644
index 223c95492..000000000
--- a/src/utils/clickHide.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export default (el: string, event: MouseEvent): boolean => {
- const selectDom: Element | null = document.querySelector(el)
- if (selectDom) {
- // Type Assertion,Type assertion using the '<>' syntax is forbidden.
- // There is an ambiguity in the language grammar when using, Like use HTML tag.
- const targetDom: Element = event.target as Element
- return selectDom.contains(targetDom)
- }
- return true
-}
diff --git a/src/utils/topicMatch.ts b/src/utils/topicMatch.ts
index 366f06bc6..47b20fba8 100644
--- a/src/utils/topicMatch.ts
+++ b/src/utils/topicMatch.ts
@@ -1,29 +1,30 @@
import { MessageModel } from '@/views/connections/types'
+export const matchTopicMethod = (filter: string, topic: string): boolean => {
+ // Topic matching algorithm
+ const filterArray: string[] = filter.split('/')
+ const length: number = filterArray.length
+ const topicArray: string[] = topic.split('/')
+ for (let i = 0; i < length; i += 1 ) {
+ const left: string = filterArray[i]
+ const right: string = topicArray[i]
+ if (left === '#') {
+ return topicArray.length >= length - 1
+ }
+ if (left !== right && left !== '+') {
+ return false
+ }
+ }
+ return length === topicArray.length
+}
+
const topicMatch = (
data: MessageModel[], currentTopic: string,
): Promise
=> {
return new Promise((resolve, reject) => {
try {
- // Topic matching algorithm
- const match = (filter: string, topic: string) => {
- const filterArray = filter.split('/')
- const length = filterArray.length
- const topicArray = topic.split('/')
- for (let i = 0; i < length; i += 1 ) {
- const left = filterArray[i]
- const right = topicArray[i]
- if (left === '#') {
- return topicArray.length >= length - 1
- }
- if (left !== right && left !== '+') {
- return false
- }
- }
- return length === topicArray.length
- }
const filterData = data.filter(
- (item) => match(currentTopic, item.topic),
+ (item) => matchTopicMethod(currentTopic, item.topic),
)
return resolve(filterData)
} catch (error) {
diff --git a/src/views/connections/ConnectionsContent.vue b/src/views/connections/ConnectionsContent.vue
index 9ae427428..b5f29bf3a 100644
--- a/src/views/connections/ConnectionsContent.vue
+++ b/src/views/connections/ConnectionsContent.vue
@@ -156,7 +156,7 @@ import { Getter, Action } from 'vuex-class'
import { deleteConnection, updateConnection, updateConnectionMessage } from '@/utils/api/connection'
import time from '@/utils/time'
import matchSearch from '@/utils/matchSearch'
-import topicMatch from '@/utils/topicMatch'
+import topicMatch, { matchTopicMethod } from '@/utils/topicMatch'
import { getClientOptions, getMQTTProtocol } from '@/utils/mqttUtils'
import MsgRightItem from '@/components/MsgRightItem.vue'
import MsgLeftItem from '@/components/MsgLeftItem.vue'
@@ -221,6 +221,7 @@ export default class ConnectionsContent extends Vue {
'3.1.1': 4,
'5.0': 5,
}
+ private activeTopic = ''
public connect(): boolean | void {
if (this.client.connected) {
@@ -344,6 +345,22 @@ export default class ConnectionsContent extends Vue {
updateConnection(this.record.id as string, this.record)
}
private handleMsgTypeChanged(type: MessageType) {
+ if (this.activeTopic !== '') {
+ topicMatch(this.record.messages, this.activeTopic).then((res) => {
+ if (res) {
+ if (type === 'received') {
+ this.messages = res.filter(($: MessageModel) => !$.out)
+ } else if (type === 'publish') {
+ this.messages = res.filter(($: MessageModel) => $.out)
+ } else {
+ this.messages = res
+ }
+ } else {
+ this.messages = []
+ }
+ })
+ return false
+ }
if (type === 'received') {
this.messages = this.record.messages.filter(($: MessageModel) => !$.out)
} else if (type === 'publish') {
@@ -380,10 +397,20 @@ export default class ConnectionsContent extends Vue {
this.getMessages(this.$route.params.id)
}
}
- private handleTopicClick(sub: SubscriptionModel) {
+ private handleTopicClick(sub: SubscriptionModel, reset: boolean) {
+ this.getMessages(this.$route.params.id)
+ if (reset) {
+ this.activeTopic = ''
+ return false
+ }
+ this.activeTopic = sub.topic
const $messages = [...this.messages]
topicMatch($messages, sub.topic).then((res) => {
- console.log(res)
+ if (res) {
+ this.messages = res
+ } else {
+ this.messages = []
+ }
})
}
private handleSearchOpen() {
@@ -548,7 +575,8 @@ export default class ConnectionsContent extends Vue {
}
this.pushMessage({ id, message: receivedMessage })
this.record.messages.push({ ...receivedMessage })
- if (this.msgType === 'received') {
+ const isActiveTopicMessages: boolean = matchTopicMethod(this.activeTopic, topic)
+ if (this.msgType === 'received' || isActiveTopicMessages) {
this.messages.push(receivedMessage)
}
const connectionId = this.$route.params.id
@@ -604,7 +632,8 @@ export default class ConnectionsContent extends Vue {
message: publishMessage,
})
this.record.messages.push({ ...publishMessage })
- if (this.msgType === 'publish') {
+ const isActiveTopicMessages: boolean = matchTopicMethod(this.activeTopic, topic)
+ if (this.msgType === 'publish' || isActiveTopicMessages) {
this.messages.push(publishMessage)
}
updateConnectionMessage(this.record.id as string, { ...publishMessage })
@@ -624,7 +653,7 @@ export default class ConnectionsContent extends Vue {
}, 500)
}
- private created(): void {
+ private created() {
const { id } = this.$route.params
this.getConnectionValue(id)
this.getMessages(id)
diff --git a/yarn.lock b/yarn.lock
index 163c76132..d37d0153e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2549,6 +2549,15 @@ cli-width@^2.0.0:
resolved "https://registry.npm.taobao.org/cli-width/download/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
+clipboard@^2.0.0:
+ version "2.0.6"
+ resolved "https://registry.npm.taobao.org/clipboard/download/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
+ integrity sha1-UpISlu7A/fd+rRdJQhshyWhkc3Y=
+ dependencies:
+ good-listener "^1.2.2"
+ select "^1.1.2"
+ tiny-emitter "^2.0.0"
+
clipboardy@^2.0.0:
version "2.1.0"
resolved "https://registry.npm.taobao.org/clipboardy/download/clipboardy-2.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fclipboardy%2Fdownload%2Fclipboardy-2.1.0.tgz#0123a0c8fac92f256dc56335e0bb8be97a4909a5"
@@ -3432,6 +3441,11 @@ delayed-stream@~1.0.0:
resolved "https://registry.npm.taobao.org/delayed-stream/download/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+delegate@^3.1.2:
+ version "3.2.0"
+ resolved "https://registry.npm.taobao.org/delegate/download/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+ integrity sha1-tmtxwxWFIuirV0T3INjKDCr1kWY=
+
delegates@^1.0.0:
version "1.0.0"
resolved "https://registry.npm.taobao.org/delegates/download/delegates-1.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdelegates%2Fdownload%2Fdelegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -4758,6 +4772,13 @@ globule@^1.0.0:
lodash "~4.17.10"
minimatch "~3.0.2"
+good-listener@^1.2.2:
+ version "1.2.2"
+ resolved "https://registry.npm.taobao.org/good-listener/download/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+ integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+ dependencies:
+ delegate "^3.1.2"
+
got@^9.6.0:
version "9.6.0"
resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
@@ -8698,6 +8719,11 @@ select-hose@^2.0.0:
resolved "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
+select@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.npm.taobao.org/select/download/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+ integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
selfsigned@^1.10.4:
version "1.10.4"
resolved "https://registry.npm.taobao.org/selfsigned/download/selfsigned-1.10.4.tgz#cdd7eccfca4ed7635d47a08bf2d5d3074092e2cd"
@@ -9597,6 +9623,11 @@ timsort@^0.3.0:
resolved "https://registry.npm.taobao.org/timsort/download/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
+tiny-emitter@^2.0.0:
+ version "2.1.0"
+ resolved "https://registry.npm.taobao.org/tiny-emitter/download/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+ integrity sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM=
+
tmp@0.1.0:
version "0.1.0"
resolved "https://registry.npm.taobao.org/tmp/download/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877"
@@ -10155,6 +10186,13 @@ vue-cli-plugin-electron-builder@^1.4.4:
webpack-chain "^5.0.0"
yargs "^14.0.0"
+vue-clipboard2@^0.3.1:
+ version "0.3.1"
+ resolved "https://registry.npm.taobao.org/vue-clipboard2/download/vue-clipboard2-0.3.1.tgz#6e551fb7bd384889b28b0da3b12289ed6bca4894"
+ integrity sha1-blUft704SImyiw2jsSKJ7WvKSJQ=
+ dependencies:
+ clipboard "^2.0.0"
+
vue-hot-reload-api@^2.3.0:
version "2.3.3"
resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
From e4f4fec863ee13a55b23633f6e56edb81776b221 Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Tue, 12 May 2020 10:35:01 +0800
Subject: [PATCH 09/11] style(topics): modify active topic item background
---
src/assets/scss/theme/dark.scss | 3 ++-
src/assets/scss/theme/light.scss | 3 ++-
src/assets/scss/theme/night.scss | 3 ++-
src/components/SubscriptionsList.vue | 2 ++
4 files changed, 8 insertions(+), 3 deletions(-)
diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index 61f13a709..8824f5a0f 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -3,7 +3,8 @@ body.dark {
--color-bg-normal: #282828;
--color-bg-primary: #232323;
--color-bg-topics: #484848;
- --color-bg-topics_active: #666666;
+ --color-bg-topics_active: #353535;
+ --color-bg-topics_shadow: #1b1b1bd1;
--color-bg-leftbar: #282828;
--color-bg-leftbar_item: #303030;
--color-bg-item: #395449;
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index 53391d1bd..88de50125 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -3,7 +3,8 @@ body.light {
--color-bg-normal: #ffffff;
--color-bg-primary: #F9FAFD;
--color-bg-topics: #F8F8F8;
- --color-bg-topics_active: #ebebeb;
+ --color-bg-topics_active: #efefef;
+ --color-bg-topics_shadow: #e2e2e2d1;
--color-bg-leftbar: #333844;
--color-bg-leftbar_item: #232731;
--color-bg-item: #EBF8F2;
diff --git a/src/assets/scss/theme/night.scss b/src/assets/scss/theme/night.scss
index f51ea9eea..b3e7695f2 100644
--- a/src/assets/scss/theme/night.scss
+++ b/src/assets/scss/theme/night.scss
@@ -3,7 +3,8 @@ body.night {
--color-bg-normal: #292B33;
--color-bg-primary: #212328;
--color-bg-topics: #414556;
- --color-bg-topics_active: #ebebeb;
+ --color-bg-topics_active: #323544;
+ --color-bg-topics_shadow: #231d1dd1;
--color-bg-leftbar: #333844;
--color-bg-leftbar_item: #31333F;
--color-bg-item: #31333F;
diff --git a/src/components/SubscriptionsList.vue b/src/components/SubscriptionsList.vue
index 15b383613..d05f22d26 100644
--- a/src/components/SubscriptionsList.vue
+++ b/src/components/SubscriptionsList.vue
@@ -361,8 +361,10 @@ export default class SubscriptionsList extends Vue {
-khtml-user-select: none;
user-select: none;
transition: all .3s ease;
+ box-shadow: 1px 1px 2px 0px var(--color-bg-topics_shadow);
&.active {
background: var(--color-bg-topics_active);
+ box-shadow: none;
}
.topic {
max-width: 120px;
From b8e2fe840e93172c0201902c25273c366c92a33e Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Tue, 12 May 2020 15:53:12 +0800
Subject: [PATCH 10/11] fix(connections): fix the problem of duplicate messages
---
src/views/connections/ConnectionsContent.vue | 18 +++++++++++-------
1 file changed, 11 insertions(+), 7 deletions(-)
diff --git a/src/views/connections/ConnectionsContent.vue b/src/views/connections/ConnectionsContent.vue
index b5f29bf3a..ebec15584 100644
--- a/src/views/connections/ConnectionsContent.vue
+++ b/src/views/connections/ConnectionsContent.vue
@@ -574,13 +574,15 @@ export default class ConnectionsContent extends Vue {
retain: packet.retain as boolean,
}
this.pushMessage({ id, message: receivedMessage })
- this.record.messages.push({ ...receivedMessage })
- const isActiveTopicMessages: boolean = matchTopicMethod(this.activeTopic, topic)
- if (this.msgType === 'received' || isActiveTopicMessages) {
- this.messages.push(receivedMessage)
- }
const connectionId = this.$route.params.id
if (id === connectionId) {
+ this.record.messages.push({ ...receivedMessage })
+ const isActiveTopicMessages = matchTopicMethod(this.activeTopic, topic)
+ if (this.msgType === 'received' && !this.activeTopic) {
+ this.messages.push(receivedMessage)
+ } else if (this.activeTopic && isActiveTopicMessages && this.msgType !== 'publish') {
+ this.messages.push(receivedMessage)
+ }
updateConnectionMessage(connectionId, { ...receivedMessage })
} else {
updateConnectionMessage(id, { ...receivedMessage })
@@ -632,8 +634,10 @@ export default class ConnectionsContent extends Vue {
message: publishMessage,
})
this.record.messages.push({ ...publishMessage })
- const isActiveTopicMessages: boolean = matchTopicMethod(this.activeTopic, topic)
- if (this.msgType === 'publish' || isActiveTopicMessages) {
+ const isActiveTopicMessages = matchTopicMethod(this.activeTopic, topic)
+ if (this.msgType === 'publish' && !this.activeTopic) {
+ this.messages.push(publishMessage)
+ } else if (this.activeTopic && isActiveTopicMessages && this.msgType !== 'received') {
this.messages.push(publishMessage)
}
updateConnectionMessage(this.record.id as string, { ...publishMessage })
From 62b6a397595f2e50f73026d4d4b2219aced1940e Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Tue, 12 May 2020 16:09:16 +0800
Subject: [PATCH 11/11] fix(connections): fix certificate certification issues
---
src/lang/connections.ts | 4 ++++
src/utils/mqttUtils.ts | 8 ++++++--
src/views/connections/ConnectionForm.vue | 22 +++++++++++++++++++++-
src/views/connections/types.ts | 1 +
4 files changed, 32 insertions(+), 3 deletions(-)
diff --git a/src/lang/connections.ts b/src/lang/connections.ts
index 22c08b347..dce73d5d6 100644
--- a/src/lang/connections.ts
+++ b/src/lang/connections.ts
@@ -183,4 +183,8 @@ export default {
zh: '遗嘱消息',
en: 'Last Will and Testament',
},
+ strictValidateCertificate: {
+ zh: '严格证书验证',
+ en: 'Strict validate Certificate',
+ },
}
diff --git a/src/utils/mqttUtils.ts b/src/utils/mqttUtils.ts
index b5b71c2e1..76b731853 100644
--- a/src/utils/mqttUtils.ts
+++ b/src/utils/mqttUtils.ts
@@ -34,7 +34,7 @@ export const getClientOptions = (
}
const {
clientId, username, password, keepalive, clean, connectTimeout,
- ssl, certType, mqttVersion, reconnect, will,
+ ssl, certType, mqttVersion, reconnect, will, rejectUnauthorized,
} = record
// reconnectPeriod = 0 disabled automatic reconnection in the client
const reconnectPeriod = reconnect ? 4000 : 0
@@ -75,10 +75,14 @@ export const getClientOptions = (
key: record.key,
})
if (sslRes) {
- options.rejectUnauthorized = false
options.ca = sslRes.ca
options.cert = sslRes.cert
options.key = sslRes.key
+ if (rejectUnauthorized === undefined) {
+ options.rejectUnauthorized = false
+ } else {
+ options.rejectUnauthorized = rejectUnauthorized
+ }
}
}
// Will Message
diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue
index 88179fdeb..7cfe06ee7 100644
--- a/src/views/connections/ConnectionForm.vue
+++ b/src/views/connections/ConnectionForm.vue
@@ -116,6 +116,7 @@
+