From 47a1cea2be4ff99f262105fbeab6439734d6f4cb Mon Sep 17 00:00:00 2001 From: Filipe Freire Date: Mon, 24 Apr 2023 17:40:51 +0100 Subject: [PATCH] Add better support for binary data on WebSocket connections (#5897) * add /binary data endpoint to smoke test server * add function to deal with diff event.data types * step 1 * step 2 * final step * CR improvements * update deps & fix type-check --- .../insomnia-smoke-test/package-lock.json | 30 +++++++++---------- packages/insomnia-smoke-test/package.json | 4 +-- .../insomnia-smoke-test/server/websocket.ts | 10 +++++++ packages/insomnia/package-lock.json | 30 +++++++++---------- packages/insomnia/package.json | 4 +-- .../components/websockets/event-log-view.tsx | 3 ++ .../ui/components/websockets/event-view.tsx | 15 ++++++++-- 7 files changed, 60 insertions(+), 36 deletions(-) diff --git a/packages/insomnia-smoke-test/package-lock.json b/packages/insomnia-smoke-test/package-lock.json index 4e0b33ef7c..7fcbc3caa1 100644 --- a/packages/insomnia-smoke-test/package-lock.json +++ b/packages/insomnia-smoke-test/package-lock.json @@ -22,7 +22,7 @@ "@types/mkdirp": "^1.0.1", "@types/oidc-provider": "^7.8.1", "@types/uuid": "^8.3.4", - "@types/ws": "^8.5.3", + "@types/ws": "^8.5.4", "concurrently": "^7.0.0", "cross-env": "^7.0.3", "esbuild-runner": "2.2.1", @@ -37,7 +37,7 @@ "mkdirp": "^1.0.4", "oidc-provider": "^7.10.6", "uuid": "^8.3.2", - "ws": "^8.8.1", + "ws": "^8.13.0", "xvfb-maybe": "^0.2.1" } }, @@ -1491,9 +1491,9 @@ "dev": true }, "node_modules/@types/ws": { - "version": "8.5.3", - "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", - "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==", + "version": "8.5.4", + "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz", + "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==", "dev": true, "dependencies": { "@types/node": "*" @@ -6094,16 +6094,16 @@ } }, "node_modules/ws": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz", - "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==", + "version": "8.13.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz", + "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==", "dev": true, "engines": { "node": ">=10.0.0" }, "peerDependencies": { "bufferutil": "^4.0.1", - "utf-8-validate": "^5.0.2" + "utf-8-validate": ">=5.0.2" }, "peerDependenciesMeta": { "bufferutil": { @@ -7447,9 +7447,9 @@ "dev": true }, "@types/ws": { - "version": "8.5.3", - "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", - "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==", + "version": "8.5.4", + "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz", + "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==", "dev": true, "requires": { "@types/node": "*" @@ -10905,9 +10905,9 @@ } }, "ws": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz", - "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==", + "version": "8.13.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz", + "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==", "dev": true, "requires": {} }, diff --git a/packages/insomnia-smoke-test/package.json b/packages/insomnia-smoke-test/package.json index 4a706c9d09..dc74280418 100644 --- a/packages/insomnia-smoke-test/package.json +++ b/packages/insomnia-smoke-test/package.json @@ -41,7 +41,7 @@ "@types/mkdirp": "^1.0.1", "@types/oidc-provider": "^7.8.1", "@types/uuid": "^8.3.4", - "@types/ws": "^8.5.3", + "@types/ws": "^8.5.4", "concurrently": "^7.0.0", "cross-env": "^7.0.3", "esbuild-runner": "2.2.1", @@ -56,7 +56,7 @@ "mkdirp": "^1.0.4", "oidc-provider": "^7.10.6", "uuid": "^8.3.2", - "ws": "^8.8.1", + "ws": "^8.13.0", "xvfb-maybe": "^0.2.1" } } diff --git a/packages/insomnia-smoke-test/server/websocket.ts b/packages/insomnia-smoke-test/server/websocket.ts index 3c912aacc5..29344ccade 100644 --- a/packages/insomnia-smoke-test/server/websocket.ts +++ b/packages/insomnia-smoke-test/server/websocket.ts @@ -30,6 +30,16 @@ const handleConnection = (ws: WebSocket, req: IncomingMessage) => { ws.send(message); return; } + + // Returns binary data + if (req.url === '/binary') { + ws.send(Buffer.alloc(0)); + ws.send(Buffer.from('test')); + ws.send(message); + ws.send(message.toString()); + return; + } + if (message.toString() === 'close') { ws.close(1003, 'Invalid message type'); } diff --git a/packages/insomnia/package-lock.json b/packages/insomnia/package-lock.json index a8db6417c4..695b2d699a 100644 --- a/packages/insomnia/package-lock.json +++ b/packages/insomnia/package-lock.json @@ -103,7 +103,7 @@ "@types/tough-cookie": "^2.3.7", "@types/uuid": "^8.3.4", "@types/vkbeautify": "^0.99.2", - "@types/ws": "^8.5.3", + "@types/ws": "^8.5.4", "@types/xmldom": "0.1.30", "@types/yaml": "^1.9.7", "@vitejs/plugin-react": "^2.2.0", @@ -156,7 +156,7 @@ "typescript-json-schema": "^0.50.1", "vite": "^3.2.3", "vkbeautify": "^0.99.1", - "ws": "^8.8.1", + "ws": "^8.13.0", "xmldom": "^0.5.0", "xpath": "0.0.32" } @@ -7159,9 +7159,9 @@ "dev": true }, "node_modules/@types/ws": { - "version": "8.5.3", - "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", - "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==", + "version": "8.5.4", + "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz", + "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==", "dev": true, "dependencies": { "@types/node": "*" @@ -21254,16 +21254,16 @@ "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "node_modules/ws": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz", - "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==", + "version": "8.13.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz", + "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==", "dev": true, "engines": { "node": ">=10.0.0" }, "peerDependencies": { "bufferutil": "^4.0.1", - "utf-8-validate": "^5.0.2" + "utf-8-validate": ">=5.0.2" }, "peerDependenciesMeta": { "bufferutil": { @@ -27218,9 +27218,9 @@ "dev": true }, "@types/ws": { - "version": "8.5.3", - "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", - "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==", + "version": "8.5.4", + "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz", + "integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==", "dev": true, "requires": { "@types/node": "*" @@ -38030,9 +38030,9 @@ "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "ws": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.1.tgz", - "integrity": "sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==", + "version": "8.13.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz", + "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==", "dev": true, "requires": {} }, diff --git a/packages/insomnia/package.json b/packages/insomnia/package.json index 2f190fd451..044bd6ec2d 100644 --- a/packages/insomnia/package.json +++ b/packages/insomnia/package.json @@ -155,7 +155,7 @@ "@types/tough-cookie": "^2.3.7", "@types/uuid": "^8.3.4", "@types/vkbeautify": "^0.99.2", - "@types/ws": "^8.5.3", + "@types/ws": "^8.5.4", "@types/xmldom": "0.1.30", "@types/yaml": "^1.9.7", "@vitejs/plugin-react": "^2.2.0", @@ -208,7 +208,7 @@ "typescript-json-schema": "^0.50.1", "vite": "^3.2.3", "vkbeautify": "^0.99.1", - "ws": "^8.8.1", + "ws": "^8.13.0", "xmldom": "^0.5.0", "xpath": "0.0.32" }, diff --git a/packages/insomnia/src/ui/components/websockets/event-log-view.tsx b/packages/insomnia/src/ui/components/websockets/event-log-view.tsx index 8e8667b1f5..9cd6a8dcc1 100644 --- a/packages/insomnia/src/ui/components/websockets/event-log-view.tsx +++ b/packages/insomnia/src/ui/components/websockets/event-log-view.tsx @@ -114,6 +114,9 @@ const EventMessageCell = styled('div')({ const getMessage = (event: WebSocketEvent): string => { switch (event.type) { case 'message': { + if ('data' in event && typeof event.data === 'object') { + return 'Binary data'; + } return event.data.toString(); } case 'open': { diff --git a/packages/insomnia/src/ui/components/websockets/event-view.tsx b/packages/insomnia/src/ui/components/websockets/event-view.tsx index da196cfaad..416baefb16 100644 --- a/packages/insomnia/src/ui/components/websockets/event-view.tsx +++ b/packages/insomnia/src/ui/components/websockets/event-view.tsx @@ -38,8 +38,19 @@ const PreviewPaneContents = styled.div({ }); export const MessageEventView: FC> = ({ event, requestId }) => { - // TODO: Handle non-string data. - const raw = event.data.toString('utf-8'); + + let raw = event.data.toString(); + // Best effort to parse the binary data as a string + try { + // @ts-expect-error -- should be fine + if ('data' in event && typeof event.data === 'object' && 'data' in event.data && Array.isArray(event.data.data)) { + // @ts-expect-error -- should be fine + raw = Buffer.from(event.data.data).toString(); + } + } catch (err) { + console.error('Failed to parse event data to string, defaulting to JSON.stringify', err); + raw = JSON.stringify(event.data); + } const handleDownloadResponseBody = useCallback(async () => { const { canceled, filePath: outputPath } = await window.dialog.showSaveDialog({