Fatal编程技术网
  • node.js/
  • Node.js Apache:502与Apache集成时Express.js中出现代理错误

Node.js Apache:502与Apache集成时Express.js中出现代理错误

node.js apache express socket.io

Node.js Apache:502与Apache集成时Express.js中出现代理错误,node.js,apache,express,socket.io,mod-proxy,Node.js,Apache,Express,Socket.io,Mod Proxy,我正在托管apache和node.js服务器以及代理到node服务器的apache服务器。我的框架是express.js，我使用的是amCharts。代理超时设置为600。当我打开我的网站时，我只获得amCharts的静态内容，而不是动态内容 这是我的服务器端代码： var express = require('express'); var routes = require('./routes'); var user = require('./routes/user');

我正在托管apache和node.js服务器以及代理到node服务器的apache服务器。我的框架是express.js，我使用的是amCharts。代理超时设置为600。当我打开我的网站时，我只获得amCharts的静态内容，而不是动态内容

这是我的服务器端代码：

    var express = require('express');
    var routes = require('./routes');
    var user = require('./routes/user');
    var http = require('http');
    var path = require('path');
    var fs = require('fs');
    var data = '';

    var app = express();
    var server = app.listen(3000);
    var io = require('socket.io').listen(server);
    // all environments
    //app.set('port', process.env.PORT || 3000);
    //app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'ejs');
    app.use(express.favicon());
    app.use(express.logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded());
    app.use(express.methodOverride());
    app.use(app.router);
    app.use(express.static(path.join(__dirname, 'public')));

    io.sockets.on('connection', function (socket) {

    setInterval(function(){
     var file = __dirname + '/config.json';
      fs.readFile(file, 'utf8', function (err, data) {
        if (err) {
          console.log('Error: ' + err);
          return;
        }
        data = JSON.parse(data);
      // You can save those values somewhere or just log them to the console
        console.dir(data);

      socket.emit('news', { hello: data});
     });

      }, 5000);
      });

    app.get('/', function (req, res){
        res.render('map1.html');
         });

    app.set('views', __dirname + '/views');
    app.engine('html', require('ejs').renderFile);

    // development only
    if ('development' == app.get('env')) {
      app.use(express.errorHandler());
    }

    console.log("Express server listening on port 3000");
控制台上的错误是：

    GET http://localhost/ammap.css 502 (Proxy Error) localhost/:7
    GET http://localhost/ammap.js 502 (Proxy Error) localhost/:8
    GET http://localhost/worldLow.js 502 (Proxy Error) localhost/:10
    GET http://localhost/jquery.min.js 502 (Proxy Error) localhost/:11
    Uncaught ReferenceError: $ is not defined localhost/:85
    extension connect DragAndDropController.js:83
    GET http://localhost/socket.io/1/?t=1394706750306 502 (Proxy Error)
我的apacheconf文件配置是

    ProxyRequests off
        <Proxy *>
            Order deny,allow
            Allow from all
        </Proxy>
            ProxyTimeout 600
        <Location />
            ProxyPass  http://localhost:3000
            ProxyPassReverse  http://localhost:3000
        </Location>

ProxyRequests关闭
命令拒绝，允许
通融
代理超时600
ProxyPasshttp://localhost:3000
ProxyPassReversehttp://localhost:3000
我的客户端代码 map1.html

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amMap examples</title>

        <link rel="stylesheet" href="/ammap.css" type="text/css">
        <script src="/ammap.js" type="text/javascript"></script>
        <script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
        <script src="/worldLow.js" type="text/javascript"></script>
        <script src="/jquery.min.js"></script>


         <style>
            ul,li {
            list-style-type: none;
            }
            li:hover {
            background-color:white;
            color:black;
            cursor:pointer;
            }
         </style>

        <script type="text/javascript">
        var val1 = [];
        //var test;
            var count = 0, a = 0, b = 0;
            var x, y, z;
            var i, j;
            var z1, z2;
            var a1 = 0, a2 = 0, a3 = 0, a4 = 0, a5 = 0, a6 = 0;
            var new_arr = [];
            var db = [];
