diff --git a/package.json b/package.json
index 5b81a9b61..054a0d93a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "MQTTX",
   "author": "EMQ X Team",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "license": "Apache",
   "description": "MQTT desktop client",
   "repository": "https://github.com/emqx/MQTTX",
@@ -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..8824f5a0f 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -3,6 +3,8 @@ body.dark {
   --color-bg-normal: #282828;
   --color-bg-primary: #232323;
   --color-bg-topics: #484848;
+  --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 0dfd43152..88de50125 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -3,6 +3,8 @@ body.light {
   --color-bg-normal: #ffffff;
   --color-bg-primary: #F9FAFD;
   --color-bg-topics: #F8F8F8;
+  --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 6e35e3068..b3e7695f2 100644
--- a/src/assets/scss/theme/night.scss
+++ b/src/assets/scss/theme/night.scss
@@ -3,6 +3,8 @@ body.night {
   --color-bg-normal: #292B33;
   --color-bg-primary: #212328;
   --color-bg-topics: #414556;
+  --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/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')
+  }
 }
 </script>
 
diff --git a/src/components/SubscriptionsList.vue b/src/components/SubscriptionsList.vue
index d5744180f..d05f22d26 100644
--- a/src/components/SubscriptionsList.vue
+++ b/src/components/SubscriptionsList.vue
@@ -1,10 +1,5 @@
 <template>
   <div>
-    <!-- Hide copy text -->
-    <input
-      v-model="clipboardContent"
-      type="text"
-      id="clipboard">
     <left-panel>
       <el-card
         v-if="subsVisible"
@@ -23,19 +18,24 @@
           </a>
         </div>
         <div
-          class="topics-item"
           v-for="(sub, index) in subsList"
           :key="index"
+          :class="['topics-item', index === topicActiveIndex ? 'active' : '']"
           :style="{
             borderLeft: `4px solid ${sub.color}`,
           }"
-          @click.stop="handleClickTopic(sub)">
+          @click="handleClickTopic(sub, index)">
           <el-tooltip
             :effect="theme !== 'light' ? 'light' : 'dark'"
             :content="copySuccess ? $t('connections.topicCopied') : sub.topic"
             :open-delay="!copySuccess ? 0 : 500"
             placement="top">
-            <a href="javascript:;" class="topic" @click.stop="handleCopyTopic(sub.topic)">
+            <a
+              v-clipboard:copy="sub.topic"
+              v-clipboard:success="onCopySuccess"
+              href="javascript:;"
+              class="topic"
+              @click.stop="stopClick">
               {{ sub.topic }}
             </a>
           </el-tooltip>
@@ -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,15 @@ 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;
+      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;
         margin-left: 5px;
@@ -363,7 +373,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 +412,4 @@ export default class SubscriptionsList extends Vue {
     }
   }
 }
-#clipboard {
-  position: absolute;
-  z-index: -1;
-  visibility: hidden;
-}
 </style>
diff --git a/src/lang/connections.ts b/src/lang/connections.ts
index 52304f7da..dce73d5d6 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',
@@ -171,4 +183,8 @@ export default {
     zh: '遗嘱消息',
     en: 'Last Will and Testament',
   },
+  strictValidateCertificate: {
+    zh: '严格证书验证',
+    en: 'Strict validate Certificate',
+  },
 }
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/main/updateChecker.ts b/src/main/updateChecker.ts
index cc06a2231..d247e67a4 100644
--- a/src/main/updateChecker.ts
+++ b/src/main/updateChecker.ts
@@ -1,7 +1,7 @@
 import { dialog, shell } from 'electron'
 import axios from 'axios'
 
-const version = 'v1.3.0'
+const version = 'v1.3.1'
 const release = 'https://api.github.com/repos/emqx/MQTTX/releases/latest'
 const downloadUrl = 'https://github.com/emqx/MQTTX/releases/latest'
 
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/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/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..76b731853 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'],
@@ -18,6 +18,10 @@ const setMQTT5Properties = (
     option.sessionExpiryInterval === 0) {
     properties.receiveMaximum = option.receiveMaximum
   }
+  if (option.topicAliasMaximum ||
+    option.topicAliasMaximum === 0) {
+    properties.topicAliasMaximum = option.topicAliasMaximum
+  }
   return properties
 }
 
@@ -30,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
@@ -52,10 +56,12 @@ export const getClientOptions = (
   }
   // MQTT Version
   if (protocolVersion === 5) {
-    const { sessionExpiryInterval, receiveMaximum } = record
+    const { sessionExpiryInterval, receiveMaximum, topicAliasMaximum,
+    } = record
     const properties = setMQTT5Properties({
       sessionExpiryInterval,
       receiveMaximum,
+      topicAliasMaximum,
     })
     if (properties && Object.keys(properties).length > 0) {
       options.properties =  properties
@@ -63,17 +69,20 @@ 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
       options.cert = sslRes.cert
       options.key = sslRes.key
+      if (rejectUnauthorized === undefined) {
+        options.rejectUnauthorized = false
+      } else {
+        options.rejectUnauthorized = rejectUnauthorized
+      }
     }
   }
   // Will Message
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<MessageModel[]> => {
   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/about/index.vue b/src/views/about/index.vue
index 11576c52f..37131fae3 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -4,7 +4,7 @@
     <div class="about-content">
       <img class="logo" :src="logo" alt="mqttx">
 
-      <p class="version">v1.3.0</p>
+      <p class="version">v1.3.1</p>
 
       <p class="about-help">
         <a class="web-link" href="javascript:;" @click="checkUpdate">{{ $t('about.update') }}</a>
@@ -54,7 +54,7 @@
       <img class="emqx-logo" src="../../assets/images/emqx-logo.png" alt="emqx" width="35">
       <span class="copyright">Copyright &copy; 2020
         <a
-          href="https://emqx.io"
+          :href="emqxWebsite"
           target="_blank"
           rel="noopener noreferrer">
         EMQ X</a>
@@ -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')
   }
diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue
index 5f1bf9a2f..7cfe06ee7 100644
--- a/src/views/connections/ConnectionForm.vue
+++ b/src/views/connections/ConnectionForm.vue
@@ -116,6 +116,7 @@
           </el-row>
         </el-card>
 
+        <!-- SSL -->
         <transition-group name="el-zoom-in-top">
           <template v-if="record.certType === 'self'">
             <div key="title" class="info-header">
@@ -156,6 +157,19 @@
                     <i class="el-icon-folder-opened"></i>
                   </a>
                 </el-col>
+                <el-col :span="22">
+                  <el-form-item 
+                    :label="$t('connections.strictValidateCertificate')"
+                    :label-width="getterLang === 'zh' ? '' : '200'"
+                    prop="rejectUnauthorized">
+                    <el-switch
+                      v-model="record.rejectUnauthorized"
+                      active-color="#13ce66"
+                      inactive-color="#A2A9B0">
+                    </el-switch>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="2"></el-col>
               </el-row>
             </el-card>
           </template>
@@ -234,6 +248,13 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="2"></el-col>
+                <el-col :span="22">
+                  <el-form-item :label="$t('connections.topicAliasMaximum')" prop="topicAliasMaximum">
+                    <el-input size="mini" type="number" v-model.number="record.topicAliasMaximum">
+                    </el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="2"></el-col>
               </template>
             </el-row>
           </el-card>
@@ -306,7 +327,7 @@
 <script lang="ts">
 import { remote } from 'electron'
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import { Action } from 'vuex-class'
+import { Getter, Action } from 'vuex-class'
 import { loadConnection, updateConnection } from '@/utils/api/connection'
 import getClientId from '@/utils/getClientId'
 import { createConnection } from '@/utils/api/connection'
@@ -317,6 +338,8 @@ import { getMQTTProtocol } from '@/utils/mqttUtils'
 export default class ConnectionCreate extends Vue {
   @Prop({ required: true }) public oper!: 'edit' | 'create' | undefined
 
+  @Getter('currentLang') private getterLang!: Language
+
   @Action('CHANGE_ACTIVE_CONNECTION') private changeActiveConnection!: (
     payload: Client,
   ) => void
@@ -339,6 +362,7 @@ export default class ConnectionCreate extends Vue {
     port: 1883,
     ssl: false,
     certType: '',
+    rejectUnauthorized: false,
     ca: '',
     cert: '',
     key: '',
@@ -355,6 +379,9 @@ export default class ConnectionCreate extends Vue {
       lastWillQos: 0,
       lastWillRetain: false,
     },
+    sessionExpiryInterval: undefined,
+    receiveMaximum: undefined,
+    topicAliasMaximum: undefined,
   }
 
   get rules() {
@@ -378,6 +405,9 @@ export default class ConnectionCreate extends Vue {
     if (res) {
       Object.assign(this.record, res)
       this.record.protocol = getMQTTProtocol(res)
+      if (res.rejectUnauthorized === undefined) {
+        this.record.rejectUnauthorized = false
+      }
     }
   }
 
diff --git a/src/views/connections/ConnectionsContent.vue b/src/views/connections/ConnectionsContent.vue
index 3b163d878..ebec15584 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() {
@@ -547,12 +574,15 @@ export default class ConnectionsContent extends Vue {
         retain: packet.retain as boolean,
       }
       this.pushMessage({ id, message: receivedMessage })
-      this.record.messages.push({ ...receivedMessage })
-      if (this.msgType === 'received') {
-        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 })
@@ -582,10 +612,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,
@@ -608,7 +634,10 @@ export default class ConnectionsContent extends Vue {
           message: publishMessage,
         })
         this.record.messages.push({ ...publishMessage })
-        if (this.msgType === 'publish') {
+        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 })
@@ -628,7 +657,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/src/views/connections/types.ts b/src/views/connections/types.ts
index 115bf522d..5c7a6b0bb 100644
--- a/src/views/connections/types.ts
+++ b/src/views/connections/types.ts
@@ -12,6 +12,7 @@ export interface MessageModel {
 }
 
 export interface SSLPath {
+  rejectUnauthorized?: boolean,
   ca: string,
   cert: string,
   key: string,
@@ -42,6 +43,9 @@ export interface ConnectionModel extends SSLPath  {
   },
   sessionExpiryInterval?: number,
   receiveMaximum?: number,
+  topicAliasMaximum?: number,
+  requestResponseInformation?: boolean,
+  requestProblemInformation?: boolean,
   will?: {
     lastWillTopic: string,
     lastWillPayload: string,
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"