Flot不能使用node.js

我有一个node.js服务器脚本，它使用web套接字从串行端口读取数据，并在浏览器上显示数据。服务器脚本非常好，因为它可以在浏览器上正确显示实时数据。这也意味着websockets也正常工作。当我尝试使用Flot来显示实时图表以可视化数据时，真正的问题就开始了。服务器会抛出错误消息 - 调试 - 提供静态内容/socket.io.jsFlot不能使用node.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 = ""; 
     } 
    }   
    });  
});

下面是一个尝试的客户端代码使用海军报显示实时图表

<!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>

谁能帮助我，为什么海军报不工作在我的设置？还有我运行服务器和客户端相同的机器上它是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

任何帮助将非常高度赞赏。

干杯！ AN

来源

2013-01-06 Android Beginner

这些错误意味着两件事：1）您的服务器没有使用正确的MIME类型提供js文件。 2.）jquery.js和flot.js都没有被正确解释，并带有“Unexpected token”错误。请按照@thtsigma的建议在下面做，并确保您可以从您的网络服务器正确地获取这些js文件。 – Mark

Flot不能使用node.js

回答

相关问题