Question

在我目前的项目中，我正在尝试访问传感器数据并将其绘制到Web浏览器中。以下代码（在node.js中）随机生成温度值，其他代码定期轮询到服务并将其绘制到Web浏览器。我的问题是，当我运行此代码时...我的浏览器没有绘制任何内容，我在控制台中收到以下消息。你能告诉我这段代码有什么问题吗？

未声明HTML文档的字符编码。该   在某些浏览器配置中，文档将使用乱码文本呈现   如果文档包含US-ASCII范围之外的字符。   必须在文档中声明页面的字符编码   在转移协议中。

阻止跨源请求：同源策略禁止读取   http://localhost:8686/temperature处的远程资源。（原因：   CORS标题＆＃39; Access-Control-Allow-Origin＆＃39;丢失）。

var http = require("http");
var port = 8686;

function randomInt (low, high) {
  return Math.floor(Math.random() * (high - low) + low);
}

http.createServer(function(req,res){
  console.log('New incoming client request for ' + req.url);
  res.writeHeader(200, {'Content-Type': 'application/json'}); 
  switch(req.url) {

    case '/temperature':
      // And return the corresponding JSON
      res.write('{"value" :' + randomInt(1, 40) + '}');
      break;        
  }
  res.end(); 
}).listen(8686);
console.log('Server listening on http://localhost:' + port);

以下是使用URL定期轮询node.js代码的客户端代码：＆＃39; http://localhost:8686/temperature＆＃39;。我正在使用Google可视化库随机绘制温度。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript"
            src="https://www.google.com/jsapi?autoload={
    'modules':[{
      'name':'visualization',
      'version':'1',
      'packages':['corechart']
    }]
  }">
</script>
</head>

<body>
<div id="chart" style="width: 900px; height: 500px"></div>
<script type="text/javascript">
    $(document).ready(function () {
        var maxDataPoints = 10;
        var chart = new google.visualization.LineChart($('#chart')[0]); 
        var data = google.visualization.arrayToDataTable([ 
            ['Time', 'Temperature'],
            [getTime(), 0]
        ]); 

        var options = { 
            title: 'Temperature',
            curveType: 'function',
            animation: {
                duration: 1000,
                easing: 'in'
            },
            legend: {position: 'bottom'}
        };
        function addDataPoint(dataPoint) { 
            if (data.getNumberOfRows() > maxDataPoints) {
                data.removeRow(0);
            }
            data.addRow([getTime(), dataPoint.value]);
            chart.draw(data, options); 
        }

        function getTime() {
            var d = new Date();
            return d.toLocaleTimeString();
        }

        function doPoll() { 
            $.getJSON('http://localhost:8686/temperature',
                    function (result) {
                        console.log(result);
                        addDataPoint(result); 
                        setTimeout(doPoll, 2000);
                    });
        }

        doPoll();
    });

Answer 1

在评论中回答我的问题后（@tiblu也指出了），尝试从服务器提供你的html文件并通过访问来访问它 http://localhost:8686/index.html（或者你称之为的任何东西）。

如果您使用快递，可以使用express.static完成此操作。如果您决定坚持使用http模块，请查看如何提供静态文件。这是one example看起来很有用。

在本地加载html文件后 - 在资源管理器中单击dbl并将其打开为file：//path/to/your/directory/index.html - 它被认为是与localhost不同的来源：8686。通常，在开发节点满堆栈应用程序（也就是说有前端）时，通过本地服务器而不是文件系统打开文件是一种很好的做法。

定期轮询node.js服务

1 个答案: