feat(connection): support hex format

src/utils/convertPayload.ts

@@ -18,10 +18,12 @@ const convertBase64 = (value: string, codeType: 'encode' | 'decode'): string =>
 const convertHex = (value: string, codeType: 'encode' | 'decode'): string => {
   const convertMap: CodeType = {
     encode(str: string): string {
-      return Buffer.from(str, 'utf-8').toString('hex')
+      return Buffer.from(str, 'utf-8')
+        .toString('hex')
+        .replace(/(.{4})/g, '$1 ')
     },
     decode(str: string): string {
-      return Buffer.from(str, 'hex').toString('utf-8')
+      return Buffer.from(str.replaceAll(' ', ''), 'hex').toString('utf-8')
     },
   }
   return convertMap[codeType](value)
@@ -39,25 +41,25 @@ const convertJSON = (value: string): Promise<string> =>
   })
 
 const convertPayload = async (payload: string, currentType: PayloadType, fromType: PayloadType): Promise<string> => {
-  let _payload = payload
+  let $payload = payload
   switch (fromType) {
     case 'Base64':
-      _payload = convertBase64(payload, 'decode')
+      $payload = convertBase64(payload, 'decode')
       break
     case 'Hex':
-      _payload = convertHex(payload, 'decode')
+      $payload = convertHex(payload, 'decode')
       break
   }
   if (currentType === 'Base64') {
-    _payload = convertBase64(_payload, 'encode')
+    $payload = convertBase64($payload, 'encode')
   }
   if (currentType === 'JSON') {
-    _payload = await convertJSON(_payload)
+    $payload = await convertJSON($payload)
   }
   if (currentType === 'Hex') {
-    _payload = convertHex(_payload, 'encode')
+    $payload = convertHex($payload, 'encode')
   }
-  return _payload
+  return $payload
 }
 
 export default convertPayload

src/views/connections/ConnectionsDetail.vue

@@ -1113,13 +1113,16 @@ export default class ConnectionsDetail extends Vue {
           this.messagesAddedNewItem = true
           let receivedLog = `${this.record.name} message arrived: message added "${
             receivedMessage.id
-          }" added to topic "${topic}", payload: ${JSON.stringify(
+          }" and added to topic: "${topic}", payload: ${JSON.stringify(
             receivedMessage.payload,
           )} MQTT.js onMessageArrived trigger`
           if (this.record.mqttVersion === '5.0') {
             const logProperties = JSON.stringify(receivedMessage.properties)
             receivedLog += ` with Properties: ${logProperties}`
           }
+          if (retain) {
+            receivedLog += `, Retain Message`
+          }
           this.$log.info(receivedLog)
         }
       } else {
@@ -1297,19 +1300,23 @@ export default class ConnectionsDetail extends Vue {
   // Convert payload by type
   private convertPayloadByType(value: Buffer | string, type: PayloadType, way: 'publish' | 'receive'): Buffer | string {
     const genPublishPayload = (publishType: PayloadType, publishValue: string) => {
-      if (['Base64', 'Hex'].includes(publishType)) {
-        const $type = publishType.toLowerCase() as PayloadConvertType
-        return Buffer.from(publishValue, $type)
+      if (publishType === 'Base64') {
+        return Buffer.from(publishValue, 'base64')
+      }
+      if (publishType === 'Hex') {
+        return Buffer.from(publishValue.replaceAll(' ', ''), 'hex')
       }
       if (publishType === 'JSON') {
         validFormatJson(publishValue, this.$t('connections.publishMsg'))
       }
       return publishValue
     }
     const genReceivePayload = (receiveType: PayloadType, receiveValue: Buffer) => {
-      if (['Base64', 'Hex'].includes(receiveType)) {
-        const $type = receiveType.toLowerCase() as 'base64' | 'hex'
-        return receiveValue.toString($type)
+      if (receiveType === 'Base64') {
+        return receiveValue.toString('base64')
+      }
+      if (receiveType === 'Hex') {
+        return receiveValue.toString('hex').replace(/(.{4})/g, '$1 ')
       }
       if (receiveType === 'JSON') {
         const jsonValue = validFormatJson(receiveValue.toString(), this.$t('connections.receivedMsg'))