WebSocket Fish Scaler
Relevant source files
The following files were used as context for generating this wiki page:
The WebSocket Fish Scaler is a robust, full-duplex message testing tool designed for developers to interact with WebSocket endpoints. It provides a comprehensive interface for sending and receiving messages in various formats, including text, JSON, and binary (hex). The tool is integrated into the DevUtils suite, a cross-platform application built with Tauri and Next.js, aimed at streamlining common development tasks.
Sources: README.md:1-12, components/tools/websocket-fish-scaler.tsx:40-42
Core Architecture and Connection Management
The system leverages the native browser WebSocket API to establish and manage connections. It maintains a reference to the active socket and utilizes several state hooks to track the connection lifecycle, including readyState and connecting status.
Connection State Flow
The following diagram illustrates the lifecycle of a WebSocket connection within the Fish Scaler component, from initialization to closure and potential reconnection.
The application tracks four distinct states for the WebSocket connection: CONNECTING (0), OPEN (1), CLOSING (2), and CLOSED (3).
Sources: components/tools/websocket-fish-scaler.tsx:87-108, components/tools/websocket-fish-scaler.tsx:142-168
Reconnection Strategies
The tool provides three strategies for maintaining connectivity:
- Off: No automatic reconnection attempts.
- Instant: Attempts to reconnect after a fixed 1-second delay.
- Backoff: Utilizes an exponential backoff formula:
min(30000, 1000 * 2 ** retryCount).
The system limits automatic reconnection to a maximum of 10 attempts to prevent infinite loops in cases of persistent failure.
Sources: components/tools/websocket-fish-scaler.tsx:23-24, components/tools/websocket-fish-scaler.tsx:121-140
Data Handling and Payload Processing
WebSocket Fish Scaler supports multiple message formats and enforces size limits to ensure application stability.
Message Formats and Sizes
| Format | Description | Implementation Detail |
|---|---|---|
| Text | Standard UTF-8 string messages. | Uses TextEncoder/TextDecoder for byte conversion. |
| JSON | Structured data. | Validates and stringifies input before transmission. |
| Hex / Binary | Raw binary data. | Converts hex strings to Uint8Array buffers. |
The tool enforces a MAX_MESSAGE_BYTES limit of 512 KB (524,288 bytes). Any incoming message exceeding this size is dropped to prevent memory exhaustion, and an info event is logged.
Sources: components/tools/websocket-fish-scaler.tsx:27-28, components/tools/websocket-fish-scaler.tsx:180-218, components/tools/websocket-fish-scaler.tsx:284-300
Traffic Logging Logic
All interactions are stored in a MessageEntry array, capped at the 200 most recent entries. Each entry captures directionality, timestamps, raw text, hex representations, and size in bytes.
Newest messages appear at the top of the scrollable area, with dedicated visual indicators for "Sent", "Received", and "Info" directions.
Sources: components/tools/websocket-fish-scaler.tsx:31-39, components/tools/websocket-fish-scaler.tsx:112-117, components/tools/websocket-fish-scaler.tsx:171-218
Localization and User Interface
The tool is fully localized, supporting English, Simplified Chinese, and Traditional Chinese. It uses the react-i18next library to manage translations.
Key UI Components
- Connection Card: Contains the endpoint URL input, reconnection strategy selector, and primary actions (Connect/Disconnect).
- Payload Card: Features a
Textareafor composing messages, a format selector, and the "Send" action. - Traffic Log: A
ScrollAreathat displays a list of message cards, each containing formatted text, a hex dump, and a copy-to-clipboard function for hex data.
Sources: components/tools/websocket-fish-scaler.tsx:325-450, messages/en.json:434-482, messages/zh.json:434-482, messages/zh-TW.json:434-482
Error Handling and Validation
The system implements strict validation for WebSocket URLs, ensuring they use either ws: or wss: protocols. Error states are displayed prominently in a destructive-styled alert box.
Sources: components/tools/websocket-fish-scaler.tsx:69-85, components/tools/websocket-fish-scaler.tsx:452-460
Summary
The WebSocket Fish Scaler serves as a specialized debugging environment for real-time applications. By providing detailed hex views, handling binary data, and offering configurable reconnection logic, it allows developers to simulate various network conditions and inspect raw data frames within the DevUtils ecosystem.
Sources: components/tools/websocket-fish-scaler.tsx:1-40, README.md:14-25