// var new_arr = [{ "name": "Rig1", "time": 29, "lat": 13.45, "longi": 44.12, "level":1 },
//                { "name": "Rig2", "time": 2, "lat": 67.45, "longi": 14.12, "level": 0 },
//                { "name": "Rig3", "time": 19, "lat": 13.45, "longi": 74.12, "level":3 },
//                { "name": "Rig4", "time": 56, "lat": 23.45, "longi": 33.12, "level":0 },
//                { "name": "Rig5", "time": 11, "lat": 78.45, "longi": 54.12, "level":5 },
//                { "name": "Rig6", "time": 5, "lat": 56.45, "longi": 65.12, "level": 2 }];
var high=[];

            // var high = [{ name: "", time: "", lat: "", longi: "" },
            //             { name: "", time: "", lat: "", longi: "" },
            //             { name: "", time: "", lat: "", longi: "" },
            //             { name: "", time: "", lat: "", longi: "" },
            //             { name: "", time: "", lat: "", longi: "" },
            //             { name: "", time: "", lat: "", longi: "" }];
            var med = [{ name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" }];
            var low = [{ name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" }];
            var maint =  [{ name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" }];
            var mov =  [{ name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" }];
            var oth = [{ name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" },
                        { name: "", time: "", lat: "", longi: "" }];
            var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";



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

    $(document).ready(function(){

      socket.on('news', function (data) {

           JSON.stringify(data);
           y = data.hello.length;
           new_arr = [];
           new_arr = data.hello;
           db = [];


            for (var i = 0; i < new_arr.length; i++) {

                if(new_arr[i].level==2){
                 db.push({
                    latitude: new_arr[i].lat,
                    longitude: new_arr[i].longi,
                    svgPath: targetSVG,
                    color: "#CC0000",
                    scale: 0.5,
                    label: new_arr[i].name,
                    labelShiftY: 2,
                    zoomLevel: 3,
                    title: new_arr[i].name
                });
            }
              else if(new_arr[i].level==1){
                db.push({
                    latitude: new_arr[i].lat,
                    longitude: new_arr[i].longi,
                    svgPath: targetSVG,
                    color: "#FFFF00",
                    scale: 0.5,
                    label: new_arr[i].name,
                    labelShiftY: 2,
                    zoomLevel: 3,
                    title: new_arr[i].name
                 });
            }
                else if(new_arr[i].level==0){
                db.push({
                    latitude: new_arr[i].lat,
                    longitude: new_arr[i].longi,
                    svgPath: targetSVG,
                    color: "#00FF00",
                    scale: 0.5,
                    label: new_arr[i].name,
                    labelShiftY: 2,
                    zoomLevel: 3,
                    title: new_arr[i].name
                });
            }

             else{
                db.push({
                    latitude: new_arr[i].lat,
                    longitude: new_arr[i].longi,
                    svgPath: targetSVG,
                    color: "",
                    scale: 0.5,
                    label: new_arr[i].name,
                    labelShiftY: 2,
                    zoomLevel: 3,
                    title: new_arr[i].name
                });
            }

             }

    var test =  {
    type: "map",
    pathToImages: "/images/",

    imagesSettings: {
        //rollOverColor: "#CC0000",
        rollOverScale: 3,
        selectedScale: 3,
        //selectedColor: "#CC0000"
    },

    dataProvider: {
        map: "worldLow",
        images: db
    },

      smallMap: {},

};


var map = AmCharts.makeChart("mapdiv",test);
     map.validateData();

                    high=[];
                    low=[];
                    med=[];
                    mov=[];
                    maint=[];
                    oth=[];

                 for (i = 0; i < db.length; i++) {
                  //     val1 = test.dataProvider.images[parseInt(a)];
                    z = new_arr[i].level;

                    if (z == 2) {
                        high.push({"name" : new_arr[i].name,
                        "time" : new_arr[i].time,
                        "lat" : new_arr[i].lat,
                        "longi" : new_arr[i].longi});
                       // a1++;
                    }
                    else if (z == 1) {
                        med.push({"name" : new_arr[i].name,
                        "time" : new_arr[i].time,
                        "lat" : new_arr[i].lat,
                        "longi" : new_arr[i].longi});

                    }
                    else if (z == 0) {
                        low.push({"name" : new_arr[i].name,
                        "time" : new_arr[i].time,
                        "lat" : new_arr[i].lat,
                        "longi" : new_arr[i].longi});
                    }
                    else if (z == 3) {
                        maint.push({"name" : new_arr[i].name,
                        "time" : new_arr[i].time,
                        "lat" : new_arr[i].lat,
                        "longi" : new_arr[i].longi});
                    }
                    else if (z == 4) {
                        mov.push({"name" : new_arr[i].name,
                        "time" : new_arr[i].time,
                        "lat" : new_arr[i].lat,
                        "longi" : new_arr[i].longi});
                    }
                    else if (z == 5) {
                        oth.push({"name" : new_arr[i].name,
                        "time" : new_arr[i].time,
                        "lat" : new_arr[i].lat,
                        "longi" : new_arr[i].longi});
                    }
                    //a++;

                }

                 bubbleSort(high, 'time');
                    bubbleSort(med, 'time');
                    bubbleSort(low, 'time');
                    bubbleSort(maint, 'time');
                    bubbleSort(mov, 'time');
                    bubbleSort(oth, 'time');
                    $('#div1').html('');
                    $('#div2').html('');
                    $('#div3').html('');
                    $('#div4').html('');
                    $('#div5').html('');
                    $('#div6').html('');
                    $('#div1').append("<B>High<B/>");
                    $('#div2').append("<B>Med<B/>");
                    $('#div3').append("<B>Low<B/>");
                    $('#div4').append("<B>Maintenance</B>");
                    $('#div5').append("<B>On Move</B>");
                    $('#div6').append("<B>Others</B>");

                    for (i = 0; i < high.length; i++) {

                        $('#div1').append('<li id=dv_' + i + '><B><blink>' + high[i].name + '  ' + high[i].lat + '  ' + high[i].longi + '  ' + high[i].time + '</blink></B></li>');
                    }

                    for (i = 0; i < med.length; i++) {
                        //    document.writeln(med[i].name + "," + med[i].time + "<br>");
                        $('#div2').append('<li id=dk_' + i + '><B>' + med[i].name + '  ' + med[i].lat + '  ' + med[i].longi + '  ' + med[i].time + '</B></li>');
                    }
                    for (i = 0; i < low.length; i++) {
                        //  document.writeln(low[i].name + "," + low[i].time + "<br>");
                        $('#div3').append('<li id=dr_' + i + '><B>' + low[i].name + '  ' + low[i].lat + '  ' + low[i].longi + '  ' + low[i].time + '</B></li>');
                    }
                    for (i = 0; i < maint.length; i++) {
                        //  document.writeln(low[i].name + "," + low[i].time + "<br>");
                        $('#div4').append('<li id=ds_' + i + '><B>' + maint[i].name + '  ' + maint[i].lat + '  ' + maint[i].longi + '  ' + maint[i].time + '</B></li>');
                    }
                    for (i = 0; i < mov.length; i++) {
                        //  document.writeln(low[i].name + "," + low[i].time + "<br>");
                        $('#div5').append('<li id=do_' + i + '><B>' + mov[i].name + '  ' + mov[i].lat + '  ' + mov[i].longi + '  ' + mov[i].time + '</B></li>');
                    }
                    for (i = 0; i < oth.length; i++) {
                        //  document.writeln(low[i].name + "," + low[i].time + "<br>");
                        $('#div6').append('<li id=dg_' + i + '><B>' + oth[i].name + '  ' + oth[i].lat + '  ' + oth[i].longi + '  ' + oth[i].time + '</B></li>');
                    }


                function bubbleSort(a, par) {
                    var swapped;
                    do {
                        swapped = false;
                        for (var i = 0; i < a.length - 1; i++) {
                            if (a[i][par] > a[i + 1][par]) {
                                var temp = a[i];
                                a[i] = a[i + 1];
                                a[i + 1] = temp;
                                swapped = true;
                            }
                        }
                    } while (swapped);
                }
   });
  });

        </script>



            </head>
<body>

    <div>
                 <div id="mapdiv" style="margin-right:200px; background-color:#EEEEEE;width:80%; height: 500px;"></div>

       <div  style="width:20%;float:right;height: 500px;overflow:auto;margin-top:-500px;">
        <div id="div1" style="width:250px;border:1px solid black; color:red; overflow:auto; height:83px;text-align:center; background-color:#EEEEEE;">High</div>
        <div id="div2" style="width:250px;border:1px solid black; color:#FFCC00; overflow:auto; height:83px; text-align:center; background-color:#EEEEEE;">Med</div>
        <div id="div3" style="width:250px;border:1px solid black;color:#2cd918; overflow:auto; height:83px; text-align:center; background-color:#EEEEEE;">Low</div>
        <div id="div4" style="width:250px;border:1px solid black; color:#0e1594; overflow:auto; height:83px;text-align:center; background-color:#EEEEEE;">Maintenance</div>
        <div id="div5" style="width:250px;border:1px solid black; color:#85219d; overflow:auto; height:83px; text-align:center; background-color:#EEEEEE;">On Move</div>
        <div id="div6" style="width:250px;border:1px solid black; color:black; overflow:auto; height:83px; text-align:center; background-color:#EEEEEE;">Others</div>

               </div>       


    </div>
</body>
</html>


amMap示例
李先生{
列表样式类型：无；
}
李：悬停{
背景色：白色；
颜色：黑色；
光标：指针；
}
var val1=[]；
//var检验；
var计数=0，a=0，b=0；
变量x，y，z；
varⅠ，j；
变量z1，z2；
变量a1=0，a2=0，a3=0，a4=0，a5=0，a6=0；
var new_arr=[]；
var db=[]；
//var new_arr=[{“name”：“Rig1”，“time”：29，“lat”：13.45，“longi”：44.12，“level”：1}，
//{“name”：“Rig2”，“time”：2，“lat”：67.45，“longi”：14.12，“level”：0}，
//{“name”：“Rig3”，“time”：19，“lat”：13.45，“longi”：74.12，“level”：3}，
//{“name”：“Rig4”，“time”：56，“lat”：23.45，“longi”：33.12，“level”：0}，
//{“名称”：“Rig5”，“time”：11，“lat”：78.45，“longi”：54.12，“level”：5}，
//{“名称”：“Rig6”，“time”：5，“lat”：56.45，“longi”：65.12，“level”：2}]；
var高=[]；
//var high=[{name:，time:，lat:，longi:}，
//{名称：，时间：，纬度：，经度：}，
//{名称：，时间：，纬度：，经度：}，
//{名称：，时间：，纬度：，经度：}，
//{名称：，时间：，纬度：，经度：}，
//{name:，time:，lat:，longi:}]；
var med=[{name:，time:，lat:，longi:}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{name:，time:，lat:，longi:}]；
var low=[{name:，time:，lat:，longi:}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{name:，time:，lat:，longi:}]；
var maint=[{name:，time:，lat:，longi:}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{name:，time:，lat:，longi:}]；
var mov=[{name:，time:，lat:，longi:}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{name:，time:，lat:，longi:}]；
var oth=[{name:，time:，lat:，longi:}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{名称：，时间：，纬度：，经度：}，
{name:，time:，lat:，longi:}]；
9.9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 10 10 10 10 10 10 10 10 10 10 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 1.5,7.067,12.5,9z”；
var socket=io.connect（'http://localhost');
$（文档）.ready（函数（）{
socket.on（'news'，函数（数据）{
stringify（数据）；
y=data.hello.length；
新_arr=[]；
new_arr=data.hello；
db=[]；
对于（变量i=0；iProxyPass  http://localhost:3000/
ProxyPassReverse  http://localhost:3000/