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

Data transfer from node data collection to the browser

本文关键字：数据传输 浏览器 节点 数据采集      更新时间：2023-09-26

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

A.js :从json.

使用node.js收集数据

研究:基于A.js收集的数据生成用于可视化的图表

index . html :在浏览器中显示B.js中的图表。

什么已经在工作:

  • A.js工作，如果我在控制台中使用"node A.js"启动脚本。
  • B.js/index.html工作，如果我开始与节点(express) web服务器。图表/图表在浏览器中。

但是我如何结合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;

研究:

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>

是的，本质上你需要导出从A.js返回数据的对象或函数，并在B.js中使用它。下面是如何从Node API中使用modules的一个简单示例:

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。本文并不是完整的，但希望能让您了解如何开始使用这两种技术将信息从服务器(Node)发送到客户端(浏览器)。

Express API endpoint file(从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();
相关文章：