feat(web): add reconnectPeriod option

emqx · Sep 13, 2022 · 62c6ac9 · 62c6ac9
1 parent c3fd327
commit 62c6ac9
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/web/src/lang/connections.ts b/web/src/lang/connections.ts
@@ -204,6 +204,11 @@ export default {
     en: 'Auto Reconnect',
     ja: '自動再接続',
   },
+  reconnectPeriod: {
+    zh: '重连周期',
+    en: 'Reconnect Period',
+    ja: '再接続期間',
+  },
   mqttVersion: {
     zh: 'MQTT 版本',
     en: 'MQTT Version',

diff --git a/web/src/types/global.d.ts b/web/src/types/global.d.ts
@@ -274,6 +274,7 @@ declare global {
     keepalive: number
     connectTimeout: number
     reconnect: boolean
+    reconnectPeriod: number
     username: string
     password: string
     path: string

diff --git a/web/src/utils/mqttUtils.ts b/web/src/utils/mqttUtils.ts
@@ -37,7 +37,7 @@ const getClientOptions = (record: ConnectionModel): IClientOptions => {
     certType,
     mqttVersion,
     reconnect,
-    // reconnectPeriod, // reconnectPeriod = 0 disabled automatic reconnection in the client
+    reconnectPeriod, // reconnectPeriod = 0 disabled automatic reconnection in the client
     will,
     rejectUnauthorized,
     // clientIdWithTime,
@@ -47,7 +47,7 @@ const getClientOptions = (record: ConnectionModel): IClientOptions => {
     clientId,
     keepalive,
     clean,
-    // reconnectPeriod: reconnect ? reconnectPeriod : 0,
+    reconnectPeriod: reconnect ? reconnectPeriod : 0,
     protocolVersion,
   }
   options.connectTimeout = time.convertSecondsToMs(connectTimeout)
@@ -148,6 +148,7 @@ export const getDefaultRecord = (): ConnectionModel => {
     keepalive: 60,
     connectTimeout: 10,
     reconnect: false,
+    reconnectPeriod: 4000,
     username: '',
     password: '',
     path: '/mqtt',

diff --git a/web/src/views/connections/ConnectionForm.vue b/web/src/views/connections/ConnectionForm.vue
@@ -244,6 +244,23 @@
                 </el-form-item>
               </el-col>
               <el-col :span="2"></el-col>
+              <template v-if="record.reconnect">
+                <el-col :span="22">
+                  <el-form-item :label="$t('connections.reconnectPeriod')" prop="reconnectPeriod">
+                    <el-input-number
+                      size="mini"
+                      type="number"
+                      :min="1"
+                      v-model="record.reconnectPeriod"
+                      controls-position="right"
+                    >
+                    </el-input-number>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="2">
+                  <div class="unit">({{ $t('common.unitMS') }})</div>
+                </el-col>
+              </template>
               <el-col :span="22">
                 <el-form-item :label="$t('connections.mqttVersion')" prop="mqttVersion">
                   <el-select size="mini" v-model="record.mqttVersion">