gpt4 book ai didi

javascript - 定期轮询 Node.js 服务

转载 作者:行者123 更新时间:2023-12-03 08:45:13 27 4
gpt4 key购买 nike

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

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8686/temperature. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

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();
});

最佳答案

根据您在评论中回复我的问题(@tiblu也指出了这一点),尝试从服务器提供您的html文件并通过访问来访问它 http://localhost:8686/index.html (或者无论你怎么调用它)。

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

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

关于javascript - 定期轮询 Node.js 服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32924428/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com