I have a node.js server script which reads the data from serial port using web sockets and displays the data on a browser. The server script is absolutely fine as it displays correctly realtime data on the browser. This also means the websockets are also working correctly. The real problem starts when I tried to use Flot to display real time charts to visualize the data. The server throws error message - debug - served static content /socket.io.js
Here is the the code for my server :
// 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 = "";
}
}
});
});
Below is the client code which tries to use Flot to display realtime charts
<!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>
Can anyone help me out why flot is not working in my setup ? Also I am running server and client on same machine which is windows 7.
In the chrome debugger I could see the following message :
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
Any help will be very highly appreciated.
Cheers ! AN
I would just have made a comment, but I don't have enough rep for that. Maybe this will help, I don't know.
Modifying
<script src="//localhost:8000/socket.io/socket.io.js"></script>
to:
<script src="http://localhost:8000/socket.io/socket.io.js"></script>
got rid of the debug thing for me...also moving
var socket = io.connect('http://localhost:8000');
to be right under the function seemed to allow the console to spit out some more debug statements..
<script type="text/javascript">
$(function () {
var socket = io.connect('http://localhost:8000');
// Initialize Flot data points
var totalPoints = 300;