事件日志

由于 MSW 实现了 WebSocket 拦截模拟优先，因此除非你明确说明，否则不会建立任何实际连接。这意味着模拟的场景不会作为网络条目出现在浏览器的 DevTools 中，你将无法在那里观察到它们。

¥Since MSW implements the WebSocket interception mock-first, no actual connections will be established until you explicitly say so. This means that the mocked scenarios won’t appear as network entries in your browser’s DevTools and you won’t be able to observe them there.

MSW 为浏览器中的模拟和原始 WebSocket 连接提供自定义日志记录。

¥MSW provides custom logging for both mocked and original WebSocket connections in the browser.

读取日志输出

¥Reading the log output

记录器将打印出 WebSocket 通信期间发生的各种事件，作为浏览器控制台中的折叠控制台组。

¥The logger will print out various events occurring during the WebSocket communication as collapsed console groups in your browser’s console.

你可以观察到四种类型的日志：

¥There are four types of logs you can observe:

  1. ▶■×System events;

  2. ⬆⇡Client events;

  3. ⬇⇣Server events.

  4. ⬆⬇Mocked events.

系统事件

¥System events

▶ 连接已打开

¥▶ Connection opened

[MSW] 12:34:56 ▶ wss://example.com

当连接打开时分派（即 WebSocket 客户端发出 open 事件）。

¥Dispatched when the connection is open (i.e. the WebSocket client emits the open event).

× 连接错误

¥× Connection errored

[MSW] 12:34:56 × wss://example.com

当客户端收到错误时分派（即 WebSocket 客户端发出 error 事件）。

¥Dispatched when the client receives an error (i.e. the WebSocket client emits the error event).

■ 连接已关闭

¥■ Connection closed

[MSW] 12:34:56 ■ wss://example.com

当连接关闭时分派（即 WebSocket 客户端发出 close 事件）。

¥Dispatched when the connection is closed (i.e. the WebSocket client emits the close event).

消息事件

¥Message events

任何消息，无论是传出消息还是传入消息，都遵循相同的结构：

¥Any message, be it outgoing or incoming message, follows the same structure:

        timestamp         sent data
[MSW] 00:00:00.000 ⬆ hello from client 17
                  icon              byte length

二进制消息打印发送的二进制文件的文本预览及其完整字节长度：

¥Binary messages print a text preview of the sent binary alongside its full byte length:

[MSW] 12:34:56.789 ⬆ Blob(hello world) 11
[MSW] 12:34:56.789 ⬆ ArrayBuffer(preview) 7

长文本消息和文本预览被截断：

¥Long text messages and text previews are truncated:

[MSW] 12:34:56.789 ⬆ this is a very long stri… 17

你可以通过单击其控制台组并检查原始 MessageEvent 实例来访问完整消息。

¥You can access the full message by clicking on its console group and inspecting the original MessageEvent instance.

⬆⇡ 传出客户端消息

¥⬆⇡ Outgoing client message

[MSW] 12:34:56.789 ⬆ hello from client 17

应用中的 WebSocket 客户端发送的原始消息。如果箭头为虚线，则表示事件处理程序已阻止转发此消息事件。

¥A raw message sent by the WebSocket client in your application. If the arrow is dashed, the forwarding of this message event has been prevented in the event handler.

⬆ 传出模拟客户端消息

¥⬆ Outgoing mocked client message

[MSW] 12:34:56.789 ⬆ hello from mock 15

事件处理程序通过 server.send() 从客户端发送的消息。需要 打开服务器连接。

¥A message sent from the client by the event handler via server.send(). Requires an open server connection.

⬇⇣ 传入服务器消息

¥⬇⇣ Incoming server message

[MSW] 12:34:56.789 ⬇ hello from server 17

从原始服务器发送的传入消息。需要 打开服务器连接。如果箭头为虚线，则表示事件处理程序已阻止转发此消息事件。

¥An incoming message sent from the original server. Requires an open server connection. If the arrow is dashed, the forwarding of this message event has been prevented in the event handler.

⬇ 传入模拟服务器消息

¥⬇ Incoming mocked server message

[MSW] 12:34:56.789 ⬇ hello from mock 15

通过 client.send() 从事件处理程序发送到客户端的模拟消息。

¥A mocked message sent to the client from the event handler via client.send().