Merge pull request #107 from SuperFlyTV/fix/disconnect-webhid

Add 'disconnect' event for the webHID device

packages/webhid-demo/public/index.html

@@ -26,7 +26,8 @@ <h3>
 		<button href="#" id="consent-button">Select device</button>
 	</p>
 	<p>
-		<button href="#" id="close-button">Close device</button>
+		<p>Connected Devices:</p>
+		<p id="devices"></p>
 	</p>
 
 	<div id="log" style="white-space: pre; background: #ffffff; border: 1px solid grey;"></div>

packages/webhid-demo/src/app.ts

@@ -1,86 +1,128 @@
 import { getOpenedXKeysPanels, requestXkeysPanels, setupXkeysPanel, XKeys } from 'xkeys-webhid'
 
+const connectedXkeys = new Set<XKeys>()
+
 function appendLog(str: string) {
 	const logElm = document.getElementById('log')
 	if (logElm) {
 		logElm.textContent = `${str}\n${logElm.textContent}`
 	}
 }
 
-let currentXkeys: XKeys | null = null
-
 async function openDevice(device: HIDDevice): Promise<void> {
 	const xkeys = await setupXkeysPanel(device)
 
-	currentXkeys = xkeys
+	connectedXkeys.add(xkeys)
+
+	const id = xkeys.info.name
 
-	appendLog(`Connected to "${xkeys.info.name}"`)
+	appendLog(`${id}: Connected`)
 
+	xkeys.on('disconnected', () => {
+		appendLog(`${id}: Disconnected`)
+		// Clean up stuff:
+		xkeys.removeAllListeners()
+
+		connectedXkeys.delete(xkeys)
+		updateDeviceList()
+	})
+	xkeys.on('error', (...errs) => {
+		appendLog(`${id}: X-keys error: ${errs.join(',')}`)
+	})
 	xkeys.on('down', (keyIndex: number) => {
-		appendLog(`Button ${keyIndex} down`)
+		appendLog(`${id}: Button ${keyIndex} down`)
 		xkeys.setBacklight(keyIndex, 'blue')
 	})
 	xkeys.on('up', (keyIndex: number) => {
-		appendLog(`Button ${keyIndex} up`)
+		appendLog(`${id}: Button ${keyIndex} up`)
 		xkeys.setBacklight(keyIndex, null)
 	})
 	xkeys.on('jog', (index, value) => {
-		appendLog(`Jog #${index}: ${value}`)
+		appendLog(`${id}: Jog #${index}: ${value}`)
 	})
 	xkeys.on('joystick', (index, value) => {
-		appendLog(`Joystick #${index}: ${JSON.stringify(value)}`)
+		appendLog(`${id}: Joystick #${index}: ${JSON.stringify(value)}`)
 	})
 	xkeys.on('shuttle', (index, value) => {
-		appendLog(`Shuttle #${index}: ${value}`)
+		appendLog(`${id}: Shuttle #${index}: ${value}`)
 	})
 	xkeys.on('tbar', (index, value) => {
-		appendLog(`T-bar #${index}: ${value}`)
+		appendLog(`${id}: T-bar #${index}: ${value}`)
 	})
+
+	updateDeviceList()
 }
 
-window.addEventListener('load', () => {
-	appendLog('Page loaded')
-	// Attempt to open a previously selected device:
-	getOpenedXKeysPanels()
-		.then((devices) => {
-			if (devices.length > 0) {
-				appendLog(`"${devices[0].productName}" already granted in a previous session`)
-				console.log(devices[0])
-				openDevice(devices[0]).catch(console.error)
-			}
-		})
-		.catch(console.error)
-})
-
-const consentButton = document.getElementById('consent-button')
-consentButton?.addEventListener('click', () => {
-	if (currentXkeys) {
-		appendLog('Closing device')
-		currentXkeys.close().catch(console.error)
-		currentXkeys = null
-	}
-	// Prompt for a device
-
-	appendLog('Asking user for permissions...')
-	requestXkeysPanels()
-		.then((devices) => {
-			if (devices.length === 0) {
-				appendLog('No device was selected')
-				return
-			}
-			appendLog(`Access granted to "${devices[0].productName}"`)
-			openDevice(devices[0]).catch(console.error)
-		})
-		.catch((error) => {
-			appendLog(`No device access granted: ${error}`)
-		})
-})
-
-const closeButton = document.getElementById('close-button')
-closeButton?.addEventListener('click', () => {
-	if (currentXkeys) {
-		appendLog('Closing device')
-		currentXkeys.close().catch(console.error)
-		currentXkeys = null
+function initialize() {
+	window.addEventListener('load', () => {
+		appendLog('Page loaded')
+
+		if (!navigator.hid) {
+			appendLog('>>>>>  WebHID not supported in this browser  <<<<<')
+			return
+		}
+
+		// Attempt to open a previously selected device:
+		getOpenedXKeysPanels()
+			.then((devices) => {
+				for (const device of devices) {
+					appendLog(`"${device.productName}" already granted in a previous session`)
+					console.log(device)
+					openDevice(device).catch(appendLog)
+				}
+			})
+			.catch(console.error)
+	})
+
+	const consentButton = document.getElementById('consent-button')
+	consentButton?.addEventListener('click', () => {
+		// Prompt for a device
+
+		appendLog('Asking user for permissions...')
+		requestXkeysPanels()
+			.then((devices) => {
+				if (devices.length === 0) {
+					appendLog('No device was selected')
+				} else {
+					for (const device of devices) {
+						appendLog(`Access granted to "${device.productName}"`)
+						openDevice(device).catch(console.error)
+					}
+				}
+			})
+			.catch((error) => {
+				appendLog(`No device access granted: ${error}`)
+			})
+	})
+}
+
+function updateDeviceList() {
+	// Update the list of connected devices:
+
+	const container = document.getElementById('devices')
+	if (container) {
+		container.innerHTML = ''
+
+		if (connectedXkeys.size === 0) {
+			container.innerHTML = '<i>No devices connected</i>'
+		} else {
+			connectedXkeys.forEach((xkeys) => {
+				const div = document.createElement('div')
+				div.innerHTML = `
+					<b>${xkeys.info.name}</b>
+				`
+				const button = document.createElement('button')
+				button.innerText = 'Close device'
+				button.addEventListener('click', () => {
+					appendLog(xkeys.info.name + ' Closing device')
+					xkeys.close().catch(console.error)
+					// currentXkeys = null
+				})
+
+				container.appendChild(div)
+			})
+		}
 	}
-})
+}
+
+initialize()

packages/webhid/src/globalDisconnectListener.ts

@@ -0,0 +1,34 @@
+export class GlobalDisconnectListener {
+	private static listeners = new Map<HIDDevice, () => void>()
+	private static isSetup = false
+
+	/** Add listener for disconnect event, for a HIDDevice. The callback will be fired once. */
+	static listenForDisconnect(device: HIDDevice, callback: () => void): void {
+		this.setup()
+		this.listeners.set(device, callback)
+	}
+
+	private static setup() {
+		if (this.isSetup) return
+		navigator.hid.addEventListener('disconnect', this.handleDisconnect)
+		this.isSetup = true
+	}
+	private static handleDisconnect = (ev: HIDConnectionEvent) => {
+		this.listeners.forEach((callback, device) => {
+			if (device === ev.device) {
+				callback()
+				// Also remove the listener:
+				this.listeners.delete(device)
+			}
+		})
+		if (this.listeners.size === 0) {
+			// If there are not listeners, we can teardown the global listener:
+			this.teardown()
+		}
+	}
+	private static teardown() {
+		navigator.hid.removeEventListener('disconnect', this.handleDisconnect)
+		this.listeners.clear()
+		this.isSetup = false
+	}
+}

packages/webhid/src/methods.ts

@@ -1,5 +1,6 @@
 import { XKeys, XKEYS_VENDOR_ID } from '@xkeys-lib/core'
 import { WebHIDDevice } from './web-hid-wrapper'
+import { GlobalDisconnectListener } from './globalDisconnectListener'
 
 /** Prompts the user for which X-keys panel to select */
 export async function requestXkeysPanels(): Promise<HIDDevice[]> {
@@ -58,6 +59,13 @@ export async function setupXkeysPanel(browserDevice: HIDDevice): Promise<XKeys>
 		undefined
 	)
 
+	// Setup listener for disconnect:
+	GlobalDisconnectListener.listenForDisconnect(browserDevice, () => {
+		xkeys._handleDeviceDisconnected().catch((e) => {
+			console.error(`Xkeys: Error handling disconnect:`, e)
+		})
+	})
+
 	// Wait for the device to initialize:
 	try {
 		await xkeys.init()