从节点数据收集到浏览器的数据传输

Question

我想将数据 (var xy) 从一个 javascript 文件 (A.js) 传输到另一个 javascript 文件 (B.js) 并使用 index.html 将其可视化。

A.js： 使用来自 json 的 node.js 进行数据收集。

B.js： 根据来自 A.js 的数据收集生成图表/图表以进行可视化

index.html： 在浏览器中显示来自 B.js 的图表/图表。

什么已经在起作用：

• 如果我在控制台中使用“node A.js”启动脚本，A.js 可以工作。
• B.js/index.html 工作，如果我从节点（快递）网络服务器开始。图表/图表在浏览器中。

但是我必须如何将 A.js 与 B.js/index.html 结合起来？像“module.exports.xy”这样的东西？

A.js：

var fs = require('collection-json');            //used for read the BELA API information (collection+json)
var underscore = require('underscore');         //used to filter for specific objects (parameters) in the collection
var lookupTable = require('./lookupTable');     //used to have access to the lookup table for the service name of the TM/TC
var _ = require('lodash');                      //is not used yet, but it could be for delivering consistency customization, performance and so on (input from Alain)


var TMTC = "TM";
var dateA = "2013-10-20";
var dateB = "2013-10-22";

var afterDate = "after=" + dateA + "&";
var toDate = "to=" + dateB;
var time = "22:56:26";

console.log("\nAfter date:\t" + dateA);
console.log("To date:\t" + dateB);
console.log("Time:\t\t" + time);

var x_axis_time_stamp_array = new Array();

// Start at the root of our api
var content = fs("http://oberon.unibe.ch/bela-api/v0.0.2/labs/starsim/devices/bela/channels/"+TMTC+"_pus?"+toDate+"T"+time+".000Z", function(error, collection){

    //If no data are available on the server...
    if (error){
        console.log("TM/TC does not exist.");
    }


    //Test---------------------------------------------------------------------------------------
    console.log(collection._collection.items[0]);
    console.log(collection._collection.items[0].data[0]);
    console.log(
            _.contains(collection._collection.items[0], { name: "hash", value: "e2673ab6", promt: "Hash" })
    );

    var array = collection._collection.items[0];
    console.log(array);
    console.log(
            _.contains(array, { name: "hash", value: "e2673ab6", promt: "Hash" } )
    );
    //Test---------------------------------------------------------------------------------------




    var test = ["1", "2", "3"];
    console.log(test);
    console.log(
    _.contains(test, "2")
    );

    //Test---------------------------------------------------------------------------------------


    //Table legend
    console.log("\nTIME STAMP" + "\t\t\t" + "SERVICE" + " \t" + "SERVICE NAME" + "\t\t" + "SID" + "\n");

    //Iteration over each "data-object" in the "item-collection"
    for (var i = 0; i < collection._collection.items.length; i++) {

        //Time Stamp and fill array
        var time_stamp = collection._collection.items[i].data[1].value;
        x_axis_time_stamp_array[i] = time_stamp; 

        //Service: TM (Service type, Service subtype)
        var service_type = collection._collection.items[i].data[2].value.packet_data_field.data_field_header.service_type;
        var service_subtype = collection._collection.items[i].data[2].value.packet_data_field.data_field_header.service_subtype;
        var service = TMTC + "(" + service_type + "," + service_subtype +")";


        //SID from Application Data in Packet Data Field
        var sid = collection._collection.items[i].data[2].value.packet_data_field.application_data.sid;
        if (sid == undefined){
            sid = "";
        }


        //BELA Mode
//      if (collection._collection.items[i].data[2].value.packet_data_field.application_data.params.hk5 !== undefined) {
//          console.log(collection._collection.items[4].data[2].value.packet_data_field.application_data.params.hk5.bela_mode);
//      }


        //Console Output
        console.log(time_stamp + "\t" + service + " \t" + lookupTable.serviceName[service] + "\t\t" + sid);
    }

});



//provides data to B.js
exports.XY = 5;

B.js：

var input = require('./A.js');
alert('input.XY');

var data1 = [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ];
var data2 = [ { x: -1893456000, y: 29888542 }, { x: -1577923200, y: 34019792 }, { x: -1262304000, y: 38594100 }, { x: -946771200, y: 40143332 }, { x: -631152000, y: 44460762 }, { x: -315619200, y: 51619139 }, { x: 0, y: 56571663 }, { x: 315532800, y: 58865670 }, { x: 631152000, y: 59668632 }, { x: 946684800, y: 64392776 }, { x: 1262304000, y: 66927001 } ];
var data3 = [ { x: -1893456000, y: 29389330 }, { x: -1577923200, y: 33125803 }, { x: -1262304000, y: 37857633 }, { x: -946771200, y: 41665901 }, { x: -631152000, y: 47197088 }, { x: -315619200, y: 54973113 }, { x: 0, y: 62795367 }, { x: 315532800, y: 75372362 }, { x: 631152000, y: 85445930 }, { x: 946684800, y: 100236820 }, { x: 1262304000, y: 114555744 } ];

