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

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 开发中，您必须记住代码的运行位置:您控制的计算机上的服务器，或者从服务器发送到 Web 浏览器的 *.js 文件中的客户端.

如果你想显示这些信息，你必须在 Node.js 中编写一个服务器来访问你的串行数据，并在 React 中编写一个客户端(参见 create-react-app )从你的服务器获取数据并显示它.