Question

首先 - 我不是编码员，我是第一次在这里发帖。我尝试了几天不同的方法，无法让它发挥作用。

显示从串口到网页的温度显示有问题。

这是我的 app.js 代码：

var http = require('http');
var express = require('express');
var app = express();
var SerialPort = require("serialport");
var server = http.createServer(app).listen(8080);
var io = require('socket.io').listen(server);

app.use(express.static(__dirname + '/public'));

var serialport = new SerialPort("/dev/cu.wchusbserialfd1210", {
    baudrate: 9600,
    parser: SerialPort.parsers.readline("\r\n")
});
serialport.on('open', function(){
    // Now server is connected to Arduino
    console.log('Serial Port Opened');

    var lastValue;
    io.sockets.on('connection', function (socket) {
        //Connecting to client 
        console.log('Socket connected');
        socket.emit('connected');
        var lastValue;

        serialport.on('data', function(data){
            console.log(`Serial got: ${data}`);
            var temperature1 = data.trim();
            if(lastValue !== temperature1){
                socket.emit('data', temperature1);
            }
            lastValue = temperature1;
        });
    });
});

然后在 index.html 中我创建了这个函数：

function getTemperatureA() {
    var socket = io.connect('http://localhost:8080');
    var temperature1 = 0;
    socket.on('data', function (data) {
        tt1 = data;
    });
    return tt1;
}

在index.html文件中我使用此代码：

document.getElementById('tt1').innerHTML = "Temperature: " + getTemperatureA();

我明白了：

温度：[对象HTMLDivElement]

如果我使用我的功能：

function getTemperatureA(id) {
    var socket = io.connect('http://localhost:8080');
    var temperature1 = 0;
    var box = document.getElementById(id);
    socket.on('data', function (data) {
        box.innerHTML = data;
    });
}

然后在index.html中：

<div id="tt1"></div>
getTemperatureA('tt1');

然后它正在工作并显示温度为24.2（例如）。

所以主要的问题是如何只返回一个值？我需要在另一个函数中使用此值来使用函数值绘制温度计吗？

Answer 1

你在getTemperatureA()中混合了责任。您需要将它们分开并适当地使用它们。打破它;首先，有一个连接到websocket的数据事件处理程序和注册数据事件处理程序的工作。然后就是对输入数据做一些事情的工作（存储它以供进一步使用）。最后需要引用这些数据。

连接和注册事件处理程序只需要关闭一次，因此您只需创建一个函数：

var tt1;
function connectToHost() {
    // concern 1: connect and register callback
    var socket = io.connect('http://localhost:8080');
    socket.on('data', function (data) {
        // concern 2: save the data
        tt1 = data;
    });
}

然后在适当的时间调用它，例如document.ready。然后，在您需要当前温度的代码中，您可以直接引用tt1，或者如果由于某种原因它确实需要是一个返回值的函数，您可以使用如下函数：

function getTemperatureA() {
    return tt1;
}

Answer 2

我通过删除getTemperatureA（）函数来管理它。问题是在收到来自串口的数据之前加载了Gauge。所以socket.on必须在JustGage之后调用。

以下是我的 index.html 文件：

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Temperature</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    @font-face {
        font-family: 'OpenSans';
        src: url('fonts/OpenSans-Regular.ttf') format('truetype');
    }

    body {
        font-family: 'OpenSans';
        background-color: black;
        text-align: center;
        color: grey;
    }

    #t1 {
        width:120px; height:100px;
        display: inline-block;
        margin: 0.5px;
    }

    </style>
    <script src="/js/socket.io.min.js"></script>
    <script src="/js/raphael-2.1.4.min.js"></script>
    <script src="/js/justgage.js"></script>

</head>
<body>
    <div id="t1"></div>
    <script>
         document.addEventListener("DOMContentLoaded", function(event) {
            var tt1;
            var socket = io.connect('http://localhost:8080');

            var t1 = new JustGage({
                title: "",
                label: "Temperature",
                id: "t1",
                value: tt1,
                min: -50,
                decimals: true,
                decimals: 1,
                max: 50,
                symbol: '\xB0C',
                gaugeWidthScale: 0.5,
                customSectors: [{
                    color: "#0000ff",
                    lo: -50.0,
                    hi: -20.0
                }, {
                    color: "#33ceff",
                    lo: -19.9,
                    hi: -10.0
                }, {
                    color: "#33ffff",
                    lo: -9.9,
                    hi: 0
                }, {
                    color: "#33ffda",
                    lo: 0.1,
                    hi: 17.9
                }, {
                    color: "#00ff00",
                    lo: 18.0,
                    hi: 22.9
                }, {
                    color: "#ffff00",
                    lo: 23.0,
                    hi: 25.9
                }, {
                    color: "#ffa500",
                    lo: 26.0,
                    hi: 29.9
                }, {
                    color: "#ff0000",
                    lo: 30.0,
                    hi: 50.0
                }],
                counter: true,
                pointer: true,
                titleFontColor: "grey",
                titleFontFamily: "OpenSans",
                valueFontColor: "grey",
                valueFontFamily: "OpenSans",
                formatNumber: false
            });

            socket.on('data', function (data) {
                //tt1 = parseFloat(data);   
                t1.refresh(tt1);
            });
         });

    </script>
</body>

</html>

无论如何，感谢您的支持！

Node.js + JavaScript：返回值，而不是[object HTMLDivElement]

2 个答案: