Johnny-Five를 React와 함께 사용하십시오.

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 데스크톱 응용 프로그램을 작성합니다. 데스크탑 응용 프로그램은 필요한 런타임 환경 (포트에 대한 액세스)을 제공하는 동시에 웹 응용 프로그램에서 원하는 GUI (그래픽 사용자 인터페이스)를 제공합니다. 당신은 Node Webkit, AppJS, 또는 몇 가지 다른 (그냥 구글 NodeJS 데스크톱 응용 프로그램)이 할 수 있습니다. 이 데스크탑 애플리케이션의 가장 큰 장점은 HTML과 CSS로 작성된 GUI입니다. 따라서 웹 페이지와 같을뿐입니다. 브라우저에서 실행되지 않습니다. 브라우저에서 실행되지 않습니다.

옵션 2 :

이 아마도 당신이 정말로 웹 응용 프로그램을 원하십니까은 (어쩌면 당신은 웹 페이지의 다른 사람들이 액세스하고 조니 다섯 로봇을 제어 할 수 있습니다합니다). 이 경우 두 시스템을 작성해야합니다. 첫 번째는 웹 클라이언트입니다 (이미 React 코드로 작업하고있었습니다). 웹 클라이언트에는 Johnny Five 코드가 없습니다. 작성해야 할 두 번째 시스템은 웹 서버입니다. 서버가 모든 Johnny Five 코드를 처리합니다. 클라이언트는 인터페이스 (단추, 텍스트 입력 등)를 갖습니다. 사용자가 버튼을 클릭하면 서버에 요청을 보냅니다. 서버는 적절한 Johnny Five 코드를 호출하여이 요청을 처리합니다. 다음은 매우 단순화 된 example입니다.