使用Johnny-Five和React

Question

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

我使用了这个React安装教程.我在同一个项目中安装了Johnny-Five:http://johnny-five.io/(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-Five与React合作的想法？

Answer 1

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

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

选项1:

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

选项2:

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