DOM

次の例は、サイトが使用可能なポートを確認し、ユーザーが追加のポートにアクセスするためのアクセス許可をサイトに付与できるようにする方法を示しています。

ロード時に、「connect」イベントと「disconnect」イベントのリスナーが追加され、デバイスがシステムに接続または切断されたときにサイトが反応できるようになります。 次に、getPorts() メソッドが呼び出され、サイトがすでにアクセスしている接続されているポートを確認します。

サイトが接続されているポートにアクセスできない場合は、ユーザーがアクティブ化するまでサイトを待機する必要があります。この例では、このタスクのボタンで click イベント ハンドラーを使用します。ユーザーに表示されるデバイスのセットを特定のメーカーによって製造されたUSBデバイスのみに制限するために、フィルターがUSBベンダーIDを使用してrequestPort() に渡されます。

navigator.serial.addEventListener('connect', (e) => {
  // Connect to `e.target` or add it to a list of available ports.
});

navigator.serial.addEventListener('disconnect', (e) => {
  // Remove `e.target` from the list of available ports.
});

navigator.serial.getPorts().then((ports) => {
  // Initialize the list of available ports with `ports` on page load.
});

button.addEventListener('click', () => {
  const usbVendorId = ...;
  navigator.serial.requestPort({ filters: [{ usbVendorId }]}).then((port) => {
    // Connect to `port` or add it to the list of available ports.
  }).catch((e) => {
    // The user didn't select a port.
  });
});