React.JS中读写RFID标签的实现方法及可用工具包咨询

核心实现路径 #

Web端无法直接操作RFID硬件，主要有两种可行路径：

• 浏览器原生API直连：利用现代浏览器支持的Web Serial API或Web USB API，直接连接支持串口/USB的RFID阅读器，无需后端中转。
• 后端中转方案：通过Node.js/Python等后端语言对接RFID硬件，前端React通过WebSocket（实时场景）或HTTP接口与后端通信获取标签数据。

可用工具包 #

• Web端直连类
  • @serialport/webserial：对Web Serial API的封装，简化React中串口设备的连接与数据读写操作
  • webusb-rfid：轻量库，专门针对USB连接的RFID阅读器做了适配，处理标签读取的解析逻辑
• 后端对接类
  • serialport（Node.js）：成熟的串口通信库，支持绝大多数串口型RFID阅读器，后端用它获取数据后，前端通过WebSocket推送或接口拉取

示例代码（Web Serial API 直连方案） #

import { useState } from 'react';
import { WebSerialPort } from '@serialport/webserial';

const RFIDReaderComponent = () => {
  const [tagId, setTagId] = useState('');
  const [connectedPort, setConnectedPort] = useState(null);

  const connectReader = async () => {
    try {
      const port = await navigator.serial.requestPort();
      await port.open({ baudRate: 9600 }); // 波特率需匹配你的阅读器参数
      const serialPort = new WebSerialPort({ port });
      setConnectedPort(serialPort);

      // 监听阅读器数据
      serialPort.on('data', (rawData) => {
        const parsedId = rawData.toString().replace(/\r|\n/g, '');
        if (parsedId) setTagId(parsedId);
      });
    } catch (error) {
      console.error('阅读器连接失败:', error);
    }
  };

  const disconnectReader = async () => {
    if (connectedPort) {
      await connectedPort.close();
      setConnectedPort(null);
      setTagId('');
    }
  };

  return (
    <div className="rfid-reader">
      <button onClick={connectReader} disabled={connectedPort}>
        连接RFID阅读器
      </button>
      <button onClick={disconnectReader} disabled={!connectedPort}>
        断开连接
      </button>
      {tagId && <p>当前读取标签ID: <strong>{tagId}</strong></p>}
    </div>
  );
};

export default RFIDReaderComponent;

关键注意事项 #

• Web Serial/USB API仅支持HTTPS环境（localhost开发不受限制），正式部署必须使用HTTPS
• 不同品牌的RFID阅读器通信协议（如数据格式、波特率）差异较大，需参考对应硬件的官方文档调整解析逻辑
• 如果需要支持更多设备或跨场景兼容，后端中转方案的通用性更强，适合企业级应用

内容的提问来源于stack exchange，提问作者Maher Nahla