javascript - Flot 不适用于 node.js-6ren

javascript - Flot 不适用于 node.js

转载作者：行者123 更新时间：2023-11-30 05:51:57

我有一个 node.js 服务器脚本，它使用网络套接字从串口读取数据并在浏览器上显示数据。服务器脚本绝对没问题，因为它可以在浏览器上正确显示实时数据。这也意味着 websockets 也能正常工作。当我尝试使用 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

任何帮助将不胜感激。

干杯!安

最佳答案

我本来想发表评论，但我没有足够的代表。也许这会有所帮助，我不知道。

修改

<script src="//localhost:8000/socket.io/socket.io.js"></script>

到:

<script src="http://localhost:8000/socket.io/socket.io.js"></script>

为我摆脱了调试问题......也移动了

var socket = io.connect('http://localhost:8000');

在函数的正下方似乎允许控制台吐出更多调试语句..

<script type="text/javascript"> 
$(function () {         
     var socket = io.connect('http://localhost:8000');
    // Initialize Flot data points
    var totalPoints = 300;

关于javascript - Flot 不适用于 node.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14178565/

文章推荐： java - 如何在Swing中实现一个 "In Progress"的动画？

文章推荐： javascript - Google Earth API - 转换 ED50/WGS84

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Flot 不适用于 node.js