HTTPフォールバック
ネットワークがWebSocketをブロックした場合、チャットは通常のHTTPSで自動的に継続します。切り替え条件、強制設定、Content Security Policyとプロキシの要件、問題の解決方法を説明します。
ウィジェットは通常、WebSocket経由でチャットサーバーに接続します。ただし、一部のネットワークでは許可されていません。その場合に使われるのがHTTPフォールバックです。通常のHTTPSリクエストでチャットを継続するため、運営側や訪問者が操作する必要はありません。
HTTPフォールバックとは
WebSocket接続は、次のような環境で失敗することがあります。
- プロキシやファイアウォールが通常のHTTP(S)リクエストしか通さない企業ネットワーク
- WebSocketを転送しないホスティングサービス、CDN、ロードバランサー
UpgradeヘッダーとConnectionヘッダーを転送しないリバースプロキシの背後
HTTPフォールバックでは、ウィジェットはServer-Sent Events(長時間維持されるHTTPSストリーム)でサーバーからのメッセージを受信します。このストリームで何も届かなければ、ロングポーリングに切り替えます。送信にはHTTPS POSTを使用します。どちらの経路もWebSocketと同じメッセージを運びます。訪問者はメッセージを書き、AIアシスタントやオペレーターの返信を受け取れます。また、通常どおり複数のタブで1つの接続を共有します。添付ファイルはもともとHTTPSでアップロードされるため、接続方式に依存しません。
このフォールバックは、Webサイト上のチャットウィジェットに適用されます。オペレーター画面は引き続きWebSocketで接続します。
適用される条件
ウィジェットは、次の場合にHTTPフォールバックを使用します。
- ブラウザーがWebSocketに対応していない場合
- WebSocketの接続試行が2回続けて失敗した場合。8秒経過しても接続が確立せず、拒否もされていない試行も失敗として数えます。
- 強制的に有効にした場合(下記参照)
切り替えが行われるのは、そのページでまだWebSocket接続が確立していない間だけです。たとえばネットワークの変更によって既存のWebSocket接続が切れた場合は、ウィジェットはWebSocketで再接続します。
フォールバックが有効になると、そのページでは使い続けます。次のページで再び2回の試行を待たなくて済むように、この切り替えを記憶します。同じタブで30分以内に開いたページは、最初からHTTPSで接続します。同時に、ウィジェットは各ページで1回、WebSocketが通るようになったかをバックグラウンドで確認します。通れば、次のページでは再びWebSocketを使用します。現在のページはHTTPフォールバックのままです。
フォールバックを強制する
テスト時やWebSocketが使えないことが分かっている環境では、最初からHTTPフォールバックを有効にできます。最も簡単なのは、ウィジェットのscriptタグにdata-rc-transport="http"属性を付ける方法です。
<script src="https://cdn.reactive.chat/loader.js"
data-rc-site-key="SITE_KEY"
data-rc-transport="http"
async></script>
ウィジェットはドキュメント全体からこの属性を探します。そのため、ウィジェットの起動時にすでにドキュメント内にある要素なら、別の要素に指定しても機能します。
または、ウィジェットのscriptタグより前に、JavaScriptでオプションを設定します。
<script>
window.ReactiveChatSettings = { transport: 'http' };
</script>
<script src="https://cdn.reactive.chat/loader.js"
data-rc-site-key="SITE_KEY"
async></script>
起動後にReactiveChat('boot', { transport: 'http' })を呼び出しても、この設定は変わりません。接続方式はウィジェットの起動時に決まります。
Content Security Policy
Server-Sent Events、ロングポーリング、送信は、チャット接続と同じアドレスを使用します。ただし、wss://の代わりにhttps:// を使います。WebサイトでContent Security Policyを設定している場合は、connect-srcで両方の形式を許可する必要があります。
connect-src 'self' wss://ws.reactive.chat https://ws.reactive.chat
オフラインフォームとファイルのアップロードにもhttps:// アドレスを使用します。独自ドメインを使用する場合は、サブドメインのアドレスを指定します。
connect-src 'self' wss://chat.your-domain.com https://chat.your-domain.com
ポリシー内の他の項目はそのままにします。ほかに許可が必要な項目は、ウィジェットの埋め込みで説明しています。
独自ドメインを使用する場合
Webサイトのサブドメイン経由でチャットを運用している場合、HTTPフォールバックはWebSocketと同じ/rc_wss/パスを使用します。プロキシに追加のパスは不要ですが、このパスの応答をバッファリングせずに転送する必要があります。
- nginx:
/rc_wss/セクションでproxy_buffering offとproxy_cache offを設定します。 - Apache:
/rc_wss/のProxyPass行にflushpackets=onを設定します。 - Caddy:
/rc_wss/のreverse_proxy内にflush_interval -1を設定します。
アカウントページと独自ドメインのガイドのテンプレートには、これらの設定がすでに含まれています。以前の設定を引き継いでいる場合は、現在のテンプレートと比較してください。
ブラウザーに保存される情報
HTTPSで接続できると、ウィジェットはブラウザーのsessionStorageにrc_httpという項目を作成します。含まれるのは接続時刻だけで、個人データは含まれません。この項目により、後続のページでは30分間、直接HTTPフォールバックに接続します。WebSocketが再び通るようになると、項目を削除します。他のsessionStorageの項目と同じく、遅くともタブを閉じると消えます。一部のプライベートウィンドウなど、sessionStorageが使えない場合は、ページごとにWebSocketから試します。
使用中の経路を確認する
ブラウザーの開発者ツールを開き、「Network」タブに移動します。
- WebSocket:
wss://ws.reactive.chat/rc_wss/へのWebSocket形式の接続があります(独自ドメインの場合は、運営側のサブドメインへの接続)。 - HTTPフォールバック:
https://ws.reactive.chat/rc_wss/h/…へのリクエストがあります。最初にh/auf、次に…/sseへの長時間維持されるストリーム(ロングポーリングの場合は…/pollへの繰り返しリクエスト)、さらにメッセージ送信ごとに…/txへのリクエストが発生します。
「Application」または「Storage」でも、rc_http項目が設定されているか確認できます。
トラブルシューティング
Content Security Policyがhttpsアドレスをブロックする
connect-srcにwss://アドレスしか記載されていないと、ブラウザーはフォールバックのリクエストをブロックします。この場合、ブラウザーのコンソールにhttps://…/rc_wss/h/auf. に関するCSPメッセージが表示されます。WebSocketが通る環境では問題に気付きませんが、WebSocketを使えないネットワークでは接続がまったく確立しません。上記のとおりhttps:// アドレスを追加してください。
プロキシが応答をバッファリングする
経路上のプロキシがストリームをバッファリングすると、Server-Sent Eventsが遅れて届く、まとめて届く、またはまったく届かないことがあります。ウィジェットはストリームの最初のメッセージを5秒待ってから、ロングポーリングに切り替えます。この方法でもチャットは機能しますが、接続の確立に数秒余計にかかります。独自ドメインを使用する場合は、/rc_wss/のバッファリングを無効にしてください(上記参照)。
長時間のリクエストが切断される
ロングポーリングでは、通知する内容がなければ、サーバーは最大25秒間リクエストを開いたままにします。開いているストリームでは、15秒ごとにキープアライブ信号を送ります。それより早くリクエストを中断するファイアウォールやプロキシがあると、ウィジェットは頻繁に再接続することになります。チャットのアドレスへのリクエストを少なくとも30秒間維持できるようにしてください。
チャットがまったく接続しない
WebSocketとHTTPフォールバックの両方が失敗した場合、ウィジェットはバックグラウンドで試行を続けます。訪問者のネットワークからチャットのアドレスにHTTPSで到達できるか、Content Security Policyやフィルターでブロックされていないかを確認してください。
ドキュメントの関連項目
詳しくは、通信:WebSocket、HTTPフォールバック、再接続をご覧ください。すべての章はドキュメントにあります。
最終更新: