node.js - 将Johnny-Five与React一起使用

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

我使用了这个React setup tutorial。我在同一个项目http://johnny-five.io/中安装了Johnny-Five(Johnny-Five在独立应用程序中单独运行非常好。这使我可以控制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时，该站点启动了，但开发板没有反应!尽管没有React的相同代码也能很好地工作。有什么想法让Johnny-5与React一起工作吗？

最佳答案

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

那么，您如何实现自己的目标呢？您可以想到几个选择。

选项1:

首先，编写一个NodeJS Desktop应用程序。桌面应用程序为您提供了所需的运行时上下文(访问端口)，同时为您提供了Web应用程序所希望的图形用户界面(GUI)。您可以使用Node Webkit，AppJS或其他一些方法(仅适用于google NodeJS桌面应用程序)来执行此操作。这些桌面应用程序的优点在于GUI是用HTML和CSS编写的。因此，它就像一个网页，只是不在浏览器中运行(或者不在您期望的浏览器中运行)。

选项2:

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