2

Webソケットを使用してシリアルポートからデータを読み取り、ブラウザにデータを表示するnode.jsサーバースクリプトがあります。サーバー スクリプトは、ブラウザにリアルタイム データを正しく表示するため、まったく問題ありません。これは、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

どんな助けでも非常に高く評価されます。

乾杯 ！アン

4

1 に答える 1

1

コメントをしただけですが、そのための十分な担当者がいません。たぶんこれが役立つでしょう、わかりません。

変更中

<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;
于 2013-01-06T05:44:01.380 に答える