メインコンテンツまでスキップ

クライアント接続の管理

Squid Backend SDK は、バックエンドがクライアントのサーバー接続をリアルタイムで検出する機能を提供します。​

この機能により、Squid バックエンドへのクライアント接続状況を監視・管理でき、以下のことが可能になります:

  • クライアントの接続および切断に関するリアルタイム情報の取得
  • ユニークな client IDs を活用してクライアント接続を把握する
  • 接続状況に基づく特定のアクションの実行

クライアント接続の処理​

Squid は、クライアント接続状態の変更に対応するためのデコレーターを提供します。これは、基本クラスである SquidService を継承したクラス内で、関数に @clientConnectionStateHandler デコレーターを適用することで実現されます。このデコレーター内で、望む動作を実行するためのカスタムコードを追加することができます。

@clientConnectionStateHandler デコレーターは、2 つのパラメータを取ります:

  • 接続を開始した ClientId（文字列として受け取る）
  • クライアントの現在の接続状態を保持する ClientConnectionState 。これは 3 つの値のいずれかとなります:
    • CONNECTED はクライアントが接続されていることを示します
    • DISCONNECTED はクライアントが切断されたことを示します
    • REMOVED は、クライアントが切断され、Squid によりその ClientId が削除されたことを示します。つまり、次回クライアントが接続する際には新たな ClientId が割り当てられます

クライアント接続の理解​

クライアント接続は Squid の強力な機能です。利用方法をさらに理解するために、ユーザーのオンライン状態が表示される チャットルームの例 を見てみましょう。

各クライアントの Squid サーバーへの接続を利用するプロセスには、いくつかの重要なステップがあります:

  1. クライアントが初めて接続すると、Squid によりユニークな clientId が割り当てられます
  2. ユーザーが認証されると、各ユーザーのオンライン状態を追跡するために userId と対応する clientId をリンクさせることができます
  3. クライアントがチャットルームに参加すると、ユーザーステータスのコレクションに挿入し、どの clientIds および関連する userIds がチャットルームに存在するかを保存できます
  4. @clientConnectionStateHandler デコレーターを使用してクライアントの切断を検出し、対応するユーザーの状態を offline に更新できます
  5. @clientConnectionStateHandler デコレーターを使用してクライアントの削除を検出し、ユーザーステータスコレクションから対応するユーザーを削除できます

接続時に各クライアントへユニークな clientId を提供することで、個々のユーザーの状態を正確に追跡・管理できます。この機能により、userIds とそれぞれの clientIds を関連付け、クライアントの存在をリアルタイムで監視することが可能になります。

クライアント側の接続状態​

このフローをクライアントで利用するために、Squid は以下のオプションを提供しています:

  • squid.connectionDetails().connected: クライアントが現在サーバーに接続されているかどうかを示す boolean を返します
  • squid.connectionDetails().observeConnected(): クライアントがサーバーに接続されたときに true を、切断されたときに false を発行する observable を返します
  • squid.connectionDetails().clientId: 現在のクライアントに割り当てられた clientId を返します

バックエンド側の接続状態​

バックエンドでこのフローを利用するために、Squid は以下のオプションを提供しています:

  • 上記 クライアント接続の処理 で説明した @clientConnectionStateHandler デコレーター
  • this.context.clientId: このリクエストを開始したクライアントの id を返します

チャットルームの例​

以下は、チャットアプリケーションにおいてこのプロセスを管理する基本的な例です。@clientConnectionStateHandler デコレーターを使用すると、チャットルームに存在するすべてのユーザーとそのステータス（すなわちオンラインかオフラインか）のリストを取得できます。

どの clientIds が接続されているかはわかるものの、どの userIds であるかは判別できないため、各接続の clientId と対応する userId をリンクさせ、各ユーザーのオンライン状態を追跡する必要があります。

そのため、ユーザーがチャットルームに参加するたびにステータスコレクションを更新します。このコレクションには、clientIds がドキュメントIDとして含まれ、挿入されるデータは userId とその状態（ユーザーが参加するたびにこの関数が実行されるため、online となります）です。

また、ユーザーが新しい接続を確立するたびにコレクションを更新できます。observeConnected() 関数（クライアントがサーバーに接続されると true を返す関数）が、接続確立時に更新をトリガーします:

Client code
type StatusData = {
  userId: string;
  status: 'online' | 'offline';
};

...

squid.connectionDetails().observeConnected().pipe(
  filter(Boolean)
).subscribe(() =>
    squid
      .collection<StatusData>('userStatus')
      .doc(squid.connectionDetails().clientId)
      .insert({ userId, status: 'online' }).then(); // get userId from auth provider
)

この変更を実行することで、ユーザーのオンライン状態を初期化するために clientIds と userIds がリンクされます.

注意

Squid と認証に関する詳細は、Squid と認証プロバイダーを統合するための documentation をご覧ください.

次のステップは、ユーザーのオフライン状態を監視することです。ここで @clientConnectionStateHandler デコレーターが重要な役割を果たします。clientId が DISCONNECTED になることは、ユーザーがチャットルームからログオフしたことを示すため、ユーザーの状態を offline に更新する必要があります。さらに、clientId が REMOVED になることは、ユーザーがチャットルームを退出したことを示します:

Backend code
import { SquidService, clientConnectionStateHandler } from '@squidcloud/backend';
import { ClientConnectionState, ClientId } from '@squidcloud/client';

export class ExampleService extends SquidService {

  ...

  @clientConnectionStateHandler()
  async handleClientConnectionStateChange(
    clientId: ClientId,
    connectionState: ClientConnectionState
  ): Promise<void> {
    if (connectionState === 'DISCONNECTED') { // user logged off
      await this.squid
        .collection('userPresence')
        .doc(clientId)
        .update({ status: 'offline' });
    } else if (connectionState === 'REMOVED') { // user left the chat
      await this.squid
        .collection('userPresence')
        .doc(clientId)
        .delete();
    }
  }
}

その後、クライアントは query を使用して userPresence コレクションを照会し、チャットルーム内のユーザーとそのステータスのリストを取得できます。

Squid におけるクライアント接続の監視と対応方法を理解することで、利用ケースに応じた接続状態の変化をより効果的に管理できるようになります。