Skip to content

Commit 31239d3

Browse files
xiazhveraxiazhvera
authored
Electron@19 sample (#383)
* initial wip commit * setup electron app * read me * add EOF * update sample readme * EOF and copyright * update the sample to demo both websockets and mtls
1 parent c735f5a commit 31239d3

File tree

10 files changed

+497
-0
lines changed

10 files changed

+497
-0
lines changed

‎samples/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* [Node: MQTT5 Pub/Sub](./node/pub_sub_mqtt5/README.md)
44
* [Browser: MQTT5 Pub/Sub](./browser/pub_sub_mqtt5/README.md)
55
* [Browser: MQTT5 Pub/Sub with React](./browser/react_sample/README.md)
6+
* [Node: MQTT5 Pub/Sub with Electron](./node/pub_sub_electron_node/README.md)
67
* [Node: Pub/Sub](./node/pub_sub/README.md)
78
* [Pub/Sub JS](./node/pub_sub_js/README.md)
89
* [Browser: Pub/Sub](./browser/pub_sub/README.md)

‎samples/browser/react_sample/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
<!--
2+
* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3+
* SPDX-License-Identifier: Apache-2.0.
4+
-->
15
<!DOCTYPE html>
26
<html lang="en">
37
<head>

‎samples/browser/react_sample/src/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/**
2+
* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3+
* SPDX-License-Identifier: Apache-2.0.
4+
*/
15
import ReactDOM from 'react-dom/client';
26
import Mqtt311 from './PubSub';
37
import Mqtt5 from './PubSub5';

‎samples/node/pub_sub_electron_node/Main.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/*
2+
* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3+
* SPDX-License-Identifier: Apache-2.0.
4+
*/
5+
const { app, BrowserWindow} = require('electron')
6+
const path = require("path")
7+
8+
function createWindow () {
9+
const win = new BrowserWindow({
10+
width: 800,
11+
height: 600,
12+
webPreferences: {
13+
preload: path.join(__dirname, "./preload_pubsub5.js"),
14+
}
15+
})
16+
17+
win.loadFile('./index.html');
18+
}
19+
20+
app.whenReady().then(() => {
21+
createWindow();
22+
app.on('activate', () => {
23+
if (BrowserWindow.getAllWindows().length === 0) {
24+
createWindow()
25+
}
26+
})
27+
})
28+
29+
app.on('window-all-closed', () => {
30+
if (process.platform !== 'darwin') {
31+
app.quit()
32+
}
33+
34+
})

‎samples/node/pub_sub_electron_node/README.md‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
# Node: MQTT5 PubSub Electron
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.
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+
## Requirements
14+
15+
The sample is built with typescript@5^ and Electron@19. Please note the SDK currently does not support Electron20+.
16+
Node14 is recommended to run the sample.
17+
18+
19+
## IoT Core Policy
20+
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.
21+
22+
<details>
23+
<summary>(see sample policy)</summary>
24+
<pre>
25+
{
26+
"Version": "2012-10-17",
27+
"Statement": [
28+
{
29+
"Effect": "Allow",
30+
"Action": [
31+
"iot:Publish",
32+
"iot:Receive"
33+
],
34+
"Resource": [
35+
"arn:aws:iot:<b>region</b>:<b>account</b>:topic/test/topic/*"
36+
]
37+
},
38+
{
39+
"Effect": "Allow",
40+
"Action": [
41+
"iot:Subscribe"
42+
],
43+
"Resource": [
44+
"arn:aws:iot:<b>region</b>:<b>account</b>:topicfilter/test/topic/*"
45+
]
46+
},
47+
{
48+
"Effect": "Allow",
49+
"Action": [
50+
"iot:Connect"
51+
],
52+
"Resource": [
53+
"arn:aws:iot:<b>region</b>:<b>account</b>:client/*"
54+
]
55+
}
56+
]
57+
}
58+
</pre>
59+
60+
Replace with the following with the data from your AWS account:
61+
* `<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`.
62+
* `<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.
63+
64+
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.
65+
66+
</details>
67+
68+
## How to run
69+
70+
### Direct MQTT via mTLS
71+
72+
To Run this sample using a direct MQTT5 connection with a key and certificate, go to the `node/pub_sub_electron_node` folder.
73+
1. Setup your credential. You need to fill in the credentials in the `node/pub_sub_electron_node/settings.ts` with your AWS endpoint, certificate file path, private key file path.
74+
75+
2. Install node packages
76+
``` sh
77+
npm install
78+
```
79+
80+
3. Build and Run
81+
```sh
82+
npm run build
83+
npm run start
84+
```
85+
86+
### Websockets
87+
88+
To Run this sample using Websockets, go to the `node/pub_sub_electron_node` folder.
89+
1. Setup your credential. You will need to set your AWS credentials in your environment variables or local files. See the [authorizing direct AWS](https://docs.aws.amazon.com/iot/latest/developerguide/authorizing-direct-aws.html) page for documentation on how to get the AWS credentials, which then you can set to the `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS`, and `AWS_SESSION_TOKEN` environment variables.
90+
91+
2. Setup `settings.ts`. You will need setup the `region` and `endpoint` in `settings.ts` to setup the e
92+
93+
3. Install node packages
94+
```sh
95+
npm install
96+
```
97+
98+
4. Build and Run
99+
```sh
100+
npm run build
101+
npm run start
102+
```
103+
104+
## Electron Q&A
105+
### Warning: `objc[79765]: Class WebSwapCGLLayer is implemented in both ` ?
106+
107+
This is an issue running Electron on MacOS. The API has a name duplication for "WebSwapCGLLayer". The warning should not affect your development. The issue is fixed by Electron in v22. Unfortunately, our SDK currently only supports Electron@19 and below.
108+
109+
More info: https://github.com/electron/electron/issues/33685
110+
111+
### How to debug with Dev Tools
112+
You can open dev tool using the following API:
113+
```
114+
win.webContents.openDevTools()
115+
```
116+
117+
### SyntaxError: Unexpected token '?'
118+
Please check your dependency and Node version. If the error is not from your code, it is most likely your dependency is using a different version of node. As the nullish coalescing operator (??) is introduced in Node14, using Node14+ would help.
119+
120+
### N-API call failed: napi_create_external_arraybuffer( env, data_buffer->buffer, data_buffer->len, s_finalize_external_binary_byte_buf, data_buffer, &napi_binary).
121+
Electron removed support for `napi_create_external_arraybuffer` since Electron@20. You can find more information from the Electron community here: https://github.com/electron/electron/issues/35801. There is no solid solution for the issue right now. Our team is actively working on resolving it.
122+
123+
### Why does the SDK not support Electron@20+
124+
Same as the above question.

‎samples/node/pub_sub_electron_node/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!--
2+
* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3+
* SPDX-License-Identifier: Apache-2.0.
4+
-->
5+
<html>
6+
7+
<head>
8+
<meta charset="UTF-8">
9+
</head>
10+
11+
<body>
12+
<div>
13+
<input type="button" id="connect" onclick="window.electron.Mqtt5MtlsStart()" value="Start Mqtt5 with Mtls" />
14+
<input type="button" id="webscoket_connect" onclick="window.electron.Mqtt5WebsocketsStart()" value="Start Mqtt5 with Websocket" />
15+
<input type="button" id="publish" onclick="window.electron.Mqtt5PublishQoS1()" value="Publish a QoS1 Message" />
16+
<input type="button" id="stop" onclick="window.electron.Mqtt5Stop()" value="Stop Client" />
17+
</div>
18+
<div style="overflow:auto;border:1px solid #999" id="console"></div>
19+
</body>
20+
21+
</html>

‎samples/node/pub_sub_electron_node/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "electron_sample",
3+
"version": "1.0.0",
4+
"description": "PubSub Electron sample",
5+
"main": "./dist/Main.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"build": "./node_modules/.bin/tsc",
9+
"start": "electron ."
10+
},
11+
"repository": {
12+
"type": "git",
13+
"url": "git+https://github.com/aws/aws-iot-device-sdk-js-v2.git"
14+
},
15+
"author": "AWS SDK Common Runtime Team <[email protected]>",
16+
"license": "Apache-2.0",
17+
"bugs": {
18+
"url": "https://github.com/aws/aws-iot-device-sdk-js-v2/issues"
19+
},
20+
"homepage": "https://github.com/aws/aws-iot-device-sdk-js-v2#readme",
21+
"devDependencies": {
22+
"aws-iot-device-sdk-v2": "file:../../..",
23+
"electron": "^19.1.9",
24+
"events": "^3.3.0",
25+
"typescript": "^5.1.3"
26+
}
27+
}

0 commit comments

Comments
 (0)