var palette = new Rickshaw.Color.Palette();

var graph1 = new Rickshaw.Graph( {
        element: document.querySelector("#chart-type1"),
        width: 580,
        height: 250,
        series: [ {
            name: "Name of Chart3",
            color: palette.color(),
            data: data1
        } ]
} );

var graph2 = new Rickshaw.Graph( {
    element: document.querySelector("#chart-type2"),
    width: 580,
    height: 250,
    series: [ {
        name: "Name of Chart3",
        color: palette.color(),
        data: data2
    } ]
} );

var graph3 = new Rickshaw.Graph( {
    element: document.querySelector("#chart-type3"),
    width: 580,
    height: 250,
    series: [ {
        name: "Name of Chart3",
        color: palette.color(),
        data: data3
    } ]
} );



//Axis Properties

var x_axes = new Rickshaw.Graph.Axis.X( { graph: graph1 } );
var x_axes = new Rickshaw.Graph.Axis.Time( { graph: graph2 } );
var x_axes = new Rickshaw.Graph.Axis.Time( { graph: graph3 } );

var y_axis = new Rickshaw.Graph.Axis.Y( {
    graph: graph1,
    orientation: 'right',
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
    element: document.getElementById('y_axis'),
} );
var y_axis = new Rickshaw.Graph.Axis.Y( {
    graph: graph2,
    orientation: 'right',
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
    element: document.getElementById('y_axis'),
} );
var y_axis = new Rickshaw.Graph.Axis.Y( {
    graph: graph3,
    orientation: 'right',
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
    element: document.getElementById('y_axis'),
} );



//Chart Rendering

graph1.render();
graph2.render();
graph3.render();

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>Data_Monitoring</title>


    <!-- Cascading Style Sheets  -->
    <link href="css/custom.css" media="screen" rel="stylesheet" type="text/css" >
    <link href="css/rickshaw.css" media="screen" rel="stylesheet" type="text/css" >
    <link href="css/envision.css" media="screen" rel="stylesheet" type="text/css" >


</head>
<body>

    <h1>Title</h1>


    <!-- Drawing charts -->
    <div id="chart-type1"></div>
    <div id="chart-type2"></div>
    <div id="chart-type3"></div>


    <!-- JavaScript  -->
    <script type="text/javascript" src="lib/d3.min.js"></script>
    <script type="text/javascript" src="lib/rickshaw.js"></script>

    <script type="text/javascript" src="js/A.js"></script>
    <script type="text/javascript" src="js/lookupTable.js"></script>

    <script type="text/javascript" src="js/B.js"></script>


</body>
</html>

Answer 1

是的，基本上您需要导出从A.js 返回数据的对象或函数，并在B.js 中使用它。下面是一个简单的例子，说明如何使用modulesfrom the Node API：

circle.js的内容：

var PI = Math.PI;

exports.area = function (r) {
  return PI * r * r;
};

exports.circumference = function (r) {
  return 2 * PI * r;
};

foo.js的内容：

var circle = require('./circle.js');
console.log( 'The area of a circle of radius 4 is '
       + circle.area(4));

如果您在理解如何使用它方面需要更多帮助，请发布代码示例，以便我们提供进一步帮助。

更新

这里有一些示例代码，希望能帮助您开始使用Express 和Backbone。它并不完整，但希望能让您了解如何开始使用这两种技术将信息从服务器（节点）发送到客户端（浏览器）。

Express API 端点文件（从 Node.js 运行）：

// This creates a HTTP GET endpoint for your Express app
// which will return the data when a user hits /my-endpoint
app.get("/my-endpoint", function(req, res) {
    // populate the data to return to the client
    var data = {
        XY: 5
    };

    // send the data
    res.send(data);
});

主干客户端代码（从浏览器运行）：

// This creates a Backbone Model which will hit
// the API endpoint /my-endpoint
var DataModel = Backbone.Model.extend({
    url: "/my-endpoint"
});

// Create a new instance of the DataModel
var dataModel = new DataModel();

// A function to display the data contained within the dataModel
function displayData() {
    // write the data model to the browser's console
    console.log("dataModel: " + dataModel.toJSON());
}

// when the data model API call is complete, call the displayData function
dataModel.on("sync", displayData);

// fetch() == GET HTTP request to the URL specified in the model
// This will perform the HTTP request to the Express endpoint, and
// once complete, contain the data returned from the API.
// 
// Because we linked this to displayData, that function will be called
// once the fetch is complete.
dataModel.fetch();