Hub

Amplify has a local eventing system called Hub. It is a lightweight implementation of Publisher-Subscriber pattern, and is used to share data between modules and components in your app. Amplify uses Hub for different categories to communicate with one another when specific events occur, such as authentication events like a user sign-in or notification of a file download.

Installation

1import { Hub } from 'aws-amplify';

Working with the API

Channels

A channel is a logical group name that you use to organize messages and listen on. These are strings and completely up to you as the developer to define for dispatching or listening. However, while you can dispatch to any channel, Amplify protects certain channels and will flag a warning as sending unexpected payloads could have undesirable side effects (such as impacting authentication flows). The protected channels are currently:

• core
• auth
• api
• analytics
• interactions
• pubsub
• storage
• datastore

Listening for messages

Hub.listen(channel: string | RegExp, callback) is used to listen for messages that have been dispatched. You must provide either a named channel or a regular expression, along with a callback. In the case of a regular expression only dispatches which contain a message in their payload will be matched against your pattern. You can add multiple listeners to your application for different channels or patterns to listen for, or trap generic events and perform your own filtering.

1import { Hub } from 'aws-amplify';
2
3class MyClass {
4    constructor() {
5        Hub.listen('auth', (data) => {
6            const { payload } = data;
7            this.onAuthEvent(payload);           
8            console.log('A new auth event has happened: ', data.payload.data.username + ' has ' + data.payload.event);
9        })
10    }
11
12    onAuthEvent(payload) {
13        // ... your implementation
14    }
15}

Sending messages

Sending events to different channels is done with the dispatch function:

1Hub.dispatch(
2    'DogsChannel', 
3    { 
4        event: 'buttonClick', 
5        data: {color:'blue'}, 
6        message:'' 
7});
8
9setTimeout(() => {
10  Hub.dispatch(
11      'CatsChannel', 
12      { 
13            event: 'drinkMilk', 
14            data: { 
15                breed: 'Persian',
16                age: 5
17            },
18            message: `The cat ${cat.name} has finished her milk`
19        });
20}, 5000)

Hub.dispatch(channel: string, payload: HubPayload) can be used to dispatch a HubPayload to a channel. The channel is a logical grouping for your organization while the HubPayload is a type defined as:

1export type HubPayload = {
2    event: string,
3    data?: any,
4    message?: string
5};

The event field is recommended to be a small string without spaces such as signIn or hang_up as it's useful for checking payload groupings. The data field is a freeform structure which many times is used for larger JSON objects or custom data types. Finally while message is optional, we encourage you to use it as it is required when using a RegExp filtering with Hub.listen().

Stop Listening

Hub provides a way to stop listening for messages with calling the result of the .listen function. This may be useful if you no longer need to receive messages in your application flow, as well as to avoid any memory leaks on low powered devices when you are sending large amounts of data through Hub on multiple channels.

To stop listening to a certain event, you need to wrap the listener function to a variable and call it once you no longer need it:

1/* start listening for messages */
2const hubListenerCancelToken = Hub.listen(/.*/, (data) => {
3  console.log('Listening for all messages: ', data.payload.data);
4});
5
6/* later */
7hubListenerCancelToken(); // stop listening for messages

Listening for Regular Expressions

The listener feature of Hub is a powerful way to perform filtering when you're unsure what the data across different channels will look like. Additionally it's also a nice realtime debugging feature. For instance, if you wanted to listen to all messages then you can just pass in a wildcard:

1Hub.listen(/.*/, (data) => {
2  console.log('Listening for all messages: ', data.payload.data)
3})

When using a "Capturing Group" (e.g. parenthesis grouping regular expressions) an array will be populated called patternInfo and returned as part of your callback:

1Hub.listen(/user(.*)/, (data) => {
2  console.log('A USER event has been found matching the pattern: ', data.payload.message);
3  console.log('patternInfo:', data.patternInfo);
4})

For example, this can be useful if you want to extract the text before and/or after a specific phrase:

1Hub.listen(/user ([^ ]+) ([^ ]+) (.*)/, (data) => {
2  console.log('A USER event has been found matching the pattern: ', data.payload.message);
3  console.log('patternInfo:', data.patternInfo);
4})

State Management

Hub can be used as part of a state management system such as Redux or MobX by updating the store when an event is seen by one or more listeners. You could also construct your own local store. For example, suppose you have the following in a React application's top level component:

1const store = (() => {
2  const listeners = [];
3
4  const theStore = {
5      subscribe(listener) {
6          listeners.push(listener);
7      }
8  };
9
10  return new Proxy(theStore, {
11      set(_obj, _prop, _value) {
12          listeners.forEach(l => l());
13          return Reflect.set(...arguments);
14      }
15  });
16})();
17
18Hub.listen(/.*/, (data) => {
19  console.log('Listening for all messages: ', data.payload.data)
20  if (data.payload.message){
21    store['message-' + Math.floor(Math.random() * 100)] = data.payload.message
22  }
23})
24
25class App extends Component {
26
27  addItem = () => {
28    Hub.dispatch('MyGroup', {
29      data : { a: 1},
30      event: 'clicked',
31      message: 'A user clicked a button'
32    })
33    console.log(store);
34  }
35
36  render() {
37    console.log('store: ', store)
38    return (
39      <div className="App">
40        <button onClick={this.addItem}>Add item</button>
41        <DogAlerts store={store}/>
42        <DogStatus store={store}/>
43      </div>
44    );
45  }
46}

This naive sample (which is for example purposes and not production ready) creates a store that is updated when events are received by Hub.listen() if there is a message present in the payload. You then create these messages with Hub.dispatch() upon a button click and pass the store down to two components called <DogAlerts /> and <DogStatus />. The first is a very simple stateless component that renders the current store value from props:

1const DogAlerts = (props) => {
2  return <pre>{JSON.stringify(props, null, 2)}</pre>
3}

While this is nice functionality, when the button is clicked the component will not be updated. In order to do that you can use a class component (or React Hooks) and call store.subscribe as part of the componentDidMount() lifecycle method:

1class DogStatus extends Component {
2  componentDidMount(){
3    this.props.store.subscribe(()=>{
4      this.forceUpdate();
5    })
6  }
7
8  render(){
9    return(<div>
10      <pre>Dog Status</pre>
11      <pre>{JSON.stringify(this.props, null, 2)}</pre>
12    </div>)
13  }
14}

Now when the store is updated the <DogStatus /> component re-renders on the screen.