モバイルおよびその他の非ブラウザー向けトラフィックで JSON レスポンスを取得する

モバイルアプリや Web アプリなど、ブラウザー以外の環境でトラフィックを管理する必要がある場合、Cloudflare は API エンドポイントから利用できる JSON 対応の Waiting Room を提供します。

ユーザーがキューに入っているときは、Waiting Room 独自の JSON レスポンスを返します。
ユーザーが Waiting Room を出ると、リクエストをオリジンサーバーへ転送し、オリジンサーバーからのレスポンス（JSON、XML、HTML ページなど）を返します。

Waiting Room のレスポンスを JSON 形式で利用するには、次の手順を実施します。

手順 1 – JSON レスポンスを有効にする

JSON レスポンスを受け取るには、まず Waiting Room でそのオプションを有効にします。

ダッシュボードから: Waiting Room をカスタマイズするときに、JSON Response を有効にします。
API から: Waiting Room を作成するときに、json_response_enabled を true に設定します。

手順 2 – JSON データを取得する

Waiting Room のエンドポイントへ、ヘッダー Accept: application/json を付けてリクエストします。ヘッダーは Accept: application/json と完全に一致する必要があります。Accept: application/json, text/html のように追加の内容がある場合、レスポンスは JSON 形式になりません。ユーザーがキューを進むには、refreshIntervalSeconds ごとにリクエストを再試行する必要があります。

Requestbash

curl "https://example.com/waitingroom" \
--header "Accept: application/json"

Responsejson

{
	"cfWaitingRoom": {
		"inWaitingRoom": true,
		"waitTime": 5,
		"waitTimeKnown": true,
		"waitTimeFormatted": "5 minutes",
		"queueIsFull": false,
		"queueAll": false,
		"lastUpdated": "2021-08-03T23:46:00.000Z",
		"refreshIntervalSeconds": 20
	}
}

Waiting Room は、キュー内のユーザー位置を決める Waiting Room Cookie で動作します。そのため、リクエストごとにレスポンスヘッダーで Cookie が更新されます。Waiting Room で保護されたエンドポイントへの各リクエストで、アプリケーションは直前のリクエストで取得した最新の Cookie を含める必要があります。ユーザーがキューに入っているかどうかに関係なく、これは必須です。リクエストに Cookie がない場合、Waiting Room は新規ユーザーとみなし、レスポンスヘッダーで新しい Cookie を返します。その結果、ユーザーはキューの末尾に置かれます。そのため、ブラウザー以外の環境で Waiting Room を利用するときは、リクエストヘッダーに Waiting Room Cookie を含め、リクエストごとに更新することが重要です。

詳細は Waiting Room の Cookie を参照してください。

キューを進める

ブラウザー環境では、ユーザーがキューを進むように、ページが refreshIntervalSeconds ごとに自動更新されます。Waiting Room の JSON 対応 API を利用する非ブラウザー環境では、バックエンドサービス（または API）も、ユーザーがキューを進むように refreshIntervalSeconds ごとに Waiting Room 設定済みエンドポイントへリクエストする必要があります。

JSON 対応レスポンスを利用できる場所の例です（すべてではありません）。

モバイルアプリのトラフィック
- Waiting Room の変数を組み込む – モバイルアプリに、JSON レスポンスを受け取る新しいテンプレートを作成します。変数の一覧は、Cloudflare API ドキュメントの json_response_enabled パラメーターを参照してください。
- Cookie を許可する – 前述のとおり、Waiting Room は Cookie が必要です。モバイルアプリでも Cookie に対応する必要があります。扱いやすくするには、CookieJar ↗ のような Cookie マネージャーの利用を検討してください。
- JSON データを利用する - Accept: application/json ヘッダーを付けて Waiting Room エンドポイントへリクエストします。
Cloudflare Workers の内部（または独自のバックエンドサービス）
- Waiting Room の変数を組み込む – バックエンド API で JSON レスポンスを受け取る想定にします。変数の一覧は、Cloudflare API ドキュメントの json_response_enabled パラメーターを参照してください。
- リクエストヘッダーに Cookie を含める – 前述のとおり、Waiting Room は Cookie が必要です。バックエンド API でも Cookie に対応する必要があります。扱いやすくするには、CookieJar ↗ のような Cookie マネージャーの利用を検討してください。
- JSON レスポンスを有効にする - ダッシュボードまたは API から有効にします。
- JSON データを利用する - Accept: application/json ヘッダーを付けて Waiting Room エンドポイントへリクエストします。
  
  Worker 内で Waiting Room エンドポイントを使う例です。リクエストヘッダーには、Waiting Room API が必要とする accept と cookie の値を含めます。accept ヘッダーにより、ユーザーがキューに入っているときは JSON 対応レスポンスが返されます。そうでなければ、リクエストはオリジンへ送られ、オリジンが返すレスポンスがそのままとなります。この例では、Cookie フィールドにハードコードした __cfwaitingroom の値を埋め込んでいます。実際のアプリケーションでは、Waiting Room API が返した Cookie を後続の各リクエストで使い、ユーザーをキューの適切な位置に置き、順番が来たらオリジンへ通すことが期待されます。

const waitingroomSite = "https://examples.cloudflareworkers.com/waiting-room";

export default {
	async fetch(request, env, ctx) {
		const init = {
			headers: {
				accept: "application/json",
				cookie: "__cfwaitingroom=F)J@NcRfUjXnZr4u7x!A%D*G-KaPdSgV",
			},
		};

		return fetch(waitingroomSite, init)
			.then((response) => response.json())
			.then((response) => {
				if (response.cfWaitingRoom.inWaitingRoom) {
					return Response("in waiting room", { "content-type": "text/html" });
				}
				return new Response(response);
			});
	},
};