我有一个 node.js 服务器脚本，它使用 Web 套接字从串行端口读取数据并在浏览器上显示数据。服务器脚本非常好，因为它可以在浏览器上正确显示实时数据。这也意味着 websocket 也可以正常工作。当我尝试使用 Flot 显示实时图表来可视化数据时，真正的问题就开始了。服务器抛出错误消息 - 调试 - 提供静态内容 /socket.io.js
这是我的服务器的代码：
// It captures data from serial port and displays it in web page.
var http = require('http').createServer(handler);
var io = require('socket.io').listen(http);
var sys = require('sys');
var fs = require('fs');
var clients = [];
http.listen(8000);
var SerialPort = require('serialport2').SerialPort;
var portName = 'COM10';
var sp = new SerialPort(); // instantiate the serial port.
sp.open(portName, { // portName is instatiated to be COM3, replace as necessary
baudRate: 9600, // this is synced to what was set for the Arduino Code
dataBits: 8, // this is the default for Arduino serial communication
parity: 'none', // this is the default for Arduino serial communication
stopBits: 1, // this is the default for Arduino serial communication
flowControl: false // this is the default for Arduino serial communication
});
function handler(request, response) {
response.writeHead(200, {
'Content-Type':'text/html'
});
var rs = fs.createReadStream(__dirname + '/template2.htm');
sys.pump(rs, response);
};
var buffer ; //contains raw data
var dataStore = "" ; // To hold the string
io.sockets.on('connection', function(socket) {
var username;
clients.push(socket);
socket.emit('welcome', {'salutation':'TMP36 Sensor output!'});
sp.on('data', function (data) { // call back when data is received
buffer = data.toString();
// check for end character in buffer
for(i=0; i<buffer.length; i++)
{
if(buffer[i] != "N")
{
//store it in data
dataStore = dataStore + buffer[i];
}
if(buffer[i] == "N")
{
//spit the data
//console.log(dataStore);
//socket.emit('data', {'salutation':dataStore});
socket.emit('data', dataStore);
// //initialize data to null
dataStore = "";
}
}
});
});
下面是尝试使用 Flot 显示实时图表的客户端代码
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Chat</title>
<link type="text/css" href="/css/smoothness/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script language="javascript" type="text/javascript" src="../3rdParty/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../3rdParty/flot/jquery.flot.js"></script>
<script src="//localhost:8000/socket.io/socket.io.js"></script>
<script type="text/javascript">
$(function () {
// Initialize Flot data points
var totalPoints = 300;
var res = [];
function getInitData() {
// zip the generated y values with the x values
for (var i = 0; i < totalPoints; ++i){
res.push([i, 0]);
}
return res;
}
// Options for Flot plot
var options = {
series: { shadowSize: 0 }, // drawing is faster without shadows
yaxis: { min: 0, max: 100 },
xaxis: { show: false }
};
var plot = $.plot($("#placeholder"), [ getInitData() ], options);
// Update the JQuery UI Progress Bar
$( "#progressbar" ).progressbar({
value: 0
});
//var socket = io.connect();
//var socket = io.connect('http://localhost:8000');
//var socket = io.connect(document.location.href);
var socket = io.connect('http://10.0.0.2:8000');
//This block is executed when data is received from server
socket.on('data', function(msg) {
// Put sensor value to the 'sensor_value' span
//var val = data.salutation;
var val = msg;
$('#sensor_value').html(val);
// Push new value to Flot Plot
res.push([totalPoints, val]); // push on the end side
res.shift(); // remove first value to maintain 300 points
// reinitialize the x axis data points to 0 to 299.
for (i=0;i<totalPoints;i++) { res[i][0] = i; }
// Redraw the plot
plot.setData([ res ]);
plot.draw();
// Update JQuery UI progress bar.
$( "#progressbar" ).progressbar({
value: val
});
});
});
</script>
</head>
<body>
<h1>Temperature Monitor</h1>
<div role="main">
Potentiometer Value: <span id="sensor_value"></span><br/>
<div id="progressbar" style="width:600px;height:50px;"></div><br/>
Graph:<br/>
<div id="placeholder" style="width:600px;height:300px;"></div><br/>
</body>
</html>
谁能帮我弄清楚为什么 flot 在我的设置中不起作用？我也在同一台机器上运行服务器和客户端，即 Windows 7。
在 chrome 调试器中，我可以看到以下消息：
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8000/3rdParty/flot/jquery.js". :8000/:6
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8000/3rdParty/flot/jquery.flot.js". :8000/:6
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8000/css/smoothness/jquery-ui-1.8.20.custom.css". localhost:5
Uncaught SyntaxError: Unexpected token < jquery.js:2
Uncaught SyntaxError: Unexpected token < jquery.flot.js:2
Uncaught TypeError: Object function (i,r){return new b.fn.init(i,r)} has no method 'plot' localhost:31
任何帮助将不胜感激。
干杯！一个