|
| 1 | +# Browser: MQTT5 PubSub with React |
| 2 | + |
| 3 | +[**Return to main sample list**](../../README.md) |
| 4 | + |
| 5 | +This sample uses the |
| 6 | +[Message Broker](https://docs.aws.amazon.com/iot/latest/developerguide/iot-message-broker.html) |
| 7 | +for AWS IoT to send and receive messages through an MQTT connection using MQTT5/MQTT311 in the browser with React library. |
| 8 | + |
| 9 | +MQTT5 introduces additional features and enhancements that improve the development experience with MQTT. You can read more about MQTT5 in the Java V2 SDK by checking out the [MQTT5 user guide](https://github.com/awslabs/aws-crt-nodejs/blob/main/MQTT5-UserGuide.md). |
| 10 | + |
| 11 | +Note: MQTT5 support is currently in **developer preview**. We encourage feedback at all times, but feedback during the preview window is especially valuable in shaping the final product. During the preview period we may make backwards-incompatible changes to the public API, but in general, this is something we will try our best to avoid. |
| 12 | + |
| 13 | +Your IoT Core Thing's [Policy](https://docs.aws.amazon.com/iot/latest/developerguide/iot-policies.html) must provide privileges for this sample to connect, subscribe, publish, and receive. Below is a sample policy that can be used on your IoT Core Thing that will allow this sample to run as intended. |
| 14 | + |
| 15 | +<details> |
| 16 | +<summary>(see sample policy)</summary> |
| 17 | +<pre> |
| 18 | +{ |
| 19 | + "Version": "2012-10-17", |
| 20 | + "Statement": [ |
| 21 | + { |
| 22 | + "Effect": "Allow", |
| 23 | + "Action": [ |
| 24 | + "iot:Publish", |
| 25 | + "iot:Receive" |
| 26 | + ], |
| 27 | + "Resource": [ |
| 28 | + "arn:aws:iot:<b>region</b>:<b>account</b>:topic/test/topic*" |
| 29 | + ] |
| 30 | + }, |
| 31 | + { |
| 32 | + "Effect": "Allow", |
| 33 | + "Action": [ |
| 34 | + "iot:Subscribe" |
| 35 | + ], |
| 36 | + "Resource": [ |
| 37 | + "arn:aws:iot:<b>region</b>:<b>account</b>:topicfilter/test/topic*", |
| 38 | + ] |
| 39 | + }, |
| 40 | + { |
| 41 | + "Effect": "Allow", |
| 42 | + "Action": [ |
| 43 | + "iot:Connect" |
| 44 | + ], |
| 45 | + "Resource": [ |
| 46 | + "arn:aws:iot:<b>region</b>:<b>account</b>:client/test-*" |
| 47 | + ] |
| 48 | + } |
| 49 | + ] |
| 50 | +} |
| 51 | +</pre> |
| 52 | + |
| 53 | +Replace with the following with the data from your AWS account: |
| 54 | +* `<region>`: The AWS IoT Core region where you created your AWS IoT Core thing you wish to use with this sample. For example `us-east-1`. |
| 55 | +* `<account>`: Your AWS IoT Core account ID. This is the set of numbers in the top right next to your AWS account name when using the AWS IoT Core website. |
| 56 | + |
| 57 | +Note that in a real application, you may want to avoid the use of wildcards in your ClientID or use them selectively. Please follow best practices when working with AWS on production applications using the SDK. Also, for the purposes of this sample, please make sure your policy allows a client ID of `test-*` to connect or use `--client_id <client ID here>` to send the client ID your policy supports. |
| 58 | + |
| 59 | +</details> |
| 60 | + |
| 61 | +## How to run |
| 62 | + |
| 63 | +To run this sample you need to have a Cognito identity pool setup that can be used for making IoT connections. To see how to setup a Cognito identity pool, please refer to this page on the [AWS documentation](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html). |
| 64 | + |
| 65 | +Once you have a Cognito identity pool, you need to fill in the credentials in the `browser/react_sample/src/settings.ts` file with your AWS endpoint, AWS region, and Cognito identity pool. |
| 66 | + |
| 67 | +Run `npm install` in the `browser/react_sample` folder to build the sample. |
| 68 | +Then run `npm start` to start the dev server. The default port is `3000`. You should be able to run the sample at http://localhost:3000/ in your browser. If configured correctly, it should connect to AWS IoT Core, subscribe to a topic, and then start receiving the messages it publishes to the topic it's subscribed to. |
| 69 | + |
| 70 | +You can adjust the port at [package.json](./package.json): |
| 71 | +``` |
| 72 | + "scripts": { |
| 73 | + "test": "echo \"Error: no test specified\" && exit 1", |
| 74 | + "start": "webpack serve --port 3000", |
| 75 | + "build": "NODE_ENV=production webpack" |
| 76 | + }, |
| 77 | +``` |
| 78 | + |
| 79 | +## Mqtt311 Sample |
| 80 | +By default, the sample uses Mqtt5. To checkout the sample with Mqtt311. You can modify the [index.tsx](./src/index.tsx) |
| 81 | +``` |
| 82 | +root.render( |
| 83 | + // <Mqtt5 /> |
| 84 | + // Comment the Mqtt5 and uncomment Mqtt311 to enable the Mqtt311 component |
| 85 | + <Mqtt311 /> |
| 86 | +); |
| 87 | +``` |
| 88 | +## React Q&A |
| 89 | +### Error "Module not found: Error: Can't resolve 'LIBRARY' in webpack 5" |
| 90 | +As webpack 5 no longer polyfills many Node APIs. We would need resolve the packages when upgrading from webpack 4 to webpack 5. |
| 91 | +You can resolve the issue by config the `webpack.config.js`. |
| 92 | +Example of resolve library "url" and "util": |
| 93 | +``` |
| 94 | + resolve:{ |
| 95 | + fallback: |
| 96 | + { |
| 97 | + "url": require.resolve("url/"), |
| 98 | + "util": require.resolve("util/") |
| 99 | + } |
| 100 | + } |
| 101 | +``` |
| 102 | +The article could be helpful: https://gist.github.com/ef4/d2cf5672a93cf241fd47c020b9b3066a |
0 commit comments