デバイスが追加、削除、または変更された場合に通知を受け取る方法 (HTML)
このチュートリアルでは、デバイスを動的に列挙する方法を示します。その後、アプリでは、デバイスが追加または 削除された場合、またはデバイスのプロパティが変化した場合に、通知を受け取ることができます。
デバイスの列挙を始めるには、DeviceWatcher クラスを使います。検出された各デバイスについて、 DeviceWatcher はデバイスが検出されて列挙が 完了するまで Add イベントを生成します。初期列挙が完了した後、デバイスが追加、 更新、または削除された場合は、DeviceWatcher は 引き続きイベントを生成します。
理解しておく必要があること
テクノロジ
- Windows Runtime
必要条件
JavaScript および HTML
手順
ステップ 1: Microsoft Visual Studio を開く
Visual Studio のインスタンスを開きます。
ステップ 2: 新しいプロジェクトを作る
[新しいプロジェクト] ダイアログ ボックスで、[JavaScript] > [Windows ストア アプリ] プロジェクトの種類から、新しいアプリを選びます。
ステップ 3: アプリケーションの JavaScript と HTML を挿入する
Default.html を開き、次の HTML をコピーして、元の内容を置き換えます。
<!DOCTYPE html>
<html>
<head>
<title>Device Enumeration Sample</title>
<meta charset="utf-8" />
<script src="/js/default.js"></script>
</head>
<body role="application">
<h1>Device Enumeration Sample</h1>
<h2 >Input</h2>
<div >
<div >
<p>This example incrementally enumerates devices, adding them to a list each time a device is found, and also watching for updates.
Once enumeration is complete, the list of devices is printed.</p>
<input type="button" value="Watch(All Devices)" onclick="WatchDevices()"/>
<br /><br />
<input type="button" value="Stop" onclick="stopWatcher()"/>
<br /><br />
</div>
</div>
<h2 > Output</h2>
<div id="statusMessage"></div>
<!-- Output -->
<div id="output"></div>
</body>
</html>
ステップ 4:
次のコードを default.js に貼り付け、ファイルの内容を置き換えます。
var watcher;
var isEnumerationComplete = false;
var deviceArray = new Array(); // Saves the enumeration results
function WatchDevices() {
try {
output.innerHTML = ""; // clear output field
watcher =
Windows.Devices.Enumeration.DeviceInformation.createWatcher();
// Add event handlers
watcher.addEventListener("added", onAdded);
watcher.addEventListener("removed", onRemoved);
watcher.addEventListener("updated", onUpdated);
watcher.addEventListener("enumerationcompleted",
onEnumerationCompleted);
watcher.addEventListener("stopped", onStopped);
// Start enumerating and listening for events
watcher.start();
} catch (e) {
document.getElementById("statusMessage").innerHTML =
"Failed to create watcher, error: " + e.message;
}
}
function stopWatcher() {
try {
watcher.stop();
}
catch (e) {
document.getElementById("statusMessage").innerHTML =
"Failed to stop watcher: " + e.message;
}
}
function onAdded(devinfo) {
document.getElementById("output").innerHTML += "<p>Device added: " +
devinfo.name + "</p>";
deviceArray.push(devinfo);
if (isEnumerationComplete) {
output.innerHTML = ""; // clear output field
printDeviceArray(document.getElementById("output"));
}
}
function onUpdated(devUpdate) {
document.getElementById("output").innerHTML += "<p>Device updated.</p>";
for (var i = 0; i < deviceArray.length; i++) {
if (deviceArray[i].id == devUpdate.id) {
deviceArray[i].update(devUpdate);
}
}
output.innerHTML = ""; // clear output field
printDeviceArray(document.getElementById("output"));
}
function onRemoved(devupdate) {
document.getElementById("output").innerHTML += "<p>Device removed.</p>";
for (var i = 0; i < deviceArray.length; i++) {
if (deviceArray[i].id == devupdate.id) {
deviceArray[i].slice(devupdate);
}
}
output.innerHTML = ""; // clear output field
printDeviceArray(document.getElementById("output"));
}
function onEnumerationCompleted(obj) {
isEnumerationComplete = true;
document.getElementById("output").innerHTML +=
"<p>Enumeration Completed.</p>";
printDeviceArray(document.getElementById("output"));
}
function onStopped(obj) {
document.getElementById("output").innerHTML += "<p>Stopped.</p>";
if (watcher.status == Windows.Devices.Enumeration.DeviceWatcherStatus.aborted) {
document.getElementById("output").innerHTML +=
"<p>Enumeration stopped unexpectedly. </p>";
document.getElementById("output").innerHTML +=
"<p>Click the Watch button to restart enumeration.</p>";
} else if (watcher.status == Windows.Devices.Enumeration.DeviceWatcherStatus.stopped) {
document.getElementById("output").innerHTML +=
"<p>You requested to stop enumeration. </p>";
document.getElementById("output").innerHTML +=
"<p>Click the Watch button to restart enumeration.</p>";
}
}
// Prints the friendly name of the device interface,
// its ID (device interface path), and whether it is enabled.
function printDevice(deviceInterface, outputDestination) {
outputDestination.innerHTML += "<p>Name: " +
deviceInterface.name + "<p/>";
outputDestination.innerHTML += "<p>Interface ID: " +
deviceInterface.id + "<p/>";
outputDestination.innerHTML += "<p>Enabled: " +
deviceInterface.isEnabled + "<p/>";
outputDestination.innerHTML += "<br />";
}
function printDeviceArray(outputDestination) {
for (var i = 0; i < deviceArray.length; i++) {
printDevice(deviceArray[i], outputDestination);
}
}
注釈
この例では、段階的にデバイスを列挙します。デバイスが検出されるたびに一覧に追加し、更新の監視も 行います。列挙が完了すると、アプリはデバイスの一覧を出力します。また、最初の列挙が 終わった後でユーザーがデバイスを追加、更新、削除した場合も、アプリはメッセージを出力します。
注 アプリは、デバイスの追加、削除、または更新があるときに通知されるよう、すべての added イベント、 removed イベント、 updated イベントを受信登録する必要が あります。アプリが added イベントのみを処理する 場合は、デバイスの初期列挙が完了した後でデバイスがシステムに追加された場合に更新を受け取りません。