跳到主要内容

WebSocketRoute

通过 page.routeWebSocket() 或 browserContext.routeWebSocket() 设置 WebSocket 路由后，WebSocketRoute 对象允许像实际服务器那样处理 WebSocket。

模拟

默认情况下，路由的 WebSocket 不会连接到服务器。通过这种方式，您可以模拟整个 WebSocket 通信。以下是一个响应用于响应“request”的消息的示例，使用“response”消息进行回应。

await page.routeWebSocket('wss://example.com/ws', ws => {
  ws.onMessage(message => {
    if (message === 'request')
      ws.send('response');
  });
});

由于我们在 WebSocket 路由处理程序中没有调用 webSocketRoute.connectToServer()，Playwright 假定 WebSocket 将被模拟，并自动在页面内打开 WebSocket。

以下是另一个处理 JSON 消息的示例

await page.routeWebSocket('wss://example.com/ws', ws => {
  ws.onMessage(message => {
    const json = JSON.parse(message);
    if (json.request === 'question')
      ws.send(JSON.stringify({ response: 'answer' }));
  });
});

拦截

或者，您可能希望连接到实际服务器，但在中间拦截消息并修改或阻止它们。调用 webSocketRoute.connectToServer() 返回一个服务器端的 WebSocketRoute 实例，您可以使用它发送消息或处理传入消息。

下面是一个修改页面发送到服务器的某些消息的示例。从服务器发送到页面的消息保持不变，依赖于默认转发。

await page.routeWebSocket('/ws', ws => {
  const server = ws.connectToServer();
  ws.onMessage(message => {
    if (message === 'request')
      server.send('request2');
    else
      server.send(message);
  });
});

连接到服务器后，默认情况下所有 **消息都在页面和服务器之间自动转发**。

然而，如果您在原始路由上调用 webSocketRoute.onMessage()，从页面发送到服务器的消息将 **不再转发**，而应由 handler 处理。

类似地，在服务器端 WebSocket 上调用 webSocketRoute.onMessage() 将 **停止转发消息** 从服务器到页面，而 handler 应负责处理这些消息。

以下示例阻止了两个方向上的某些消息。由于它在两个方向上都调用了 webSocketRoute.onMessage()，因此完全没有自动转发。

await page.routeWebSocket('/ws', ws => {
  const server = ws.connectToServer();
  ws.onMessage(message => {
    if (message !== 'blocked-from-the-page')
      server.send(message);
  });
  server.onMessage(message => {
    if (message !== 'blocked-from-the-server')
      ws.send(message);
  });
});

方法​

close​

新增于：v1.48 webSocketRoute.close

关闭 WebSocket 连接的一侧。

用法

await webSocketRoute.close();
await webSocketRoute.close(options);

参数

返回值

connectToServer​

新增于：v1.48 webSocketRoute.connectToServer

默认情况下，路由的 WebSocket 不会连接到服务器，因此您可以模拟整个 WebSocket 通信。此方法连接到实际的 WebSocket 服务器，并返回服务器端的 WebSocketRoute 实例，使您能够向服务器发送和接收消息。

连接到服务器后

请参见顶部示例了解更多详情。

用法

webSocketRoute.connectToServer();

返回值

onClose​

新增于：v1.48 webSocketRoute.onClose

允许处理 WebSocket.close。

默认情况下，关闭连接的一侧（无论是页面端还是服务器端）都会关闭另一侧。然而，当设置了 webSocketRoute.onClose() handler 时，默认的关闭转发将被禁用，handler 应负责处理它。

用法

webSocketRoute.onClose(handler);

参数

onMessage​

新增于：v1.48 webSocketRoute.onMessage

此方法允许处理 WebSocket 发送的消息，无论是来自页面还是来自服务器。

当在原始 WebSocket 路由上调用时，此方法处理从页面发送的消息。您可以通过使用 webSocketRoute.send() 响应它们，将它们转发到由 webSocketRoute.connectToServer() 返回的服务器端连接，或进行其他操作来处理这些消息。

一旦调用此方法，消息将不再自动转发到服务器或页面 - 您应通过调用 webSocketRoute.send() 手动进行转发。请参见顶部示例了解更多详情。

再次调用此方法将使用新的 handler 覆盖之前的 handler。

用法

webSocketRoute.onMessage(handler);

参数

send​

新增于：v1.48 webSocketRoute.send

向 WebSocket 发送消息。在原始 WebSocket 上调用时，将消息发送到页面。在 webSocketRoute.connectToServer() 的结果上调用时，将消息发送到服务器。请参见顶部示例了解更多详情。

用法

webSocketRoute.send(message);

参数

url​

新增于：v1.48 webSocketRoute.url

在页面中创建的 WebSocket 的 URL。

用法

webSocketRoute.url();

返回值