8

我想使用 Johnny-Five 并使用 React JS 创建一个界面。

我使用了这个React 设置教程。我在同一个项目中安装了 Johnny-Five：http: //johnny-five.io/（Johnny-Five 在独立应用程序中单独运行非常好。这让我可以控制我的 Arduino）。

我的反应 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 一起工作？

4

1 回答 1

14

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

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

选项1：

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

选项 2：

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

于 2017-10-31T07:42:26.997 回答