服务器到客户端转发

通过调用 server.connect() 建立实际的服务器连接后，所有服务器事件都将被转发到客户端，所有客户端事件也将被转发到原始服务器。从这个意义上讲，你的事件处理程序将成为两者之间的代理。

¥Once you establish the actual server connection by calling server.connect(), all the server events will be forwarded to the client, and all the client events will be forwarded to the original server. In this sense, your event handler becomes a proxy sitting in-between the two.

你可以通过多种方式管理该事件转发：

¥You can manage that event forwarding in multiple ways:

代理事件（即不执行任何操作）；

¥Proxy the events (i.e. do nothing);
将修改后的服务器事件发送到客户端；

¥Send modified server events to the client;
完全阻止服务器事件到达客户端。

¥Prevent server events from reaching the client entirely.

阻止服务器事件

¥Preventing server events

你可以通过在相应的事件监听器中调用 event.preventDefault() 来阻止从原始服务器接收的任何事件。

¥You can prevent any event received from the original server by calling event.preventDefault() in the respective event listener.

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

例如，这里我们阻止任何 message 事件到达 WebSocket 客户端。你仍然可以在监听器中观察收到的消息事件，但它们将不再转发给客户端。

¥For example, here we are preventing any message events from ever reaching the WebSocket client. You are still able to observe the received message events in the listener but they will not be forwarded to the client anymore.

由于服务器到客户端的事件转发是 MSW 中的默认行为，因此你只需调用 event.preventDefault() 即可退出该行为。

¥Since the server-to-client event forwarding is the default behavior in MSW, all you have to do to opt out from it is call event.preventDefault().

与常规事件一样，你可以有条件地阻止默认事件：

¥Just like with regular events, you can prevent the default conditionally:

api.addEventListener('connection', ({ server }) => {
  server.addEventListener('message', (event) => {
    // Skip forwarding only for particular server messages.
    if (event.data === 'hello world') {
      event.preventDefault()
    }
  })
})

修改服务器事件

¥Modifying server events

修改服务器事件分为两步：

¥Modifying a server event comes down to two steps:

阻止该事件（即 event.preventDefault()）的转发；

¥Preventing the forwarding for that event (i.e. event.preventDefault());
改为将修改后的（模拟的）事件发送到客户端（即 client.send()）。

¥Sending a modified (mocked) event to the client instead (i.e. client.send()).

让我们扩展上一个示例，并在阻止服务器事件后发送一个修改后的事件：

¥Let’s expand on the previous example and send a modified server event after it’s been prevented:

api.addEventListener('connection', ({ server, client }) => {
  server.addEventListener('message', (event) => {
    if (event.data === 'hello world') {
      event.preventDefault()
      client.send('goodbye cosmos')
    }
  })
})

阻止服务器事件

修改服务器事件

相关材料