how to bypass ws mocks

[csantos1113]

Hey team, I see that msw has a way to let the calls pass through to the underlying APIs by using bypass().

We relay on that function to toggle mocks via a button on the UI in development environments (for fetch calls).

But now we are implementing mocks for ws connections too, and we are wondering how can I implement the same mechanism to "bypass" the calls?

I looked at https://github.com/mswjs/msw/blob/28d26bd7fa585d76f9ca69a67dfa70a234450ed9/src/core/ws/handleWebSocketEvent.ts but it seems it doesn't support a way to do it?

---

I'd appreciate your help!

[kettanaito]

Hi, @csantos1113.

You can bypass an intercepted WebSocket connection by establishing the server connection in your event handler.

api.addEventListener('connection', ({ server }) => {
  server.connect()
})

Once you call server.connect(), all the client events will be forwarded to the original server, and all the server events will be forwarded to your client. Your handler becomes, effectively, a proxy sitting in-between where you can decide which events to intercept, modify, or prevent forwarding altogether.

Doing this in any matching handler will establish the connection to the original server. This means you don't have to call server.connect() in multiple event handlers matching the same WebSocket connection.

Let me know if this works for your needs or if you have any other questions!

[csantos1113]

Hey @kettanaito thank you for the response. I was referring to turning it on/off *conditionally... here a simple code snippet (please bear with me, it's incomplete, but it shows the point I'm trying to make)

let request: Request;

if ((__NODE_ENV_DEVELOPMENT__ || __IS_PR__) && localStorage.getItem('hit-live-endpoints')) {
  request = bypass(input, init);
} else {
  request = new Request(input, init);
}

return fetch(request);

---

so I wanted to do the same for ws

---

this is the approach I found working for now:

const searchParams = new URLSearchParams();
if ((__NODE_ENV_DEVELOPMENT__ || __IS_PR__) && localStorage.getItem('hit-live-endpoints')) {
  searchParams.append('msw', 'passthrough');
}

new WebSocket(`wss://chat.example.com?${searchParams}`);

then on the msw interceptor I have:

const chat = ws.link('wss://chat.example.com');

chat.addEventListener('connection', ({ client, server }) => {
  if (client.url.searchParams.get('msw') === 'passthrough') {
    server.connect(); // bypass, and go hit live endpoints
    return;
  }
      
  // ...my mocks here
});

[kettanaito]

That's exactly what I meant! Looks like you're on the right track.

[csantos1113]

hehe thanks! 😅 I guess I wanted to find some util for ws, like bypass for http, out of the box in msw that will do something like this for us; but unsure if that exists, or is in the roadmap.

for http I see that bypass uses the accept header to bypass the mocks; but not sure how to do that for WebSocket without needing to manually inject a random "msw= passthrough" searchParam on my own

[kettanaito]

I doubt there will be any utility other than server.connect(). The nature of HTTP and WebSocket interception is quite different, and that allows us for different experiences for different protocols (HTTP is "transparent", goes through the worker; WebSocket is always patched, "bypassed" explicitly via server.connect()). Treat this as a protocol-specific limitation.

[csantos1113]

Cool. thanks for your input! So I'd stay with my solution then 👏