How does whistle support WebSocket proxy and debugging?

Answer

Whistle provides WebSocket proxy functionality that can capture, debug, and modify WebSocket connections and messages.

WebSocket Proxy Basics

1. Basic WebSocket Proxy

Configure rule:

shell
ws://example.com host 127.0.0.1:8080
wss://example.com host 127.0.0.1:8080

Or use forward operator:

shell
ws://example.com forward ws://127.0.0.1:8080
wss://example.com forward wss://127.0.0.1:8080

2. WebSocket Message Capture

Whistle automatically captures WebSocket connections and messages:

• Connection Established: Records WebSocket handshake information
• Message Sent: Records messages sent by client
• Message Received: Records messages returned by server
• Connection Closed: Records reason for connection closure

WebSocket Debugging Features

1. View Message Details

In whistle management interface:

1. Click "Network" tab
2. Filter "WS" type requests
3. Click WebSocket connection to view details
4. View message history in "Messages" tab

2. Message Formatting

Whistle automatically formats JSON messages:

json
{
  "type": "message",
  "data": {
    "id": 1,
    "content": "Hello"
  }
}

3. Message Filtering

Use filters to quickly find specific messages:

• Filter by message type
• Search by message content
• Filter by time range

WebSocket Message Modification

1. Use Plugin to Modify Messages

Create plugin: websocket-modifier.js

javascript
module.exports = function(server, options) {
  server.on('upgrade', function(req, socket, head) {
    console.log('WebSocket upgrade:', req.url);
  });
  
  server.on('connection', function(ws, req) {
    ws.on('message', function(message) {
      console.log('Received message:', message.toString());
      
      // Modify message
      const modifiedMessage = modifyMessage(message);
      ws.send(modifiedMessage);
    });
  });
};

function modifyMessage(message) {
  const data = JSON.parse(message.toString());
  data.timestamp = Date.now();
  return JSON.stringify(data);
}

Configure rule:

shell
ws://example.com plugin://websocket-modifier

2. Intercept and Modify Handshake

Create script: websocket-handshake.js

javascript
module.exports = function(req, res) {
  // Modify WebSocket handshake headers
  if (req.headers['upgrade'] === 'websocket') {
    req.headers['X-Custom-Header'] = 'Custom Value';
  }
};

Configure rule:

shell
ws://example.com reqScript://{websocket-handshake.js}

WebSocket Performance Monitoring

1. Connection Time Monitoring

Whistle records various stages of WebSocket connection time:

• DNS Resolution Time
• TCP Connection Time
• SSL/TLS Handshake Time (for wss)
• Connection Establishment Time

2. Message Statistics

• Message Count: Total number of sent and received messages
• Message Size: Average and total message size
• Message Frequency: Frequency of message sending and receiving

3. Connection Status Monitoring

• Connection Status: Whether connection is active
• Connection Duration: Duration of connection
• Reconnection Count: Number of connection reconnections

WebSocket Debugging Tips

1. Simulate Server Response

Create script: websocket-mock.js

javascript
module.exports = function(server, options) {
  server.on('upgrade', function(req, socket, head) {
    console.log('Mock WebSocket server');
    
    // Simulate server behavior
    socket.on('data', function(data) {
      console.log('Client message:', data.toString());
      
      // Return mock response
      const response = JSON.stringify({
        type: 'response',
        data: 'Mock response',
        timestamp: Date.now()
      });
      
      socket.write(response);
    });
  });
};

2. Message Delay Simulation

Create script: websocket-delay.js

javascript
module.exports = function(server, options) {
  server.on('connection', function(ws, req) {
    ws.on('message', function(message) {
      // Simulate delay
      setTimeout(() => {
        ws.send(message);
      }, 1000); // 1 second delay
    });
  });
};

3. Message Loss Simulation

Create script: websocket-drop.js

javascript
module.exports = function(server, options) {
  let messageCount = 0;
  
  server.on('connection', function(ws, req) {
    ws.on('message', function(message) {
      messageCount++;
      
      // Drop 1 out of every 10 messages
      if (messageCount % 10 !== 0) {
        ws.send(message);
      } else {
        console.log('Dropped message:', messageCount);
      }
    });
  });
};

Common Issues and Solutions

1. WebSocket Connection Fails

Check items:

• Confirm proxy rules are correct
• Check if target server supports WebSocket
• Confirm firewall settings
• Check SSL certificate (for wss)

2. Message Garbled

Solutions:

• Confirm message encoding format
• Check if message is binary data
• Use correct decoding method

3. Frequent Disconnections

Reasons:

• Unstable network
• Server timeout settings
• Heartbeat mechanism issues

Solutions:

• Increase timeout
• Implement heartbeat mechanism
• Optimize network environment

Best Practices

1. Use Plugins for Complex Processing

   • Plugins provide more powerful features
   • Easier to reuse and maintain

2. Log Messages

   • Facilitate problem troubleshooting
   • Analyze message patterns

3. Test Exception Scenarios

   • Test network interruption
   • Test message loss
   • Test connection timeout

4. Performance Optimization

   • Reduce unnecessary message processing
   • Use message compression
   • Optimize message format