feat(simulator): connect web UI

azuredeploy.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
-  "contentVersion": "1.0.0.0",
+  "contentVersion": "2.0.0.0",
   "parameters": {
     "iotHubName": {
       "type": "string",
@@ -31,6 +31,14 @@
       "metadata": {
         "description": "Specifies the number of provisioned IoT Hub units. Restricted to 1 unit for the F1 SKU. Can be set up to maximum number allowed for subscription."
       }
+    },
+    "DeviceUiStorageName": {
+      "type": "string",
+      "defaultValue": "bifravstdeviceui",
+      "maxLength": 24,
+      "metadata": {
+        "description": "Storage account name must be between 3 and 24 characters in length and use numbers and lower-case letters only."
+      }
     }
   },
   "variables": {
@@ -78,6 +86,19 @@
         ]
       },
       "dependsOn": ["[parameters('iotHubName')]"]
+    },
+    {
+      "type": "Microsoft.Storage/storageAccounts",
+      "apiVersion": "2019-04-01",
+      "name": "[parameters('DeviceUiStorageName')]",
+      "location": "[parameters('location')]",
+      "sku": {
+        "name": "Standard_LRS"
+      },
+      "kind": "StorageV2",
+      "properties": {
+        "supportsHttpsTrafficOnly": "true"
+      }
     }
   ],
   "outputs": {

cli/commands/connect.ts

@@ -7,6 +7,9 @@ import { connect } from 'mqtt'
 import { v4 } from 'uuid'
 import { parse, URLSearchParams } from 'url'
 import { DeviceRegistrationState } from 'azure-iot-provisioning-service/lib/interfaces'
+import { uiServer, WebSocketConnection } from '@bifravst/device-ui-server'
+
+const deviceUiUrl = process.env.DEVICE_UI_LOCATION || ''
 
 export const connectCommand = ({
 	certsDir,
@@ -130,8 +133,35 @@ export const connectCommand = ({
 				version: 4,
 			})
 
-			client.on('connect', () => {
+			let wsConnection: WebSocketConnection
+
+			client.on('connect', async () => {
 				console.log(chalk.green('Connected:'), chalk.blueBright(deviceId))
+
+				await uiServer({
+					deviceUiUrl,
+					deviceId: deviceId,
+					onUpdate: update => {
+						console.log(chalk.magenta('<'), chalk.cyan(JSON.stringify(update)))
+					},
+					onWsConnection: c => {
+						console.log(chalk.magenta('[ws]'), chalk.cyan('connected'))
+						wsConnection = c
+					},
+				})
+			})
+
+			client.on('message', (topic, payload) => {
+				if (wsConnection) {
+					console.log(chalk.magenta('[ws>'), JSON.stringify({
+						topic,
+						payload,
+					}))
+					wsConnection.send(JSON.stringify({
+						topic,
+						payload,
+					}))
+				}
 			})
 
 			client.on('error', err => {