Question

我的目标

我有一个超声波传感器（HC-SR05），它可以测量到所观察物体的距离。它以9600的波特率将测量数据输出到串行监视器。然后，我有了一个React组件，该组件使用一个名为SerialPort的库来获取数据，并将该数据置于某种称为'data'的状态。我的目标是将这些数据显示在网页上。

我尝试过的事情

我已经在没有React的普通JS文件中尝试了代码，并且能够将数据从串行监视器输出到控制台。

代码

我的React组件如下所示：


import SerialPort from 'serialport';
import Readline from '@serialport/parser-readline';

const port = new SerialPort('/dev/cu.usbmodemFA141', { baudRate: 9600 });
const parser = port.pipe(new Readline({ delimiter: '\n' }));
port.on("open", () => {
  console.log('serial port open');
});

const App = () => {

  const [data, setData] = useState('');

  parser.on('data', serialData => {
    setData(serialData)
  });

  return (
    <div className="App">
      <p>Distance: {data}</p>
    </div>
  );
}

预期结果和实际结果

预期结果是该组件从串行监视器中获取数据，使其处于状态，然后将其显示在网页上。当数据更新时，我使用状态重新渲染了网页。

实际结果是，当我将数据输出到网页时，它给了我这个错误消息：

TypeError: Error.captureStackTrace is not a function
getFileName
node_modules/bindings/bindings.js:135

  132 | }; // run the 'prepareStackTrace' function above
  133 | 
  134 | 
> 135 | Error.captureStackTrace(dummy);
      | ^  136 | dummy.stack; // cleanup
  137 | 
  138 | Error.prepareStackTrace = origPST;

bindings
node_modules/bindings/bindings.js:59

  56 | }); // Get the module root
  57 | 
  58 | if (!opts.module_root) {
> 59 |   opts.module_root = exports.getRoot(exports.getFileName());
     | ^  60 | } // Ensure the given bindings name ends with .node
  61 | 
  62 | 

./node_modules/@serialport/bindings/lib/linux.js
node_modules/@serialport/bindings/lib/linux.js:1

> 1 | const binding = require('bindings')('bindings.node');
  2 | 
  3 | const AbstractBinding = require('@serialport/binding-abstract');
  4 | 

...

我的问题

为什么它在React之外运行时会给我这个奇怪的错误，我做错了什么？

注意：这是React的错误

Answer 1

服务器端代码和客户端代码之间有很大的区别。 React在客户端运行，但是serialport库是为服务器端技术Node.js编写的。在Web开发中，您必须记住代码的运行位置：在您控制的计算机上的服务器或在客户端中的*.js文件中的客户端从服务器发送到Web浏览器。

如果要显示此信息，则必须在Node.js中编写一个服务器来访问您的串行数据，并在React中编写一个客户端（请参见create-react-app）来从您的服务器和服务器上获取数据。显示它。

Arduino使用NodeJS读取串行监视器并在React网页中输出

1 个答案: