Node.js와 Johnny-Five "문서가 정의되지 않았습니다"오류

Arduino Uno 마이크로 컨트롤러와 함께 Node.js와 Johnny-Five를 사용하고 있습니다. 내 목표는 Arduino에 연결된 버튼을 누르면 웹 페이지에 바 형태로 눌린 횟수가 표시됩니다.Node.js와 Johnny-Five "문서가 정의되지 않았습니다"오류

var bar1 = document.getElementById('bar1');

하지 않는 것이은을주고있다 확실한 이유 : 나는 "문서가 정의되어 있지 않습니다"라고하고, CSS 스타일을 변경하도록되어 내 변수를 참조하는 버튼을 누를 때 콘솔에서

오류가 발생합니다 오류. 이견있는 사람? 서버 측에서 DOM이 없기 때문에 그것은 무슨 일이 일어나고

var five = require("johnny-five"), 
    bumper, led, counter, toggleState; 
    toggleState = false; 

five.Board().on("ready", function() { 

    bumper = new five.Button(7); 
    led = new five.Led(13); 
    counter = 200; 

    bumper.on("hit", function() { 

    led.on(); 
    console.log("Button has been pressed"); 
      counter += 10; //add 10 everytime the button is pressed 

      console.log(counter); 
      toggleState = true; 
      console.log("on"); 

    //function increaseBarSize() { 
    if(toggleState == true) { 
     var bar1 = document.getElementById('bar1'); 
     bar1.style.width = counter; 
     console.log(bar1); 
    } 

    }).on("release", function() { 
     led.off(); 
     console.log("off"); 

    }); 

    });

출처

2014-11-21 deevolution

nodejs 파일에서 DOM 코드를 실행하려고합니까? DOM 코드는 nodejs 프로그램이 아닌 웹 페이지 (브라우저)의 스크립트 태그에서 실행해야합니다. 아마도 프론트 엔드 코드와 백엔드 코드의 구분을 실제로 이해하지 못하는 것 같습니다. – jfriend00

저는 일반적으로 자바 스크립트와 코딩에 비교적 익숙합니다. 몇 달 전에 시작 했으므로 학습 과정의 모든 부분을 다루었습니다. Arduino 센서 입력을 기반으로 DOM을 조작하는 것이 불가능한 작업입니까? 이 기능을 사용하려면 Socket.io를 사용하라는 또 다른 권장 사항을 받았습니다. 이것은 가능한가? – deevolution

가장 먼저 이해해야 할 점은 웹 페이지에는 브라우저에서 실행되는 HTML과 자바 스크립트와 서버에서 실행되는 백엔드 조각 (프론트 엔드 부분이 nodejs라고 가정되어 실행 중일 수 있음)이 있다는 것입니다. 귀하의 Arduino 장치에). 이것들은 별도의 장소에서 실행되는 두 개의 완전히 다른 코드 조각입니다. 서버는 브라우저에 전달 된 웹 페이지를 작성한 다음 브라우저에서 웹 페이지를 실행합니다. DOM은 브라우저에만 있습니다. nodej 또는 Arduino에서 DOM을 조작하지 마십시오. 웹 페이지 내의 자바 스크립트에서만 DOM을 조작 할 수 있습니다. – jfriend00

, 클라이언트 측의 DOM을이 값을 전송하고 관리 할 필요가 : 아래 내 자바 스크립트입니다.

이 시도 :

서버 측

var express = require('express'); 
var app = express(); 
var http = require('http').Server(app); 
var io = require('socket.io').listen(http); 
var five = require("johnny-five"), 
bumper, led, counter, toggleState; 
toggleState = false; 
five.Board().on("ready", function() { 

    bumper = new five.Button(7); 
    led = new five.Led(13); 
    counter = 200; 

    bumper.on("hit", function() { 

     led.on(); 
     console.log("Button has been pressed"); 
     counter += 10; //add 10 everytime the button is pressed 

     console.log(counter); 
     toggleState = true; 
     console.log("on"); 

     //function increaseBarSize() { 
     if(toggleState == true) { 
      io.on('connection', function(socket){ 
       socket.emit('counter', counter); 
      }); 
     } 

    }).on("release", function() { 
     led.off(); 
     console.log("off"); 

    }); 
}); 
app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/<client page>.html'); //change <client page> to the client document 
}); 
http.listen(3000, function(){ 
    console.log('listening on *:3000'); 
});

클라이언트 측

<script src="/socket.io/socket.io.js"></script> 
<script> 
var socket = io('http://localhost:3000'); 
var bar1 = document.getElementById('bar1'); 
socket.on('counter', function(counter){ 
    bar1.style.width = counter; 
}); 
<script>

: 이미 Socket.io 및 Express 모듈을 설치했다고 가정합니다.

출처

2015-06-27 14:22:55

Node.js와 Johnny-Five "문서가 정의되지 않았습니다"오류

답변

관련 문제