Node.js и Johnny-Five "документ не определен" ошибка

Question

Я использую Node.js и Johnny-Five с микроконтроллером Arduino Uno. Моя цель состоит в том, чтобы при нажатии кнопки, подключенной к Arduino, на веб-странице отображалось количество нажатий в виде полосы.

В консоли я получаю сообщение об ошибке, когда нажимаю кнопку "документ не определен" и ссылается на мою переменную, которая должна изменить стиль CSS:

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

Не уверен, почему это дает ошибку. Какие-нибудь мысли? Ниже мой javascript:

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");

    });

    });

Answer 1

Это происходит потому, что на стороне сервера нет DOM, вам нужно отправить это значение и управлять 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 и экспресс-модули.