浏览器访问串口，浏览器操作串口简易指南

1. 什么是串口

串口（Serial port），是指通过串行通信协议进行数据传输的一个接口。它是计算机与外部设备进行数据交换的一个通道，常用于连接调试设备、传感器、模块等外设。通常，一个串口口通过两个针脚（TX与RX）进行数据的收发。

2. 如何在浏览器中访问串口

在操作串口之前，需要准备一个支持串口通信的开发板或模块，这里以NodeMCU为例。NodeMCU是一款基于ESP8266芯片的WiFi开发板，它内置了USB转串口芯片，可以通过USB接口连接到计算机上。同时，NodeMCU也支持通过网络进行远程控制，非常适合进行物联网开发。相关教程可以参考NodeMCU官方网站（http://nodemcu.com/index_cn.html）。

通过浏览器访问串口，需要先安装相关的驱动或插件，并通过Web API进行串口的读写操作。目前，主要有两种方式：

第一种是使用WebUSB API，它提供了一种标准的接口，能够让网页应用程序通过USB端口访问本地的串口设备。相对于传统的串口通信，WebUSB具有更好的兼容性和可移植性，而且不需要安装额外的驱动程序。但是，它目前只支持Chrome浏览器。

第二种是使用Node.js和Chrome扩展程序的方式，这种方式需要使用Node.js编写串口通信的服务器程序，并通过Chrome扩展程序与浏览器进行交互。它需要一定的编程技能，但是可以跨平台使用，而且支持多种浏览器。

3. WebUSB API的使用

WebUSB API目前还处于实验阶段，需要在Chrome浏览器中开启实验性功能才能使用。以下是使用WebUSB API访问串口的基本步骤：

在NodeMCU上加载WebUSB的固件程序

WebUSB是一项新的Web API，并不是所有的硬件厂商都已经支持。NodeMCU官方提供了一个开源的WebUSB固件程序，可以让NodeMCU支持WebUSB功能。可以在GitHub上查看源码并下载二进制程序：https://github.com/nodemcu/nodemcu-firmware/tree/master/app/webusb。

在网页中请求WebUSB权限

在网页中直接使用navigator.usb.requestDevice方法请求用户授权，获取连接的USB设备。如果用户授权通过，则可以通过navigator.usb.device.api进行USB通信操作。以下是一个请求NodeMCU设备的示例代码：

const filters = [{
  vendorId: 0x10C4, // NodeMCU官方的Vendor ID，不同的硬件厂商有不同的Vendor ID
  productId: 0xEA60, // NodeMCU的Product ID
}];
navigator.usb.requestDevice({filters})
.then(device => {
  // 连接设备成功
  console.log(device);
  // 按照惯例，需要打开设备端口并设置参数，如波特率、数据位、停止位等。
  // 然后，可以准备发送和接收数据了。
})
.catch(e => {
  // 连接设备失败
  console.log(e);
});

进行串口通信操作

根据串口通信协议，可以通过USB传输数据，并在浏览器中显示。以下是一个简单的示例代码，每隔1秒向NodeMCU发送“Hello, World!”字符串，并将返回的数据显示在控制台上：

function connect() {
  const filters = [{
    vendorId: 0x10C4,
    productId: 0xEA60,
  }];
  navigator.usb.requestDevice({filters})
  .then(device => {
    console.log(device);
    const vendorId = device.vendorId;
    const productId = device.productId;
    return device.open()
    .then(() => device.selectConfiguration(1))
    .then(() => device.claimInterface(2))
    .then(() => {
      console.log(`Connected to ${vendorId}:${productId}`);
      // 每隔1秒发送数据
      setInterval(() => {
        const data = 'Hello, World!';
        console.log(`Sending ${data}`);
        device.transferOut(3, str2ab(data))
        .then(() => device.transferIn(4, 64))
        .then(result => {
          console.log(`Received ${ab2str(result.data)}`);
        });
      }, 1000);
    });
  })
  .catch(e => {
    console.log(e);
  });
}
function str2ab(str) {
  const buf = new ArrayBuffer(str.length);
  const bufView = new Uint8Array(buf);
  for (let i=0, strLen=str.length; i
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}
function ab2str(buf) {
  return String.fromCharCode.apply(null, new Uint8Array(buf));
}
connect();

4. Node.js和Chrome扩展程序的使用

使用Node.js和Chrome扩展程序的方式相对比较复杂，需要以下几个步骤：

使用Node.js编写串口通信服务器程序

可以使用Node.js的serialport库或其他类似的库，编写一个串口通信的服务器程序。这个程序需要监听一个TCP/IP端口，并且支持多个客户端同时连接。以下是一个使用serialport库实现的简单示例代码：

const net = require('net');
const SerialPort = require('serialport');
const port = new SerialPort('COM1', {
  baudRate: 9600,
  dataBits: 8,
  stopBits: 1,
  parity: 'none'
});
port.on('data', data => {
  console.log(`Received ${data}`);
});
const server = net.createServer(socket => {
  console.log(`New connection from ${socket.remoteAddress}:${socket.remotePort}`);
  socket.on('data', data => {
    console.log(`Sending ${data}`);
    port.write(data);
  });
  socket.on('close', () => {
    console.log(`Connection closed by ${socket.remoteAddress}:${socket.remotePort}`);
  });
});
server.listen(9000, () => {
  console.log('Server started.');
});

编写Chrome扩展程序

可以使用Chrome API编写一个扩展程序，在浏览器中显示串口设备的列表，并且支持选择设备、设置参数、发送和接收数据等操作。以下是一个简单的Chrome扩展程序示例：

function onDeviceSelected(device) {
  const connectionId = null;
  const bitrate = 9600; // 波特率
  chrome.serial.connect(device.path, {bitrate}, function(connectionInfo) {
    console.log(connectionInfo);
    connectionId = connectionInfo.connectionId;
  });
  chrome.serial.onReceive.addListener(function(info) {
    console.log(`Received ${info.data}`);
  });
  chrome.serial.onReceiveError.addListener(function(info) {
    console.log(`Error ${info.error}`);
  });
  setInterval(function() {
    const data = 'Hello, World!';
    console.log(`Sending ${data}`);
    chrome.serial.send(connectionId, str2ab(data), function() {});
  }, 1000);
}
function str2ab(str) {
  const buf = new ArrayBuffer(str.length);
  const bufView = new Uint8Array(buf);
  for (let i=0, strLen=str.length; i
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}
chrome.serial.getDevices(function(devices) {
  devices.forEach(function(device) {
    console.log(device);
    onDeviceSelected(device);
  });
});

加载扩展程序

在Chrome浏览器中加载扩展程序，需要开启“开发者模式”，并选择“加载已解压的扩展程序”，选择扩展程序的目录即可。

5. 总结

通过浏览器访问串口，可以方便地进行远程调试、控制和监测等操作。不同的应用场景和硬件环境需要选择不同的实现方式。在使用时需要注意安全性和稳定性，以保证系统的可靠性和稳定性。

文章TAG：浏览  浏览器  访问  串口  浏览器访问串口