feat(web): fully synchronized create connection form

emqx · Sep 17, 2022 · fc4001f · fc4001f
1 parent bc999a3
commit fc4001f
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 72 deletions.
diff --git a/web/src/lang/connections.ts b/web/src/lang/connections.ts
@@ -285,8 +285,8 @@ export default {
     ja: '遺言',
   },
   strictValidateCertificate: {
-    zh: '严格证书验证',
-    en: 'Strict validate Certificate',
+    zh: 'SSL 安全',
+    en: 'SSL Secure',
     ja: 'SSL証明書',
   },
   willTopic: {
@@ -324,11 +324,6 @@ export default {
     en: 'Content Type',
     ja: '遺言詳細情報',
   },
-  isUTF8Data: {
-    zh: '是否为 UTF-8 编码数据',
-    en: 'is UTF-8 Encoded Data',
-    ja: 'UTF-8エンコードデータフラグ',
-  },
   duplicateName: {
     zh: '该名称已存在，请重新命名！',
     en: 'Duplicate name. Please rename it!',
@@ -339,6 +334,16 @@ export default {
     en: 'Quick selection of created connection configurations',
     ja: '作成された接続構成を早めに選択することができます',
   },
+  clientIdWithTimeTip: {
+    zh: '在连接时附加时间戳到 ClientID，以防止重复的连接',
+    en: 'Append a timestamp to the ClientID at connection time to prevent duplicate connections',
+    ja: '重複接続を防ぐために、ClientIDにタイムスタンプを追加します',
+  },
+  secureTip: {
+    zh: '是否验证服务端证书链和地址名称',
+    en: "Whether a client verifies the server's certificate chain and host name",
+    ja: "Whether a client verifies the server's certificate chain and host name",
+  },
   publishMsg: {
     zh: '发送消息',
     en: 'Publish message',

diff --git a/web/src/types/global.d.ts b/web/src/types/global.d.ts
@@ -25,6 +25,8 @@ declare global {
 
   type CertType = '' | 'server' | 'self'
 
+  type MqttVersion = '3.1.1' | '5.0'
+
   enum ProtocolOption {
     ws = 'ws',
     wss = 'wss',
@@ -269,6 +271,8 @@ declare global {
     name: string
     clean: boolean
     protocol?: Protocol
+    createAt: string
+    updateAt: string
     host: string
     port: number
     keepalive: number
@@ -280,7 +284,7 @@ declare global {
     path: string
     certType?: CertType
     ssl: boolean
-    mqttVersion: '3.1.1' | '5.0'
+    mqttVersion: MqttVersion
     unreadMessageCount: number
     messages: MessageModel[]
     pushProps: PushPropertiesModel
@@ -292,5 +296,6 @@ declare global {
         }
     will?: WillModel
     properties?: ClientPropertiesModel
+    clientIdWithTime?: boolean
   }
 }
diff --git a/web/src/utils/mqttUtils.ts b/web/src/utils/mqttUtils.ts
@@ -40,9 +40,9 @@ const getClientOptions = (record: ConnectionModel): IClientOptions => {
     reconnectPeriod, // reconnectPeriod = 0 disabled automatic reconnection in the client
     will,
     rejectUnauthorized,
-    // clientIdWithTime,
+    clientIdWithTime,
   } = record
-  const protocolVersion = mqttVersionDict[mqttVersion as '3.1.1' | '5.0']
+  const protocolVersion = mqttVersionDict[mqttVersion]
   const options: IClientOptions = {
     clientId,
     keepalive,
@@ -52,10 +52,10 @@ const getClientOptions = (record: ConnectionModel): IClientOptions => {
   }
   options.connectTimeout = time.convertSecondsToMs(connectTimeout)
   // Append timestamp to MQTT client id
-  // if (clientIdWithTime) {
-  //   const clickIconTime = Date.parse(new Date().toString())
-  //   options.clientId = `${options.clientId}_${clickIconTime}`
-  // }
+  if (clientIdWithTime) {
+    const clickIconTime = Date.parse(new Date().toString())
+    options.clientId = `${options.clientId}_${clickIconTime}`
+  }
   // Auth
   if (username !== '') {
     options.username = username
@@ -141,6 +141,8 @@ export const getMQTTProtocol = (data: ConnectionModel): Protocol => {
 export const getDefaultRecord = (): ConnectionModel => {
   return {
     clientId: getClientId(),
+    createAt: time.getNowDate(),
+    updateAt: time.getNowDate(),
     name: '',
     clean: true,
     protocol: 'ws',
@@ -155,7 +157,7 @@ export const getDefaultRecord = (): ConnectionModel => {
     port: 8083,
     ssl: false,
     certType: '',
-    rejectUnauthorized: false,
+    rejectUnauthorized: true,
     ca: '',
     cert: '',
     key: '',
@@ -177,6 +179,9 @@ export const getDefaultRecord = (): ConnectionModel => {
         willDelayInterval: undefined,
         messageExpiryInterval: undefined,
         contentType: '',
+        responseTopic: '',
+        correlationData: undefined,
+        userProperties: undefined,
       },
     },
     properties: {
@@ -190,6 +195,7 @@ export const getDefaultRecord = (): ConnectionModel => {
       authenticationMethod: undefined,
       authenticationData: undefined,
     },
+    clientIdWithTime: false,
   }
 }