Flot不能使用node.js
我有一个node.js服务器脚本，它使用Web套接字从串口读取数据，并在浏览器上显示数据。 服务器脚本是绝对正确的，因为它在浏览器上正确显示实时数据。 这也意味着websockets也正常工作。 当我尝试使用Flot来显示实时图表来显示数据时，真正的问题就开始了。 服务器抛出错误消息 – debugging – 服务静态内容/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。
在Chromedebugging器中，我可以看到以下消息：
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
任何帮助将非常高度赞赏。
干杯！ 一个
我只想发表评论，但我没有足够的代表。 也许这会帮助，我不知道。
修改
<script src="//localhost:8000/socket.io/socket.io.js"></script>
至：
<script src="http://localhost:8000/socket.io/socket.io.js"></script>
摆脱了我的debugging…也移动
var socket = io.connect('http://localhost:8000');
正确的下function似乎让控制台吐出一些更多的debugging声明..
<script type="text/javascript"> $(function () { var socket = io.connect('http://localhost:8000'); // Initialize Flot data points var totalPoints = 300;