使用 node.js 和 javascript 更新 HTML 对象答案

【问题标题】：Update HTML object with node.js and javascript使用 node.js 和 javascript 更新 HTML 对象
【发布时间】：2016-04-27 07:30:55
【问题描述】：

我是 nodejs 和 jquery 的新手，我正在尝试使用脚本更新一个 html 对象。我正在使用 Raspberry pi 2 和超声波传感器来测量距离。我想测量连续性，并用实时值同时更新 html 文档。

当我尝试运行我的代码时，它的行为类似于服务器而不是客户端。我 console.log() 打印的所有内容都在 cmd 中，而不是在浏览器的控制台中。当我现在运行我的代码时，我使用“sudo nodesurveyor.js”执行此操作，但 html 文档中没有任何反应。我已将其正确链接到脚本。我也尝试过 document.getElementsByTagName("h6").innerHTML = distance.toFixed(2)，但错误是“document is not defiend”。

有什么简单的方法可以解决这个问题吗？

到目前为止我的代码是：

var statistics = require('math-statistics');
var usonic = require('r-pi-usonic');
var fs = require("fs");
var path = require("path");
var jsdom = require("jsdom");

var htmlSource = fs.readFileSync("../index.html", "utf8");



var init = function(config) {
    usonic.init(function (error) {
        if (error) {
        console.log('error');
        } else {
            var sensor = usonic.createSensor(config.echoPin, config.triggerPin, config.timeout);
            //console.log(config);
            var distances;

            (function measure() {
                if (!distances || distances.length === config.rate) {
                    if (distances) {
                        print(distances);
                    }

                    distances = [];
                }

                setTimeout(function() {
                    distances.push(sensor());

                    measure();
                }, config.delay);
            }());
        }
    });
}; 

var print = function(distances) {
    var distance = statistics.median(distances);

    process.stdout.clearLine();
    process.stdout.cursorTo(0);

    if (distance < 0) {
        process.stdout.write('Error: Measurement timeout.\n');
    } else {
        process.stdout.write('Distance: ' + distance.toFixed(2) + ' cm');

        call_jsdom(htmlSource, function (window) {
            var $ = window.$;
            $("h6").replaceWith(distance.toFixed(2));
            console.log(documentToSource(window.document));
});

    }
};


function documentToSource(doc) {
    // The non-standard window.document.outerHTML also exists,
    // but currently does not preserve source code structure as well

    // The following two operations are non-standard
    return doc.doctype.toString()+doc.innerHTML;
}

function call_jsdom(source, callback) {
    jsdom.env(
        source,
        [ 'jquery-1.7.1.min.js' ],
        function(errors, window) {
            process.nextTick(
                function () {
                    if (errors) {
                        throw new Error("There were errors: "+errors);
                    }
                    callback(window);
                }
            );
        }
    );
}

init({
    echoPin: 15, //Echo pin
    triggerPin: 14, //Trigger pin
    timeout: 1000, //Measurement timeout in µs
    delay: 60, //Measurement delay in ms
    rate: 5 //Measurements per sample
});

【问题讨论】：

我真的不明白你为什么使用 node.js...
我建议将您的程序分成逻辑部分，然后询问您需要帮助的具体部分的问题。你一定会得到更好的答案！

标签： javascript jquery html node.js jsdom

【解决方案1】：

Node.js 是 JavaScript 的服务器端实现。在服务器端进行所有传感器操作和计算是可以的，但是您需要一些机制来将结果提供给您的客户端。如果他们要通过 Web 浏览器使用您的应用程序，您必须运行 HTTP 服务器，例如 Express.js，并创建一个路由（例如 http://localhost/surveyor 或只是 http://localhost/）调用您已实现的方法服务器端并对结果做一些事情。将此结果数据返回给客户端的一种可能方法是呈现显示它们的 HTML 页面。为此，您应该使用Template Engine。

任何 DOM 操作都应在客户端完成（例如，您可以在模板 HTML 中包含 <script> 标记，以尝试了解其工作原理，但不推荐 在生产环境中执行此操作）。

尝试在 Google 上搜索 Node.js 示例和教程，您会得到它：)

【讨论】：