fix(desktop): ignore qos0 message on viewer

src/database/services/MessageService.ts

@@ -328,6 +328,12 @@ export default class MessageService {
     return transform ? transform(messages) : (messages as unknown as T[])
   }
 
+  /**
+   * Retrieves message topic node statistics for a given connection.
+   * @param connectionId - The ID of the connection to retrieve statistics for.
+   * @returns A promise that resolves to an object containing the connection model and topic statistics,
+   *          or null if the connection is not found.
+   */
   public async getMessageTopicNodeStats(connectionId: string): Promise<{
     connection: ConnectionModel
     topicStats: Array<TopicNodeStats>

src/views/viewer/TopicTree.vue

@@ -29,13 +29,13 @@ import TreeView from '@/widgets/TreeView.vue'
 import { updateTopicTreeNode } from '@/utils/topicTree'
 import { Packet } from 'mqtt-packet/types'
 import TreeNodeInfo from '@/widgets/TreeNodeInfo.vue'
-import { ignoreQoS0Message } from '@/utils/mqttUtils'
 import { MessageQueue } from '@/utils/messageQueue'
 import useServices from '@/database/useServices'
 import { Subscription } from 'rxjs'
 import ConnectionSelect from '@/components/ConnectionSelect.vue'
 import MyDialog from '@/components/MyDialog.vue'
 import SyncTopicTreeDialog from '@/widgets/SyncTopicTreeDialog.vue'
+import { ignoreQoS0Message } from '@/utils/mqttUtils'
 
 @Component({
   components: {
@@ -74,13 +74,10 @@ export default class TopicTree extends Vue {
       }, QoS: ${packet.qos}${packet.payload ? `, Payload: ${packet.payload.toString()}` : ''}`,
     )
     // Handle Tree Data Update
+    if (ignoreQoS0Message(packet.qos)) return
     this.messageQueue?.queueMessage(updatedNodes)
   }
 
-  private filterQos0Messages(messages: MessageModel[]) {
-    return messages.filter((message) => !ignoreQoS0Message(message.qos))
-  }
-
   private async loadTopicTree() {
     const { topicNodeService } = useServices()
     try {

src/views/viewer/TrafficMonitor.vue

@@ -52,6 +52,7 @@ import time from '@/utils/time'
 import { MessageQueue } from '@/utils/messageQueue'
 import { getMessageId } from '@/utils/idGenerator'
 import TimeRangeSelect from '@/components/TimeRangeSelect.vue'
+import { ignoreQoS0Message } from '@/utils/mqttUtils'
 
 interface StoreMessageModel extends MessageModel {
   connectionId: string
@@ -274,7 +275,9 @@ export default class TrafficMonitor extends Vue {
     const { messageService } = useServices()
     const messagesByConnection = new Map<string, MessageModel[]>()
 
-    storeMessages.forEach((msg) => {
+    const filterQos0Messages = storeMessages.filter((msg) => !ignoreQoS0Message(msg.qos))
+
+    filterQos0Messages.forEach((msg) => {
       const { connectionId, ...message } = msg
       const list = messagesByConnection.get(connectionId) || []
       list.push(message)