Add support for interactive breakpoint WebSocket rules

[pimterry]

This should act as the approximate websocket equivalent of the existing HTTP request & response breakpoint rules.

I think you probably want to be able to:

• Inject custom messages sent upstream, to the server
• Inject custom messages send downstream, to the client
• Filter & modify received messages from the server, before they're proxied on to the client
• Filter & modify received messages from the client, before they're proxied on to the server

When a matching connection is opened, it should trigger like a breakpoint, jumping to that connection. Whether you want a breakpoint for each subsequent message probably depends on the use case, so we'd want a rule UI with "breakpoint on messages from the server" and "breakpoint on messages from the client" checkboxes.

Once connected, the websocket connection UI needs to be interactive, so you can see messages come in (using the existing UI) and directly type and send your own custom messages back. If messages are breakpointed, we'd need a tiny inline UI there to show the body (like now) but editable and with 'send' or 'drop' options.

We probably also want a 'close' button to always be available, to kill the connection whenever you like.

The work required for this looks something like:

• [ ] Add beforeClientMessage, beforeServerMessage & afterConnection callback options to the existing WebSocket passthrough rule in Mockttp, equivalent to the beforeRequest & afterRequest options we currently have for HTTP passthrough rules. The beforeXMessage callbacks let us modify or drop messages in either direction, while the afterConnection option gives us access to the WebSocket when it's initially connected, which we can then use ourselves later to inject arbitrary messages.
• [ ] Create a breakpoint rule in the UI, with the two toggles, which creates a rule like this
• [ ] Extend the websocket model in the UI, connecting it to the relevant callbacks when available, equivalent to the HTTP exchange breakpoint model
• [ ] Build & integrate websocket UI components for:
  • [ ] The initial connection breakpoints (just another case for the breakpoint header I think?).
  • [ ] Individual breakpointed messages.
  • [ ] An interactive 'send message' (both directions) section below the currently received websocket messages.
  • [ ] An interactive 'close connection' section below that.

---

Does this affect you too? Click below and add a :+1: to vote for this and help decide where HTTP Toolkit goes next, or go vote on the other most popular ideas so far.

[7heMech]

Would definitely be cool to send custom messages both ways

[ucf0709]

Hi I just bought the pro version hoping I will be able to mock messages but unfortuanly this is not supported in the actual version so I bought the pro version for nothing

[pimterry]

Hi @ucf0709, sorry to hear that. I send an email to every Pro customer when they sign up, and if you just reply to me there, I'm happy to help resolve that for you.

In general, all the rules available with Pro are already visible to free users in the dropdown - the only difference is that they're marked as Pro and you can't actually save them without an account. Sorry if there were any surprises there, hopefully we'll get this feature added too and the websocket interception can get even more powerful soon :smile:

[pimterry]

Oh and @ucf0709 if there's any more context here you could share about exactly what you were trying to do, and how you'd like mocking websocket messages to work in that case (e.g. what kind of rule are you looking for?) then that would be very helpful.