starred/proxyman-windows-linux

Fork 0

mirror of https://github.com/ProxymanApp/proxyman-windows-linux.git synced 2026-04-27 00:45:55 +03:00

[GH-ISSUE #296] Websocket: UI #1 #295

New issue

Open

opened 2026-03-03 19:49:41 +03:00 by kerem · 1 comment

kerem commented

2026-03-03 19:49:41 +03:00

Owner

Originally created by @NghiaTranUIT on GitHub (Aug 23, 2023).
Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/296

Originally assigned to: @kics223w1 on GitHub.

Description

It's time to support the WebSocket for Proxyman.

This UI ticket should be implemented at the same time as this WebSocket ticket: https://github.com/ProxymanApp/proxyman-windows-linux/issues/297

It's important because we implement the model and display it on the app for testing UI.

⚠️ Before starting this ticket, please book a small meeting with @NghiaTranUIT for demo 👍

How to test WebSocket

Open Proxyman for macOS
Clone this repo: https://github.com/NghiaTranUIT/websocket-usercases
Start Proxyman for macOS on port 9090
npm i
npm run start_ws
Observe the WebSocket flow on the app

Repeat with npm run start_wss for Secure WebSocket (WSS)
Repeat with/without enabling the SSL Proxying on the WSS -> Verify we can see the content of the Secure Websocket

Acceptance Criteria

1. UI

Able to filter the WebSocket with the WebSocket filter button
If it's a WebSocket -> Use ws or wss in the protocol
Able to show Request/Response of the Websocket

2. Websocket Tab

Show a list of WebSocket messages as a table
By default, only display two columns: Data and Time

Can Right-Click on the TableView Header -> Show the Custom Column -> Toggle to show/hide column
Support Type and Length column if it's enabled
The display Columns data should be persisted for the next launch.

3. Screenshot and Video

https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/0c3f337a-3ea9-44f3-8ebb-db7687248986

4. WebSocket Message Previewer

It's the Monaco Editor
Please note that a WebSocket message Opcode is defined:


public enum WebSocketOpcode: UInt8, Codable {
  case continuationFrame = 0x0
  case textFrame = 0x1
  case binaryFrame = 0x2
  case connectionClose = 0x8
  case ping = 0x9
  case pong = 0xA
}

Ping @NghiaTranUIT to get the file WebsocketMessageReceipt, so you can understand how it's displayed 👍
If it's a TextFrame: Detect if it's a JSON (Try to parse it) -> Auto prettify it

Originally created by @NghiaTranUIT on GitHub (Aug 23, 2023). Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/296 Originally assigned to: @kics223w1 on GitHub. ## Description It's time to support the WebSocket for Proxyman. This UI ticket should be implemented at the same time as this WebSocket ticket: https://github.com/ProxymanApp/proxyman-windows-linux/issues/297 It's important because we implement the model and display it on the app for testing UI. ⚠️ Before starting this ticket, please book a small meeting with @NghiaTranUIT for demo 👍 ### How to test WebSocket 1. Open Proxyman for macOS 2. Clone this repo: https://github.com/NghiaTranUIT/websocket-usercases 3. Start Proxyman for macOS on port 9090 4. `npm i` 5. `npm run start_ws ` 6. Observe the WebSocket flow on the app - Repeat with `npm run start_wss` for Secure WebSocket (WSS) - Repeat with/without enabling the SSL Proxying on the WSS -> Verify we can see the content of the Secure Websocket ### Acceptance Criteria #### 1. UI - Able to filter the WebSocket with the WebSocket filter button - If it's a WebSocket -> Use `ws` or `wss` in the protocol - Able to show Request/Response of the Websocket #### 2. Websocket Tab - Show a list of WebSocket messages as a table - By default, only display two columns: Data and Time <img width="744" alt="Screenshot 2023-08-23 at 09 12 23" src="https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/09c948ca-0a4d-4f72-9e76-ef8f9fe3c0e2"> - Can Right-Click on the TableView Header -> Show the Custom Column -> Toggle to show/hide column - Support Type and Length column if it's enabled - The display Columns data should be persisted for the next launch. ##### 3. Screenshot and Video ![CleanShot 2023-08-23 at 09 07 49@2x](https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/ccc379f7-6c88-45ca-b252-959d252ea3b5) https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/0c3f337a-3ea9-44f3-8ebb-db7687248986 ##### 4. WebSocket Message Previewer - It's the Monaco Editor - Please note that a WebSocket message `Opcode` is defined: ``` public enum WebSocketOpcode: UInt8, Codable { case continuationFrame = 0x0 case textFrame = 0x1 case binaryFrame = 0x2 case connectionClose = 0x8 case ping = 0x9 case pong = 0xA } ``` - Ping @NghiaTranUIT to get the file `WebsocketMessageReceipt`, so you can understand how it's displayed 👍 - If it's a TextFrame: Detect if it's a JSON (Try to parse it) -> Auto prettify it

kerem added the

✅ Done

enhancement

labels

2026-03-03 19:49:41 +03:00

kerem referenced this issue

2026-03-03 19:49:41 +03:00

[GH-ISSUE #295] Undefined local host #297

kerem commented

2026-03-03 19:49:41 +03:00

Author

Owner

@NghiaTranUIT commented on GitHub (Aug 23, 2023):

Update requirement

1. Columns

Able to sort the time when clicking on the Time columns
New WebSocket message should be appended at the top or at the end (Depending on how the Time Column is sorted (ASC or DESC))

https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/35f48f60-2e21-419e-a449-5d7a7a64646c

By default, the All is selected:
All: Show both client & server web socket messages
Sent: Only show the Client message
Receive: Only show Server Message
⚠️ Make sure that the new message should be displayed correctly too.

This option isn't persisted to the next launch. However, it should be stored in memory, so when we select another Websocket, this option remains.

3. Preview Options

Don't need to implement the Tree View. We don't support it for now
Support Hex or Preview Mode (Monaco Editor)

@NghiaTranUIT commented on GitHub (Aug 23, 2023): ## Update requirement ### 1. Columns - Able to sort the time when clicking on the Time columns - New WebSocket message should be appended at the top or at the end (Depending on how the Time Column is sorted (ASC or DESC)) https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/35f48f60-2e21-419e-a449-5d7a7a64646c ### 2. Filter options - By default, the `All` is selected: - `All`: Show both client & server web socket messages - `Sent`: Only show the Client message - `Receive`: Only show Server Message - ⚠️ Make sure that the new message should be displayed correctly too. <img width="241" alt="Screenshot 2023-08-23 at 09 27 34" src="https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/9285d969-9734-4f97-83e5-20a7ebc852a6"> - This option isn't persisted to the next launch. However, it should be stored in memory, so when we select another Websocket, this option remains. ### 3. Preview Options - Don't need to implement the Tree View. We don't support it for now - Support Hex or Preview Mode (Monaco Editor) <img width="214" alt="Screenshot 2023-08-23 at 09 30 40" src="https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/e9e92a41-7cbc-49a2-8284-f33a9c978569">