0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Cloudflare での WebSocket 通信のカウントを確認する

Last updated at Posted at 2024-10-11

結論

  • リクエスト数
    • 1つの WebSocket 通信(Open から Close まで)を、1つの(長時間の)HTTP リクエストとしてカウント
  • 帯域幅
    • Cloudflare から Client への「HTTP レスポンス + WebSocket メッセージデータ」の総量をカウント

ダッシュボードやログに表示されるタイミングは、WebSocket 通信 Close 後です。

2024/10/15 追記

ドキュメントに追加されました

https://developers.cloudflare.com/network/websockets/#requests-and-bandwidth-measurement

Requests and Bandwidth measurement

Given the nature of WebSocket connections, you may notice they differ from typical HTTP traffic in terms of requests and bandwidth usage. If you are an Enterprise customer, it is important to consider how Cloudflare measures requests and bandwidth to accurately estimate your usage.

Cloudflare measures a single WebSocket connection in the following way:

  • Requests: Cloudflare recognizes only the initial upgrade request per WebSocket connection as an HTTP request. Even though you can send a bidirectional message stream through the established WebSocket connection, it will be counted as a single long-lived HTTP request.

  • Bandwidth: Cloudflare measures data transfer sent from Cloudflare to the client. This typically means that messages from the WebSocket server behind Cloudflare to the WebSocket client are counted towards bandwidth usage.

Once a WebSocket connection is closed, you can view your aggregated WebSocket usage through Traffic Analytics, the GraphQL Analytics API, and HTTP requests logs.

WebSocket 通信

以下のような通信フローとなります。

検証セットアップ

以下の記事を参考にします。

wscat コマンドを使って WebSocket 接続を確立した上で、Server からメッセージを大量に送ります。

ダッシュボード(GraphQL 統計)

1回の WebSocket 通信の中で Server 側から大量のメッセージデータを送ると以下のような表示となります。

リクエスト数としては、1つの WebSocket 通信(Open から Close まで)が、1つの(長時間の)HTTP リクエストとしてカウントされることがわかります。

帯域幅としては、Cloudflare から Client への「HTTP レスポンス + WebSocket メッセージデータ」の総量となります。

image.png

ログ

Cloudflare Logpush によって出力できる HTTP requests のログを確認します。

1回の WebSocket 通信では、1件のログしか出てきません。

  • RequestHeaders フィールドを設定の上で WebSocket 開始時のリクエストヘッダを確認できます。
    • "RequestHeaders": { "upgrade": "websocket" }
  • HTTP レスポンス 101 Switching Protocols を確認できます。
    • "EdgeResponseStatus": 101,
    • "OriginResponseStatus": 101,
  • 帯域幅の総量「HTTP レスポンス + WebSocket メッセージデータ」は EdgeResponseBytes で確認でき、WebSocket メッセージデータ量単体は EdgeResponseBodyBytes に該当します。
    • "EdgeResponseBytes": 19135192,
    • "EdgeResponseBodyBytes": 19133196,
  • WebSocket 通信時間は、EdgeStartTimestamp (2024年10月11日09:50:48)からEdgeEndTimestamp(2024年10月11日09:55:08)までと確認できます。
    • "EdgeStartTimestamp": 1728607848471000000, (Unix nano 秒)
    • "EdgeEndTimestamp": 1728608108071000000, (Unix nano 秒)
{
  ...
  "BotScore": 1,
  "BotScoreSrc": "Heuristics",
  "BotTags": [],
  "CacheCacheStatus": "dynamic",
  "CacheReserveUsed": false,
  "CacheResponseBytes": 19134836,
  "CacheResponseStatus": 101,
  "CacheTieredFill": false,
  ...
  "ClientRequestBytes": 3702,
  "ClientRequestHost": "wscat.example.com:8443",
  "ClientRequestMethod": "GET",
  "ClientRequestPath": "/",
  "ClientRequestProtocol": "HTTP/1.1",
  "ClientRequestReferer": "",
  "ClientRequestScheme": "https",
  "ClientRequestSource": "eyeball",
  "ClientRequestURI": "/",
  "ClientRequestUserAgent": "",
  "ClientSSLCipher": "AEAD-AES256-GCM-SHA384",
  "ClientSSLProtocol": "TLSv1.3",
  "ClientSrcPort": 56896,
  "ClientTCPRTTMs": 5,
  ...
  "EdgeColoCode": "NRT",
  "EdgeColoID": 408,
  "EdgeEndTimestamp": 1728608108071000000,
  "EdgePathingOp": "wl",
  "EdgePathingSrc": "macro",
  "EdgePathingStatus": "nr",
  "EdgeRateLimitAction": "",
  "EdgeRateLimitID": 0,
  "EdgeRequestHost": "wscat.example.com:8443",
  "EdgeResponseBodyBytes": 19133196,
  "EdgeResponseBytes": 19135192,
  "EdgeResponseCompressionRatio": 1,
  "EdgeResponseContentType": "",
  "EdgeResponseStatus": 101,
  "EdgeServerIP": "172.68.119.177",
  "EdgeStartTimestamp": 1728607848471000000,
  "EdgeTimeToFirstByteMs": 45,
  ...
  "OriginDNSResponseTimeMs": 2,
  "OriginIP": "x.x.x.x",
  "OriginRequestHeaderSendDurationMs": 0,
  "OriginResponseBytes": 0,
  "OriginResponseDurationMs": 16,
  "OriginResponseHTTPExpires": "",
  "OriginResponseHTTPLastModified": "",
  "OriginResponseHeaderReceiveDurationMs": 9,
  "OriginResponseStatus": 101,
  "OriginResponseTime": 16000000,
  "OriginSSLProtocol": "TLSv1.3",
  "OriginTCPHandshakeDurationMs": 3,
  "OriginTLSHandshakeDurationMs": 4,
  "ParentRayID": "00",
  "RayID": "8d0adbacfd353bfc",
  "RequestHeaders": {
    "connection": "Upgrade",
    "sec-websocket-key": "8QLHQtslEs/D33PgRGaHtw==",
    "sec-websocket-version": "13",
    "upgrade": "websocket"
  },
  ...
}

WebSocket メッセージデータの量による比較

  • WebSocket 接続後に Server 側から大量のメッセージデータを送った場合には、相応の EdgeResponseBodyBytes が確認できます。
  • WebSocket 接続後にすぐに接続を切った場合には EdgeResponseBodyBytes0 であることが確認できます。

image.png

まとめ

Cloudflare での WebSocket 通信のカウントを確認しました。

Cloudflare 契約時の利用量(リクエスト数・帯域幅)の見積もりにも同じ考え方が適用されるため、WebSocket 通信を利用するウェブサイトの場合はこの内容を念頭に検討が必要です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?