-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
306 lines (259 loc) · 17.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="e2e.css">
</head>
<body>
<script src="./e2e.js" type="text/javascript">
</script>
<div id="main">
<div id="logo-space">
<img id="logo" src="image/Logo_ArmPelion_White.bc9f68a5a605.svg"/>
</div>
<div id="title">Device Communication with Pelion Device Management Service API</div>
<div id="lead">
<p>
This is an interactive example page for device communication between Pelion Device Management and its client device.
</p>
<p>
Through this example, you get to understand how to use Pelion Device Management Service API to communicate with your deployed devices(s).
</p>
<p>
You can find source code of this example page <a href="https://github.com/coisme/Pelion-device-e2e-example">here</a>.
</p>
</div>
<h1>Prerequisites</h1>
<p>
To go through this example, you need these.
<ul>
<li>Pelion Device Management API key (<a href="https://www.pelion.com/docs/device-management/current/user-account/api-keys.html#creating-a-key">Get API key</a>)</li>
<li>Device running <a href="https://github.com/ARMmbed/mbed-cloud-client-example">mbed-cloud-client-example</a> or <a href="https://github.com/ARMmbed/mbed-os-example-pelion">mbed-os-example-pelion</a></li>
</ul>
</p>
<h1>API key</h1>
<p>
Please input your API key here (API key starts from ak_...). About API key and how to get it, please refer
<a href="https://www.pelion.com/docs/device-management/current/user-account/api-keys.html">online document</a>.
</p>
<div class="operation">
<input id="apikey" type="text" size="80" value="" placeholder="ak_..."/><br/>
<input id="storeApiKey" type="checkbox" name="storeApiKey" onclick="handleApiKeyCheckbox()"/>
<label for="storeApiKey">Store API Key in Cookie (Use only on your private browser)</label>
</div>
<h1>Open event notification channel and receive event from device</h1>
<p>
To receive messages from your devices, you need to open an event notification channel. We use WebSocket notification channel in this example.
</p>
<p>
To use the WebSocket channel, follow these steps. Detailed description on this flow is
<a href="https://www.pelion.com/docs/device-management/current/integrate-web-app/event-notification.html#websocket-interface">here</a>.
Note that you can open only 1 notification channel per API key.
</p>
<h2>Create WebSocket notification channel</h2>
<p>
First we will need to open a <a href="https://www.pelion.com/docs/device-management/current/integrate-web-app/event-notification.html">Event notification channel.</a>
Click this button to create a WebSocket notification channel with
<a href="https://www.pelion.com/docs/device-management/current/service-api-references/device-management-connect.html#registerWebsocket">PUT /v2/notification/websocket</a>.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=0:18&footer=minimal"></script>
<button type="button" onclick="createWebSocketNotificationChannel()">Run this code</button>
</div>
<h2>Connect WebSocket notification channel</h2>
<p>
After creating your WebSocket notification channel, connect to it with
<a href="https://www.pelion.com/docs/device-management/current/service-api-references/device-management-connect.html#connectWebsocket">GET /v2/websocket-connect</a>.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=19:90&footer=minimal"></script>
<button type="button" onclick="connectWebSocket()">Run this code</button>
</div>
<p>
Now you have a event notification channel open. You will receive the device lifitime events (Register, Register-Update and Expire) by default.
</p>
<h1>Connect your device</h1>
<p>
Turn on or reset your device and connect to Pelion.
You should see <b>reqistration</b> or <b>reg-update</b> event in the <b>Notification Channel</b> below.
</p>
<h2>Choose your device</h2>
<p>
First, click <b>Get Registered Devices</b> button below to get the devices which state is <b>registered</b>.
<a href="https://www.pelion.com/docs/device-management/current/service-api-references/device-directory.html#deviceList">GET /v3/devices</a> is used to get device list.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=91:115&footer=minimal"></script>
<button type="button" onclick="getRegisteredDevices()">Run this code</button>
</div>
<p>
When you click the button above, you'll see the registered device(s) in the box below. Choose your target device.
</p>
<div class="operation">
<select id="deviceSelector">
<option value="00000000000000000000000000000000">Click the above button to get registered devices</option>
</select>
</div>
<h1>Write resource to device</h1>
<p>
Send a resource update request to a device with
<a href="https://www.pelion.com/docs/device-management/current/service-api-references/device-management-connect.html#createAsyncRequest">POST /v2/device-requests</a>.
For detail flow, see <a href="https://www.pelion.com/docs/device-management/current/connecting/handle-resource-webapp.html#the-write-operation">the Write operation</a>.
</p>
<p>
With Write request you can configure the device. The example application blinks a LED, let's configure new blink pattern by writing it in "pattern_resource" /3201/0/5853.
The default value of this resource is "500:500:500:500". We change this to "500:1000:500:1000". This value must be encoded into Base64, which is done in our script.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=116:136&footer=minimal"></script>
Pattern: <input id="blinkPattern" type="text" size="30" value="500:1000:500:1000" /><br />
<button type="button" onclick="writeResource( getDeviceId(), '/3201/0/5853', document.getElementById('blinkPattern').value)">Run this code</button>
</div>
<p>
You'll get an async-response on your notification channel when the device accepted the request. In addition, the user LED on the device will blink with the specified pattern, 500 ms, 1000 ms, 500 ms, 1000 ms.
</p>
<h1>Read resource from device</h1>
<p>
Send a resource read request to a device with
<a href="https://www.pelion.com/docs/device-management/current/service-api-references/device-management-connect.html#createAsyncRequest">POST /v2/device-requests</a>.
For detail flow, see <a href="https://www.pelion.com/docs/device-management/current/connecting/handle-resource-webapp.html#the-read-operation">the Read operation</a>.
</p>
<p>
For example, let's read resource Digital Input Counter /3200/0/5501.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=137:156&footer=minimal"></script>
<button type="button" onclick="readResource( getDeviceId(), '/3200/0/5501')">Run this code</button>
</div>
<p>
<b>Note for cache</b><br/>
If max-age value is set by the device's client, reported values from the device is cached for max-age:
<a href="https://www.pelion.com/docs/device-management/current/connecting/device-guidelines.html#resource-cache">https://www.pelion.com/docs/device-management/current/connecting/device-guidelines.html#resource-cache</a>
If the cached value is valid, it will be returned as the response. If your webapp needs to get the current value from the device, not cached value, max-age must be set 0 (default is 0) at the device client.
</p>
<h1>Subscribe resource</h1>
<h2>Subscribe</h2>
<p>
Subscribe to a resource on a device with
<a href="https://www.pelion.com/docs/device-management/current/service-api-references/device-management-connect.html#addResourceSubscription">PUT /v2/subscription/{device-id}/{resourcePath}</a>.
</p>
<p>
For example, let's subscribe Digital Input Counter /3200/0/5501 resource.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=157:173&footer=minimal"></script>
<button type="button" onclick="subscribeResource( getDeviceId(), '/3200/0/5501')">Run this code</button>
</div>
<p>
You will receive an async response and followed by notifications for resource change.
</p>
<h2>Unsubscribe</h2>
<p>
To stop subscribing to the resource, use
<a href="https://www.pelion.com/docs/device-management/current/service-api-references/device-management-connect.html#deleteResourceSubscription">DELETE /v2/subscriptions/{device-id}/{resourcePath}</a>.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=174:190&footer=minimal"></script>
<button type="button" onclick="unsubscribeResource( getDeviceId(), '/3200/0/5501')">Run this code</button>
</div>
<h1>Presubscribe resource</h1>
<p>
Presubscribe to a resource with <a href="https://www.pelion.com/docs/device-management/current/service-api-references/device-management-connect.html#updatePreSubscriptions">PUT /v2/subscriptions</a>.
</p>
<p>
A presubscription automatically subscribes to Resources based on given rules.
When a device with Resources match the set rules, the Device management Connect service sends a subscription (observe) request to the device on behalf of your application.
See
<a href="https://www.pelion.com/docs/device-management/current/connecting/resource-change-webapp.html#presubscriptions">this online document</a>
for details of presubscription.
</p>
<h2>Subscribe</h2>
<p>
Let's presubscribe to Digital Input Counter /3200/0/5501.
To presubscribe, use <a href="https://www.pelion.com/docs/device-management/current/service-api-references/device-management-connect.html#updatePreSubscriptions">PUT /v2/subscriptions</a>.
This case, any device which has Digital Input Counter /3200/0/5501 resource will be subscribed automatically
when device registers or does register update.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=191:211&footer=minimal"></script>
<button type="button" onclick="presubscribe( getDeviceId(),'/3200/0/5501')">Run this code</button>
</div>
<p>
Try to reboot your device. The resource /3200/0/5501 will be subscribed automatically and you'll see notification on your notification channel.
</p>
<h2>Unsubscribe</h2>
<p>
To unsubscribe presubscription, use <a href="">DELETE /v2/subscriptions</a>.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=211:228&footer=minimal"></script>
<button type="button" onclick="unpresubscribe()">Run this code</button>
</div>
<h1>Set notification rules for a resource</h1>
<p>
The web application can set a rule-based subscription to an Object, an Object Instance or a Resource.
</p>
<h2>Subscribe</h2>
<p>
Note that you need to subscribe /3200/0/5501 besides setting a notification rule.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=157:173&footer=minimal"></script>
<button type="button" onclick="subscribeResource( getDeviceId(), '/3200/0/5501')">Run this code</button>
</div>
<h2>Set notification rule</h2>
<p>
The device updates Digital Input Counter /3200/0/5501 every 5 seconds and is reported to Pelion Device Management.
However, your webapp may need data only every 1 minutes and not want to receive redundant data.
In this case, you can use the notification rule pmin, which sets minimum report period.
Details for notification rules, see
<a href="https://www.pelion.com/docs/device-management/current/connecting/resource-change-webapp.html#notification-rules">this page</a>.
</p>
<p>
To set pmin 1 minute to your subscription to Digital Input Counter /3200/0/5501, set tMin with
<a href="https://www.pelion.com/docs/device-management/current/service-api-references/device-management-connect.html#createAsyncRequest">POST /v2/device-request</a>.
Specify the resource path in uri field with pmin=60 parameter. This is done in the script.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=228:248&footer=minimal"></script>
<button type="button" onclick="setFilterParameter( getDeviceId(), '/3200/0/5501', 'pmin=60')">Run this code</button>
</div>
<h2>Unsubscribe</h2>
<p>
To stop subscribing to the resource, use
<a href="https://www.pelion.com/docs/device-management/current/service-api-references/device-management-connect.html#deleteResourceSubscription">DELETE /v2/subscriptions/{device-id}/{resourcePath}</a>.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=174:190&footer=minimal"></script>
<button type="button" onclick="unsubscribeResource( getDeviceId(), '/3200/0/5501')">Run this code</button>
</div>
<h1>Delete WebSocket notification channel</h1>
<p>
In the end, delete the WebSocket notification channel bound to the API key. Use
<a href="https://www.pelion.com/docs/device-management/current/service-api-references/device-management-connect.html#deleteWebsocket">DELETE /v2/notification/websocket</a>.
This is required to change the channel from websocket to another type.
</p>
<div class="operation">
<script src="https://gist-it.appspot.com/github/coisme/Pelion-device-e2e-example/blob/v0.1.0/e2e.js?slice=248:265&footer=minimal"></script>
<button type="button" onclick="deleteWebSocketNotificationChannel()">Run this code</button>
</div>
<p>
End-of-Contents
</p>
</div>
<div id="logs">
<div class="terminal-container">
<b>Events</b>
<div id="event_log" class="terminal"></div>
</div>
<div class="terminal-container">
<b>Notification Channel</b>
<div id="notification_channel" class="terminal"></div>
</div>
<div class="terminal-container">
<b>Device Events</b>
<div id="device_data_events" class="terminal"></div>
</div>
<button type="button" onclick="ClearEventLog()">Clear All</button>
</div>
</body>
</html>