feat: add support for GZIP decompression

src/components/SubscriptionsList.vue

@@ -177,6 +177,11 @@
               </el-input>
             </el-form-item>
           </el-col>
+          <el-col :span="24">
+            <el-form-item>
+              <el-checkbox v-model="subRecord.decompressGzip">{{ $t('connections.decompressGzip') }}</el-checkbox>
+            </el-form-item>
+          </el-col>
           <!-- MQTT 5.0 -->
           <template v-if="record.mqttVersion === '5.0'">
             <div class="topic-mqtt5">
@@ -280,6 +285,7 @@ export default class SubscriptionsList extends Vue {
     rap: false,
     rh: 0,
     subscriptionIdentifier: undefined,
+    decompressGzip: false,
   }
   private retainHandling: RetainHandlingList = [0, 1, 2]
   private qosOption: QoSList = [0, 1, 2]
@@ -646,6 +652,7 @@ export default class SubscriptionsList extends Vue {
     this.subRecord.rh = 0
     this.subRecord.subscriptionIdentifier = undefined
     this.subRecord.disabled = false
+    this.subRecord.decompressGzip = false
     this.selectedTopic = null
   }
 

src/lang/connections.ts

@@ -789,6 +789,13 @@ export default {
     ja: 'サブスクリプション識別子',
     hu: 'Előfizetési azonosító',
   },
+  decompressGzip: {
+    zh: '使用 GZIP 解压',
+    en: 'Decompress with GZIP',
+    tr: 'GZIP ile Aç',
+    ja: 'GZIPで解凍',
+    hu: 'GZIP kitömörítés',
+  },
   qos0: {
     zh: '最多一次',
     en: 'At most once',

src/types/global.d.ts

@@ -173,6 +173,7 @@ declare global {
     rap?: boolean
     rh?: RetainHandling
     subscriptionIdentifier?: number | null
+    decompressGzip?: boolean
   }
 
   interface MessageModel {

src/views/connections/ConnectionsDetail.vue

@@ -335,6 +335,7 @@ import _ from 'lodash'
 import { Subject, fromEvent } from 'rxjs'
 import { bufferTime, map, filter, takeUntil, shareReplay, distinctUntilChanged } from 'rxjs/operators'
 import cbor from 'cbor'
+import zlib from 'zlib'
 import { pack, unpack } from 'msgpackr'
 
 import time from '@/utils/time'
@@ -1343,6 +1344,16 @@ export default class ConnectionsDetail extends Vue {
     const { qos, retain, properties } = packet
     let receivedPayload
     let jsonMsgError = ''
+
+    // Decompress GZIP if the matching subscription has decompressGzip enabled
+    const matchedSub = this.record.subscriptions.find((sub) => matchTopicMethod(sub.topic, topic))
+    if (matchedSub?.decompressGzip) {
+      try {
+        payload = zlib.gunzipSync(payload)
+      } catch (e) {
+        this.$log.error(`GZIP decompression failed for topic "${topic}": ${(e as Error).message}`)
+      }
+    }
     /*
      * Payload processing pipeline for receiving a message:
      *      1. Raw Payload

web/package.json

@@ -33,6 +33,7 @@
     "moment": "^2.29.4",
     "monaco-editor": "^0.25.2",
     "mqtt": "4.3.7",
+    "pako": "^2.1.0",
     "rxjs": "6.2.0",
     "vue": "~2.6.10",
     "vue-class-component": "^7.0.2",
@@ -57,6 +58,7 @@
     "@types/markdown-it": "^14.1.1",
     "@types/mocha": "^5.2.7",
     "@types/node": "18.19.76",
+    "@types/pako": "^2.0.4",
     "@types/ws": "^8.5.3",
     "@typescript-eslint/eslint-plugin": "^3.8.0",
     "@typescript-eslint/parser": "^3.8.0",

web/src/components/SubscriptionsList.vue

@@ -166,6 +166,11 @@
               </el-input>
             </el-form-item>
           </el-col>
+          <el-col :span="24">
+            <el-form-item>
+              <el-checkbox v-model="subRecord.decompressGzip">{{ $t('connections.decompressGzip') }}</el-checkbox>
+            </el-form-item>
+          </el-col>
           <!-- MQTT 5.0 -->
           <template v-if="record.mqttVersion === '5.0'">
             <div class="topic-mqtt5">
@@ -266,6 +271,7 @@ export default class SubscriptionsList extends Vue {
     rap: undefined,
     rh: undefined,
     subscriptionIdentifier: undefined,
+    decompressGzip: false,
   }
   private retainHandling: RetainHandlingList = [0, 1, 2]
   private qosOption: QoSList = [0, 1, 2]
@@ -575,6 +581,7 @@ export default class SubscriptionsList extends Vue {
     this.subRecord.rh = undefined
     this.subRecord.subscriptionIdentifier = undefined
     this.subRecord.disabled = false
+    this.subRecord.decompressGzip = false
     this.selectedTopic = null
   }
 

web/src/lang/connections.ts

@@ -490,6 +490,11 @@ export default {
     en: 'Subscription Identifier',
     ja: 'サブスクリプション識別子',
   },
+  decompressGzip: {
+    zh: '使用 GZIP 解压',
+    en: 'Decompress with GZIP',
+    ja: 'GZIPで解凍',
+  },
   noLocal: {
     zh: '禁止本地转发',
     en: 'No Local',

web/src/types/global.d.ts

@@ -174,6 +174,7 @@ declare global {
     rap?: boolean
     rh?: RetainHandling
     subscriptionIdentifier?: number | null
+    decompressGzip?: boolean
   }
 
   interface MessageModel {

web/src/views/connections/ConnectionsDetail.vue

@@ -220,6 +220,7 @@ import { deleteConnection, updateConnection, updateConnectionMessage } from '@/u
 import time from '@/utils/time'
 import matchSearch from '@/utils/matchSearch'
 import topicMatch, { matchTopicMethod } from '@/utils/topicMatch'
+import pako from 'pako'
 import { createClient } from '@/utils/mqttUtils'
 import { getMessageId } from '@/utils/idGenerator'
 
@@ -511,13 +512,7 @@ export default class ConnectionsDetail extends Vue {
   get marginLeft(): string {
     if (!this.showConnectionList) {
       // ConnectionsList hidden: subtract its width (320px / 400px) from the offsets.
-      return this.showSubs
-        ? this.largeDesktop
-          ? '516px'
-          : '356px'
-        : this.largeDesktop
-        ? '116px'
-        : '76px'
+      return this.showSubs ? (this.largeDesktop ? '516px' : '356px') : this.largeDesktop ? '116px' : '76px'
     }
     return this.showSubs ? (this.largeDesktop ? '916px' : '676px') : this.largeDesktop ? '517px' : '397px'
   }
@@ -853,6 +848,17 @@ export default class ConnectionsDetail extends Vue {
   private onMessageArrived(id: string) {
     return (topic: string, payload: Buffer, packet: IPublishPacket) => {
       const { qos, retain, properties } = packet
+
+      // Decompress GZIP if the matching subscription has decompressGzip enabled
+      const matchedSub = this.record.subscriptions.find((sub) => matchTopicMethod(sub.topic, topic))
+      if (matchedSub?.decompressGzip) {
+        try {
+          payload = Buffer.from(pako.ungzip(payload))
+        } catch (e) {
+          console.error(`GZIP decompression failed for topic "${topic}": ${(e as Error).message}`)
+        }
+      }
+
       const convertPayload = this.convertPayloadByType(payload, this.receivedMsgType, 'receive') as string
       const receivedMessage: MessageModel = {
         id: getMessageId(),