将 Johnny-Five 与 React 结合使用

Question

我想使用 Johnny-Five 并使用 React JS 创建一个接口。

我用过这个 React setup tutorial. I installed Johnny-Five in the same project: http://johnny-five.io/（约翰尼五号在独立应用程序中单独运行时效果很好。这让我可以控制我的 Arduino）。

我的 React index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MainRouter from './routes';
import registerServiceWorker from './registerServiceWorker';
import five from 'johnny-five';

var board = new five.Board({
  port: "/dev/ttyACM0" 
});

board.on("ready", function() {
  var led = new five.Led(13);
  led.blink(500);
});

ReactDOM.render( <MainRouter />, document.getElementById('root'))
registerServiceWorker();

当我运行反应时，网站启动但看板没有反应！虽然没有 React 的相同代码工作得很好。有没有让 Johnny-Five 与 React 一起工作的想法？

Answer 1

问题是，Johnny Five (J5) 无法从浏览器中原生运行。 J5 需要访问浏览器（出于安全原因）不允许的计算机上的端口。我的理论是当你说你 "run without React" 时，你是通过 NodeJS 控制台运行ning（而不只是删除代码的 React 部分并在浏览器中重新运行ning）。 NodeJS 应用程序运行在与浏览器脚本不同的上下文中。

那么你是如何实现你的目标的呢？你有几个我能想到的选项。

选项 1：

首先，编写一个 NodeJS 桌面应用程序。桌面应用程序为您提供了您需要的运行时间上下文（访问端口），同时为您提供了您希望通过 Web 应用程序获得的图形用户界面 (GUI)。您可以使用 Node Webkit, AppJS 或其他几个（仅 google NodeJS 桌面应用程序）来完成此操作。这些桌面应用程序的伟大之处在于 GUI 是用 HTML 和 CSS 编写的。所以它就像一个网页，只是浏览器中没有运行（或者不是您期望的浏览器）。

选项 2：

也许您真的想要一个 Web 应用程序（也许您想要一个其他人可以访问和控制您的 Johnny Five 机器人的网页）。在这种情况下，您将需要编写两个系统。第一个是 Web 客户端（您已经在使用 React 代码处理它）。 Web 客户端将没有任何 Johnny Five 代码。您需要编写的第二个系统是 Web 服务器。服务器将处理所有 Johnny Five 代码。您的客户端将有一个界面（按钮、文本输入等）。当用户单击按钮时，您向服务器发送请求。服务器通过调用正确的约翰尼五号代码来处理这个请求。这是一个极其简化的 example.

将 Johnny-Five 与 React 结合使用

Use Johnny-Five with React

arduino

node.js

reactjs

johnny-five