ReactでJohnny-Fiveを使用する

Question

Johnny-Fiveを使用してReact JSとのインターフェイスを作成したいと思います。

私はこれをReact setup tutorialと使いました。私は同じプロジェクトに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のない同じコードは完璧に機能しますが。 Johnny-FiveにReactを使用させるための考えはありますか？

Answer 1

問題は、Johnny Five（J5）をブラウザからネイティブに実行できないことです。 J5は、（セキュリティ上の理由から）ブラウザが許可しないコンピュータ上のポートにアクセスする必要があります。私の理論は、あなたが「React without run」と言うとき、あなたはNodeJSコンソールを介して実行しています（コードのReact部分を削除してブラウザで再実行するだけではありません）。 NodeJSアプリケーションは、ブラウザ・スクリプトとは異なるコンテキストで実行されます。

どのように目標を達成していますか？あなたは私が考えることができるいくつかのオプションがあります。

オプション1：

まず、NodeJSデスクトップアプリケーションを作成。デスクトップアプリケーションは、必要なランタイムコンテキスト（ポートへのアクセス）を提供し、Webアプリケーションで期待していたグラフィカルユーザーインターフェイス（GUI）を提供します。 Node Webkit、AppJS、または他のいくつかの方法（Google NodeJSデスクトップアプリケーションのみ）でこれを行うことができます。これらのデスクトップアプリケーションの素晴らしい点は、GUIがHTMLとCSSで書かれていることです。だから、それはちょうどウェブページのようなもので、ブラウザでは実行されません。

オプション2：

おそらく、あなたが本当に（多分あなたはWebページの他の人があなたのジョニー・ファイブボットにアクセスし、制御することができますしたい）Webアプリケーションをしたいです。この場合、2つのシステムを作成する必要があります。最初のものはWebクライアント（あなたはすでにあなたのReactコードで作業していたものです）です。 WebクライアントにはJohnny Fiveのコードはありません。 2番目のシステムはWebサーバーです。サーバーはすべてのJohnny Fiveコードを処理します。クライアントにはインターフェース（ボタン、テキスト入力など）があります。ユーザーがボタンをクリックすると、サーバーに要求が送信されます。サーバーは、この要求を適切なJohnny Fiveコードを呼び出すことによって処理します。非常に簡略化されたexampleがここにあります。