Reverse the order of WebSocket events (#5148)

* Reverse the event log order in the view and subscribe to messages after the latest

packages/insomnia/src/main/network/websocket.ts

@@ -96,7 +96,8 @@ const dispatchWebSocketEvent = (target: Electron.WebContents, eventChannel: stri
   // Otherwise, append to send queue for this event channel.
   const sendQueue = sendQueueMap.get(eventChannel);
   if (sendQueue) {
-    sendQueue.push(wsEvent);
+    // Add the event to the top of queue so that the latest message is first.
+    sendQueue.unshift(wsEvent);
   } else {
     sendQueueMap.set(eventChannel, [wsEvent]);
   }
@@ -433,7 +434,10 @@ const findMany = async (
   }
   const body = await fs.promises.readFile(response.bodyPath);
   return body.toString().split('\n').filter(e => e?.trim())
-    .map(e => JSON.parse(e)) || [];
+    // Parse the message
+    .map(e => JSON.parse(e))
+    // Reverse the list of messages so that we get the latest message first
+    .reverse() || [];
 };
 
 /**

packages/insomnia/src/ui/context/websocket-client/use-ws-connection-events.ts

@@ -23,12 +23,21 @@ export function useWebSocketConnectionEvents({ responseId }: { responseId: strin
       if (isMounted) {
         setEvents(allEvents);
       }
+
+      const afterLatestEvent = (event: WebSocketEvent, prevEvents: WebSocketEvent[]) => {
+        if (prevEvents.length === 0) {
+          return true;
+        }
+
+        return event.timestamp > prevEvents[0]?.timestamp;
+      };
+
       // Subscribe to new events and update the state.
       unsubscribe = window.main.on(`webSocket.${responseId}.event`,
         (_, events: WebSocketEvent[]) => {
           console.log('received events', events);
           if (isMounted) {
-            setEvents(allEvents => allEvents.concat(events));
+            setEvents(prevEvents => events.filter(event => afterLatestEvent(event, prevEvents)).concat(prevEvents));
           }
 
           // Wait to give the CTS signal until we've rendered a frame.