Question

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

我使用了这个React setup tutorial。我在同一个项目中安装了Johnny-Five：http://johnny-five.io/（Johnny-Five在独立应用程序中非常好用。这使我能够控制我的Arduino）。

My 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-Five与React合作？

Answer 1

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

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

选项1：

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

选项2：

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

使用Johnny-Five和React

1 个答案: