The Interface

Understanding Tigrister's WebSocket panel layout.

Panel Layout

The WebSocket interface consists of three main areas working together:

WebSocket
wss://echo.websocket.org
Connected
Disconnect

Connection Bar - URL input, connection state, connect/disconnect button

messageauth
Type:
TEXT
Send

Request Panel

Messages(5)
Search...
All
14:32:01↑TEXT128 B{"type":"subscribe"...
14:32:01↓TEXT64 B{"status":"ok"}

Response Panel - Message list with filtering

Status: Connected (graphql-ws) ID: ws-1706789123456

Connection Bar

The top bar controls the WebSocket connection:

WebSocketProtocol badge indicating this is a WebSocket connection
URL input field - enter ws:// or wss:// URLs. Disabled while connected.
ConnectedConnection state indicator: Connecting..., Connected, or Error
Connect
Toggle button - Connect when idle, Disconnect when connected. Press Enter in URL field to connect.

Request Panel

The left panel (400px wide) has two tabs for composing and sending messages:

Message Tab

  • • Message type selector (Text, Binary, Ping, Pong)
  • • Text area for text/ping/pong messages
  • • File upload zone for binary messages
  • • Send button (Ctrl+Enter shortcut)

Auth Tab

  • • Bearer Token authentication
  • • Basic Auth (username/password)
  • • API Key (header or query param)
  • • Auth headers sent during handshake

Response Panel

The right panel displays all messages in real-time with powerful filtering:

Header:Message count, search input, filter dropdown, and clear button
List:Expandable message rows showing time, direction, type, size, and content preview
Footer:Connection status, negotiated protocol, and connection ID

Tip: Click any message row to expand it and see the full content. JSON messages are automatically pretty-printed.

WebSocket OverviewConnecting