refactor(connection): clean session -> clean start on mqtt5

emqx · Oct 9, 2022 · fae4b3e · fae4b3e
1 parent de40826
commit fae4b3e
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 33 deletions.
diff --git a/src/lang/common.ts b/src/lang/common.ts
@@ -244,4 +244,11 @@ export default {
     ja: '複製',
     hu: 'Másol',
   },
+  neverExpire: {
+    zh: '永不过期',
+    en: 'Never Expire',
+    tr: 'Süresiz',
+    ja: '期限なし',
+    hu: 'Soha ne járjon le',
+  },
 }
diff --git a/src/lang/connections.ts b/src/lang/connections.ts
@@ -265,13 +265,6 @@ export default {
     ja: '接続タイムアウト',
     hu: 'Kapcsolat időtúlléps',
   },
-  cleanSession: {
-    zh: '清除会话',
-    en: 'Clean Session',
-    tr: 'Temiz Oturum',
-    ja: 'セッションクリア',
-    hu: 'Munkamenet törlése',
-  },
   autoReconnect: {
     zh: '自动重连',
     en: 'Auto Reconnect',

diff --git a/src/utils/mqttUtils.ts b/src/utils/mqttUtils.ts
@@ -5,11 +5,19 @@ import time from '@/utils/time'
 import { getSSLFile } from '@/utils/getFiles'
 import _ from 'lodash'
 
-const setMQTT5Properties = (option: ClientPropertiesModel) => {
+const setMQTT5Properties = ({ clean, properties: option }: ConnectionModel) => {
   if (option === undefined) {
     return undefined
   }
   const properties: ClientPropertiesModel = _.cloneDeep(option)
+  if (properties.sessionExpiryInterval === null && !clean) {
+    /**
+      Clean Start set True and Session Expiry Interval set 0, the server MUST delete any Session State it holds for the Client
+      Clean Start set False and Session Expiry Interval set 4294967295, the server MUST NOT delete any Session State it holds for the Client
+      Non-standard usage, user-friendly only, remember that Clean Start needs to be used with sessionExpiryInterval In MQTT 5.0
+    **/
+    properties.sessionExpiryInterval = 4294967295
+  }
   return Object.fromEntries(Object.entries(properties).filter(([_, v]) => v !== null && v !== undefined))
 }
 
@@ -66,7 +74,7 @@ const getClientOptions = (record: ConnectionModel): IClientOptions => {
   }
   // MQTT Version
   if (protocolVersion === 5 && record.properties) {
-    const properties = setMQTT5Properties(record.properties)
+    const properties = setMQTT5Properties(record)
     if (properties && Object.keys(properties).length > 0) {
       options.properties = properties
     }
@@ -188,7 +196,7 @@ export const getDefaultRecord = (): ConnectionModel => {
       },
     },
     properties: {
-      sessionExpiryInterval: undefined,
+      sessionExpiryInterval: 0,
       receiveMaximum: undefined,
       maximumPacketSize: undefined,
       topicAliasMaximum: undefined,

diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue
@@ -236,6 +236,16 @@
         <el-collapse-transition>
           <el-card v-show="advancedVisible" shadow="never" class="info-body item-card">
             <el-row :gutter="10">
+              <el-col :span="22">
+                <el-form-item :label="$t('connections.mqttVersion')" prop="mqttVersion">
+                  <el-select size="mini" v-model="record.mqttVersion">
+                    <el-option value="3.1" label="3.1"></el-option>
+                    <el-option value="3.1.1" label="3.1.1"></el-option>
+                    <el-option value="5.0" label="5.0"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="2"></el-col>
               <el-col :span="22">
                 <el-form-item :label="$t('connections.connectionTimeout')" prop="connectTimeout">
                   <el-input-number
@@ -266,21 +276,9 @@
               <el-col :span="2"
                 ><div class="unit">({{ $t('common.unitS') }})</div></el-col
               >
-              <el-col :span="22">
-                <el-form-item :label="$t('connections.cleanSession')" prop="clean">
-                  <el-radio-group v-model="record.clean">
-                    <el-radio :label="true"></el-radio>
-                    <el-radio :label="false"></el-radio>
-                  </el-radio-group>
-                </el-form-item>
-              </el-col>
-              <el-col :span="2"></el-col>
               <el-col :span="22">
                 <el-form-item :label="$t('connections.autoReconnect')" prop="reconnect">
-                  <el-radio-group v-model="record.reconnect">
-                    <el-radio :label="true"></el-radio>
-                    <el-radio :label="false"></el-radio>
-                  </el-radio-group>
+                  <el-switch v-model="record.reconnect" active-color="#13ce66" inactive-color="#A2A9B0"> </el-switch>
                 </el-form-item>
               </el-col>
               <el-col :span="2"></el-col>
@@ -302,24 +300,25 @@
                 </el-col>
               </template>
               <el-col :span="22">
-                <el-form-item :label="$t('connections.mqttVersion')" prop="mqttVersion">
-                  <el-select size="mini" v-model="record.mqttVersion">
-                    <el-option value="3.1" label="3.1"></el-option>
-                    <el-option value="3.1.1" label="3.1.1"></el-option>
-                    <el-option value="5.0" label="5.0"></el-option>
-                  </el-select>
+                <el-form-item :label="record.mqttVersion === '5.0' ? 'Clean Start' : 'Clean Session'" prop="clean">
+                  <el-switch
+                    v-model="record.clean"
+                    active-color="#13ce66"
+                    inactive-color="#A2A9B0"
+                    @change="handleClean"
+                  >
+                  </el-switch>
                 </el-form-item>
               </el-col>
               <el-col :span="2"></el-col>
-
-              <!-- MQTT v5.0 -->
               <template v-if="record.mqttVersion === '5.0'">
                 <el-col :span="22">
                   <el-form-item :label="$t('connections.sessionExpiryInterval')" prop="sessionExpiryInterval">
                     <el-input
                       size="mini"
                       type="number"
-                      :min="1"
+                      :min="0"
+                      :placeholder="$t('common.neverExpire')"
                       v-model.number="record.properties.sessionExpiryInterval"
                     >
                     </el-input>
@@ -328,6 +327,10 @@
                 <el-col :span="2">
                   <div class="unit">({{ $t('common.unitS') }})</div>
                 </el-col>
+              </template>
+
+              <!-- MQTT v5.0 -->
+              <template v-if="record.mqttVersion === '5.0'">
                 <el-col :span="22">
                   <el-form-item :label="$t('connections.receiveMaximum')" prop="receiveMaximum">
                     <el-input size="mini" type="number" :min="1" v-model.number="record.properties.receiveMaximum">
@@ -647,6 +650,7 @@ export default class ConnectionForm extends Vue {
       } else {
         // update a exisit connection
         if (data.id) {
+          console.log(data.properties)
           res = await connectionService.updateWithCascade(data.id, {
             ...data,
             updateAt: time.getNowDate(),
@@ -706,6 +710,17 @@ export default class ConnectionForm extends Vue {
     }
   }
 
+  private handleClean(val: boolean) {
+    if (this.record.mqttVersion !== '5.0') {
+      return
+    }
+    if (val && this.record.properties) {
+      this.$set(this.record.properties, 'sessionExpiryInterval', 0)
+    } else if (!val && this.record.properties) {
+      this.$set(this.record.properties, 'sessionExpiryInterval', null)
+    }
+  }
+
   private changeProtocol(protocol: Protocol | undefined, isSSL: boolean): void | boolean {
     if (!protocol) {
       return false

diff --git a/src/views/connections/ConnectionInfo.vue b/src/views/connections/ConnectionInfo.vue
@@ -67,7 +67,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="Clean Session">
+          <el-form-item :label="connection.mqttVersion === '5.0' ? 'Clean Start' : 'Clean Session'">
             <el-checkbox v-model="connection.clean" :disabled="isClientConnected" border>{{
               connection.clean ? 'true' : 'false'
             }}</el-checkbox>