devtools icon indicating copy to clipboard operation
devtools copied to clipboard

Design and sizing for WebSocket support

Open srawlins opened this issue 2 months ago • 0 comments

When an app makes WebSocket requests via dart:io's WebSocket class, the requests appear in the Network Screen as opaque 'SOCKET' requests. Users have requested first-class WebSocket support, much like the existing HTTP support (https://github.com/flutter/devtools/issues/8223).

This would be a sizable effort. The goal of this issue is to flesh out the work a bit, and size it.

HTTP support

How was support implemented for HTTP requests?

  1. Scaffolding was added to dart:io and the VM service to support profiling, including an _HttpProfile class. https://github.com/dart-lang/sdk/commit/558875d4809d41dda5892beeeabf3e057a5d056e
  2. Hooks were added to dart:io to allow HttpClient.enableTimelineLogging to be set remotely. https://github.com/dart-lang/sdk/commit/93c9ebabd6f5b63b0bb64a26f9bb06dc6964a486
  3. In dart:io and the VM service, a httpEnableTimelineLogging service extension was added. https://github.com/dart-lang/sdk/commit/e85e5b6264edf554c13d328a0af9c38672c4a0c3
  4. In dart:io and the VM service, HTTP network profiling services were added. https://github.com/dart-lang/sdk/commit/c4bfca9b6a7170d27c5829539c165e5dd3cf4fc0
  5. Added APIs to dart:developer to record and retrieve HTTP profile info. https://github.com/dart-lang/sdk/commit/628d744391f90a8254d585c38fbc1904a2c2065b
  6. A skeleton http_profile package was added: https://github.com/dart-lang/http/commit/04777acc92d8abea70e12fb430d65cca16e7d801
  7. The http_profile package was fleshed out: https://github.com/dart-lang/http/commit/ce0de370e4f6fabf54d2c47fafe38f80cdc2501c
  8. More API in the http_profile package. https://github.com/dart-lang/http/commit/5dfea721993fd22363a5800ab7a2f3aeecee25f5, https://github.com/dart-lang/http/commit/9f47439de37f16a17e7caec8d46f4649a96e0871
  9. Integrate cupertino_http with the http_profile package. https://github.com/dart-lang/http/commit/46d49e35435fada575d99c61b32a1b258de16bd4
  10. Integrate cronet_http with the http_profile package. https://github.com/dart-lang/http/commit/4726f43d622d8d7abb2bd1307c44d308511e5d8d

What will be required for WebSocket requests?

In very broad strokes, the support required for HTTP requests included (1) support in dart:io's HttpClient, (2) support in the VM service, (3) support in dart:developer, (4) shared types in a new http_profile package, (5) integration in several other HTTP-related packages, (6) support in DevTools. At a glance, it looks like we need to make similar changes to each of these 6 areas in order to support WebSocket requests. Can it be reduced? For example, do we need a new web_socket_profile package, or can we piggy-back off of the http_profile package?

@bkonyi You allude to this question here. I think we would want to make the support generic, and add to the http_profile package. This is primarily because there has been much recent movement in this space a la @brianquinlan 's work:

  • the web_socket_channel package,
  • the web_socket package (and some integrations, https://github.com/dart-lang/http/commit/01817d2cdc08ee558f2bf71708b2b441805e9089, https://github.com/dart-lang/http/commit/caad9caf5f62fc966c8d1632e4958d60dd43a000, https://github.com/dart-lang/http/commit/199f9fae418690bef18188a4a8f4276fe754fae8), and
  • first-class support in the cupertino_http package, a la CupertinoWebSocket.

WebSocket plan

  1. Update HttpClient.enableTimelineLogging to also start recording WebSocket details. This involves dart:developer, dart:io.
  2. Add support for sending this recorded data in the VM service extensions.
  3. Add support in the http_profile package.
  4. Integrate with cupertino_http package, web_socket package (maybe web_socket_channel package?).
  5. Add support to DevTools.

srawlins avatar Nov 05 '25 18:11 srawlins