feat(desktop): Add MsgPack support for publishing message

cli/src/utils/convertPayload.ts

@@ -1,6 +1,7 @@
 import chalk from 'chalk'
 import { jsonParse, jsonStringify } from './jsonUtils'
 import cbor from 'cbor'
+import { pack, unpack } from 'msgpackr'
 import { basicLog } from './logWrapper'
 
 type Action = 'encode' | 'decode'
@@ -42,6 +43,20 @@ const convertCBOR = (value: Buffer | string, action: Action) => {
   }
 }
 
+/**
+ * Converts a MsgPack payload to JSON or vice versa.
+ * @param value - The MsgPack payload to convert.
+ * @param action - The action to perform: 'decode' to convert MsgPack to JSON, 'encode' to convert JSON to MsgPack.
+ * @returns The converted payload.
+ */
+const convertMsgPack = (value: Buffer | string, action: Action) => {
+  try {
+    return action === 'decode' ? jsonStringify(unpack(value as Buffer), null, 2) : pack(JSON.parse(value.toString()))
+  } catch (err) {
+    return handleError(err, value, action)
+  }
+}
+
 /**
  * Converts the payload based on the specified format and action.
  * @param payload - The payload to be converted.
@@ -56,6 +71,7 @@ const convertPayload = (payload: Buffer | string, format?: FormatType, action: A
       json: () => convertJSON(payload, 'encode'),
       hex: () => Buffer.from(payload.toString().replace(/\s+/g, ''), 'hex'),
       cbor: () => convertCBOR(payload, 'encode'),
+      msgpack: () => convertMsgPack(payload, 'encode'),
       binary: () => payload,
       default: () => Buffer.from(payload.toString(), 'utf-8'),
     },
@@ -64,6 +80,7 @@ const convertPayload = (payload: Buffer | string, format?: FormatType, action: A
       json: () => convertJSON(payload, 'decode'),
       hex: () => payload.toString('hex').replace(/(.{4})/g, '$1 '),
       cbor: () => convertCBOR(payload, 'decode'),
+      msgpack: () => convertMsgPack(payload, 'decode'),
       binary: () => payload,
       default: () => payload.toString('utf-8'),
     },

src/components/MsgPublish.vue

@@ -302,7 +302,7 @@ export default class MsgPublish extends Vue {
   }
   private payloadLang = 'json'
   private payloadType: PayloadType = 'JSON'
-  private payloadOptions: PayloadType[] = ['Plaintext', 'JSON', 'Base64', 'Hex', 'CBOR']
+  private payloadOptions: PayloadType[] = ['Plaintext', 'JSON', 'Base64', 'Hex', 'CBOR', 'MsgPack']
 
   @Watch('editorHeight')
   private handleHeightChanged() {
@@ -311,7 +311,7 @@ export default class MsgPublish extends Vue {
   @Watch('payloadType')
   private handleTypeChange(val: PayloadType, oldVal: PayloadType) {
     const { payload } = this.msgRecord
-    if (['CBOR', 'JSON'].includes(val)) {
+    if (['CBOR', 'JSON', 'MsgPack'].includes(val)) {
       this.payloadLang = 'json'
     } else {
       this.payloadLang = 'plaintext'

src/views/connections/ConnectionsDetail.vue

@@ -328,7 +328,7 @@ import _ from 'lodash'
 import { Subject, fromEvent } from 'rxjs'
 import { bufferTime, map, filter, takeUntil, shareReplay } from 'rxjs/operators'
 import cbor from 'cbor'
-import { unpack } from 'msgpackr'
+import { pack, unpack } from 'msgpackr'
 
 import time from '@/utils/time'
 import matchMultipleSearch from '@/utils/matchMultipleSearch'
@@ -1297,7 +1297,7 @@ export default class ConnectionsDetail extends Vue {
     this.updateMeta(receivedMessage, 'function', 'received')
     this.updateMeta(receivedMessage, 'schema', 'received')
     this.updateMetaMsgType(receivedMessage, this.receivedMsgType)
-    if (['JSON', 'CBOR'].includes(this.receivedMsgType) && jsonMsgError) {
+    if (['JSON', 'CBOR', 'MsgPack'].includes(this.receivedMsgType) && jsonMsgError) {
       this.updateMetaError(receivedMessage, jsonMsgError)
     }
     if (isLargeData(receivedMessage.payload)) {
@@ -1749,6 +1749,16 @@ export default class ConnectionsDetail extends Vue {
           return undefined
         }
       }
+      if (publishType === 'MsgPack') {
+        try {
+          return pack(JSON.parse(publishValue))
+        } catch (error) {
+          const err = error as Error
+          let errorMessage = `${this.$t('connections.publishMsg')} ${err.toString()}`
+          this.$message.error(errorMessage)
+          return undefined
+        }
+      }
       return publishValue
     }
     const genReceivePayload = (receiveType: PayloadType, receiveValue: Buffer) => {