定期轮询 node.js 服务答案

【问题标题】：polling node.js service periodically定期轮询 node.js 服务
【发布时间】：2015-12-31 16:23:11
【问题描述】：

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

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

跨域请求被阻止：同源策略不允许读取 http://localhost:8686/temperature 的远程资源。（原因： CORS 标头“Access-Control-Allow-Origin”缺失）。

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 代码的客户端代码：'http://localhost:8686/temperature'。我正在使用 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();
    });

【问题讨论】：

谷歌关于“同源政策”和CORS
FE 代码没问题，通过在 FE 中生成随机数进行测试，在doPoll (codepen.io/anon/pen/ojZEQm) 中。因此，正如@slebetman 所说，这一定是数据访问问题。并且您应该看到“XMLHttpRequest 无法加载...。请求的资源上不存在 'Access-Control-Allow-Origin' 标头...”。确保您没有在控制台上应用任何可能隐藏错误的过滤器。关于 CORS 的最佳文章是 -developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。简而言之 - 如果 FE (html) 也从 localhost:8686 提供，它应该可以工作。
此外，请检查“网络”选项卡是否有错误，而不仅仅是控制台。
感谢 slebetman 和 tiblu 的回复！我对网络开发有点陌生。你能告诉我 - 我该如何解决这个问题？我正在使用 Mozilla firefox 进行测试。
我现在附上错误和问题供您参考。

标签： javascript node.js

【解决方案1】：

在您回复我在 cmets 中的问题后（@tiblu 也指出了这一点），尝试从服务器提供您的 html 文件并通过访问 http://localhost:8686/index.html（或者随便你怎么称呼它）。

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

在本地加载 html 文件后 - 在资源管理器中单击 dbl 并将其打开为 file://path/to/your/directory/index.html - 它被视为与 localhost:8686 不同的来源。一般来说，在开发节点全栈应用程序时，这是一个很好的做法，这意味着它也有一个前端，通过本地服务器而不是文件系统打开文件。

【讨论】：

感谢您的回答！我仍然很困惑。您的声明“尝试从服务器提供您的 html 文件并通过访问 localhost:8686/index.html（或您所称的任何名称）来访问它”是什么意思。
我按照此过程从服务器提供我的 html 文件，如链接 (github.com/skeelogy/ifc-ar-flood/wiki/…) 中所述。这是正确的吗？请随时纠正我。
程序没问题，但可能会产生同样的问题。问题是来自域 A（比如 localhost:8080）的页面试图从域 B（localhost:8686）访问服务器。只需在您的服务器路由中添加一个案例： case '/index.html': 代码以返回您的 html 文件内容。希望这足够清楚，如果没有，请不要犹豫再次询问
再次感谢！我对 node.js 有点陌生。我的 node.js 项目包含“路由”文件夹。它有两个文件：(1) index.js (2) user.js。我应该编辑 index.js 文件吗？/或其他。我附上了 index.js 文件的内容。请回复我应该添加的内容：exports.index = function(req, res){ res.render('index', { title: 'Express' }); };
这看起来不错。打开索引文件时浏览器的地址栏显示什么？