8.6. クライアントでのリアルタイム更新の実装
GraphQL 仕様のコアコンセプトは、Subscription と呼ばれる操作タイプであり、リアルタイム更新のメカニズムを提供します。GraphQL サブスクリプションの詳細は、Subscriptions documentation を参照してください。
これを行うために、GraphQL サブスクリプションは WebSocket を利用して、クライアントが公開された変更をサブスクライブできるようにします。
WebSocket のアーキテクチャーは次のとおりです。
- クライアントは WebSocket サーバーに接続します。
- 特定のイベントが発生すると、サーバーはこれらのイベントの結果を WebSocket に公開できます。
- その WebSocket に 現在接続されている クライアントは、これらの結果を受け取ります。
- クライアントはいつでも接続を閉じることができ、更新を受信しなくなります。
WebSocket は、現在アクティブなクライアントにメッセージを配信するための完璧なソリューションです。更新を受信するには、クライアントが現在 WebSocket サーバーに接続されている必要があります。クライアントがオフラインのときにこの WebSocket を介して行われた更新は、クライアントによって消費されません。このユースケースでは、プッシュ通知をお勧めします。
Voyager Client には、デバイスの再起動時の自動再接続やネットワークの再接続など、すぐに使用できるサブスクリプションサポートが付属しています。クライアントでサブスクリプションを有効にするには、Voyager Client 設定オブジェクトで次のパラメーターを設定します。DataSyncConfig インターフェイスを使用したい場合は、Voyager Client からも利用できます。
8.6.1. サブスクリプションを使用するようにクライアントを設定する リンクのコピーリンクがクリップボードにコピーされました!
サブスクリプションを使用するようにクライアントを設定するには:
次のように、config オブジェクトに
wsUrl文字列を指定します。const config = { wsUrl: "ws://<your_websocket_url>" }const config = { wsUrl: "ws://<your_websocket_url>" }Copy to Clipboard Copied! Toggle word wrap Toggle overflow ここで、
<your_websocket_url>は、GraphQL サーバーの WebSocket エンドポイントの完全な URL です。手順 1 のオブジェクトを使用して、Voyager Client を初期化します。
const { createClient } = require("@aerogear/voyager-client"); const client = createClient(config)const { createClient } = require("@aerogear/voyager-client"); const client = createClient(config)Copy to Clipboard Copied! Toggle word wrap Toggle overflow