Name:
interface
Value:
Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Page updated Apr 30, 2024

Maintenance ModeYou are viewing Amplify Gen 1 documentation. Amplify Gen 1 has entered maintenance mode and will reach end of life on May 1, 2027. New project should use Amplify Gen 2. For existing Gen 1 projects, a migration guide and tooling are available to help you upgrade. Switch to the latest Gen 2 docs →

Hub

Amplifyはローカルイベントシステムであるhubを備えています。これはパブリッシャー/サブスクライバーパターンの軽量実装であり、アプリ内のモジュールとコンポーネント間でデータを共有するために使用されます。Amplifyはhubを異なるカテゴリで使用して、ユーザーのサインインなどの認証イベントや、ファイルダウンロードの通知など、特定のイベントが発生したときに相互に通信します。

インストール

import { Hub } from 'aws-amplify/utils';

APIの使用

チャネル

チャネルは、メッセージを整理し、リッスンするための論理的なグループ名です。これらは文字列であり、ディスパッチまたはリッスンするための定義は完全に開発者に任せられています。ただし、任意のチャネルにディスパッチできますが、Amplifyは特定のチャネルを保護 し、予期しないペイロードを送信すると望ましくない副作用(認証フローに影響を与えるなど)が生じる可能性があるため、警告を表示します。現在保護されているチャネルは以下の通りです:

  • core
  • auth
  • analytics
  • storage

メッセージのリッスン

listen(channel: string, callback: HubCallback): StopListenerCallback は、ディスパッチされたメッセージをリッスンするために使用されます。名前付きchannel または正規表現のいずれかと、コールバックを指定する必要があります。正規表現の場合、ペイロード内にmessage を含むディスパッチのみがパターンと照合されます。複数のリスナーを異なるチャネルやパターンに追加して、汎用イベントをキャッチして独自のフィルタリングを実行できます。

import { Hub } from 'aws-amplify/utils';
class MyClass {
constructor() {
Hub.listen('auth', (data) => {
const { payload } = data;
this.onAuthEvent(payload);
console.log(
'A new auth event has happened: ',
data.payload.data.username + ' has ' + data.payload.event
);
});
}
onAuthEvent(payload) {
// ... your implementation
}
}

メッセージの送信

異なるチャネルへのイベント送信は、dispatch 関数で行われます:

Hub.dispatch('DogsChannel', {
event: 'buttonClick',
data: { color: 'blue' },
message: ''
});
setTimeout(() => {
Hub.dispatch('CatsChannel', {
event: 'drinkMilk',
data: {
breed: 'Persian',
age: 5
},
message: `The cat ${cat.name} has finished her milk`
});
}, 5000);

Hub.dispatch(channel: string, payload: HubPayload) は、HubPayloadchannel にディスパッチするために使用できます。channel は組織の論理的グループ化であり、HubPayload は以下のように定義される型です:

export type HubPayload = {
event: string,
data?: any,
message?: string
};

event フィールドは、signInhang_up などのスペースのない小さな文字列にすることが推奨されます。これはペイロードグループをチェックするのに役立ちます。data フィールドは自由形式の構造で、多くの場合、大きなJSONオブジェクトまたはカスタムデータ型に使用されます。最後に、message はオプションです。

リッスンの停止

Hubは.listen 関数の結果を呼び出すことでメッセージのリッスンを停止する方法を提供しています。これは、アプリケーションフローでメッセージを受け取る必要がなくなった場合、および複数のチャネルでhubを通じて大量のデータを送信している場合に低電力デバイスのメモリリークを回避するのに便利です。

特定のイベントのリッスンを停止するには、リスナー関数を変数にラップしてから、不要になったら呼び出します:

/* start listening for messages */
const hubListenerCancel = Hub.listen('auth', (data) => {
console.log('Listening for all messages: ', data.payload.data);
});
/* later */
hubListenerCancel(); // stop listening for messages