Apache: 502 proxy error in Express.js while integrating with Apache
I am hosting apache and node.js server together with apache server proxying to node server.My framework is express.js and I am using amCharts.I have timeout for proxying set to 600.When I open my website I get only the static content and not the dynamic content of amCharts.
This is my server side code:
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");
Error on Console is:
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)
My apache conf file configuration is
ProxyRequests off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyTimeout 600
<Location />
ProxyPass http://localhost:3000
ProxyPassReverse http://localhost:3000
</Location>
My client side code 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>
Answer
Solved the problem.In the virtualhost conf file I just added:
ProxyPass http://localhost:3000/
ProxyPassReverse http://localhost:3000/
/ at the end of the proxy pass and it worked.