客户端事件

你可以拦截以下 WebSocket 客户端事件：

¥You can intercept the following WebSocket client events:

open 事件由 connection 事件监听器表示，并且没有指定的监听器。

¥The open event is represented by the connection event listener and doesn’t have a designated listener.

你可以通过在事件处理程序中的任何位置向 client 对象添加相应的事件监听器来监听这些事件：

¥You can listen to these events by adding a respective event listener to the client object anywhere in your event handler:

api.addEventListener('connection', ({ client }) => {
  client.addEventListener('close', () => {})
})

拦截客户端事件

¥Intercepting client events

open 事件

¥The open event

client 对象上没有 open 事件。相反，你应该在 connection 事件监听器中处理客户端打开的连接：

¥There is no open event on the client object. Instead, you should handle a client opening the connection in the connection event listener:

api.addEventListener('connection', ({ client }) => {
  console.log('Client opening connection', client)
})

每当客户端在你的应用中打开新连接时，connection 事件都会在 WebSocket 链接上分派。监听器会在实际客户端调度 open 事件之前调用，因此你可以在不打开该事件的情况下强制执行 关闭连接 事件。

¥The connection event is dispatched on the WebSocket link whenever a client opens a new connection in your app. The listener is called before the actual client dispatches the open event so you can forcefully close the connection without opening it.

如果你未在 connection 监听器中建立实际的服务器连接，MSW 会将此连接视为模拟连接，你的处理程序将充当服务器。如果你选择建立实际的服务器连接，open 和其他客户端事件将根据该连接的状态进行分派。

¥If you don’t establish the actual server connection in the connection listener, MSW will treat this connection as mocked and your handler will act as a server. If you choose to establish the actual server connection, the open and other client events will be dispatched based on that connection’s state.

message 事件

¥The message event

你可以通过在 client 对象上添加 message 监听器来拦截客户端发送的数据：

¥You can intercept the data sent from your client by adding a message listener on the client object:

api.addEventListener('connection', ({ client }) => {
  client.addEventListener('message', (event) => {
    console.log('Intercepted message from the client', event)
  })
})

message 监听器的 event 参数是一个 MessageEvent 实例。你可以通过 event.data 属性读取从客户端发送的数据。

¥The event argument of the message listener is a MessageEvent instance. You can read the data sent from the client via the event.data property.

你的模拟代码始终从服务器的角度编写，这意味着当你的客户端发送以下数据时，message 事件将被调度：

¥Your mocks are always written from the server’s perspective, which means the message event will be dispatched when your client sends some data:

// app.js
const ws = new WebSocket(url)
 
ws.onopen = () => {
  ws.send('hello world')
  // "Client sent data: hello world"
}

close 事件

¥The close event

你可以通过在 client 对象上添加 close 事件监听器来拦截客户端关闭连接时触发的 close 事件：

¥You can intercept the close event dispatched when your client closes the connection by adding a close event listener on the client object:

api.addEventListener('connection', ({ client }) => {
  client.addEventListener('close', (event) => {
    console.log('Client is closing the connection', client)
  })
})

close 监听器的 event 参数是一个 CloseEvent 实例。它包含关于闭包的附加信息，例如 event.code 和 event.reason。

¥The event argument of the close listener is a CloseEvent instance. It contains additional information about the closure, like the event.code and event.reason.