I have two servers. One is server1 running on port 8080 and another one is main app server which is running on 8081. Now i want to showcase the health status of server1 on UI(HTML) which is running on main app server(8081).I want to display the these elements on HTML.
1.Status code of server one.
2.Server is UP Or Down.
3.Response of the server one.
This is my nodejs code.
const express = require('express');
const http = require('http');
const fs = require('fs');
const bodyParser = require('body-parser');
const router = express.Router();
const path = require('path');
const ejs = require('ejs');
const app = express();
const server1 = express();
server1.get('/health', function (req, res, next) {
res.json({health: true});
res.status(200).end();
});
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.get('/', (req,res) => {
res.render('index');
console.log('server two')
})
server1.listen(8080);
app.listen(8081);
Ajax part:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
document.getElementById("#demo1").innerHTML = xmlhttp.responseText;
}
else if (xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
document.getElementById('demo1').innerHTML = 'something else other than 200 was returned';
}
}
};
xmlhttp.open("GET", "http://localhost:8080/health", true);
xmlhttp.send();
HTML:
<div id="demo1"></div>
What should i exactly do to display the health status of server1 on UI.
I've wrote and published a Node App with a React front-end that does exactly this. It's purely open source and free to use.
It allows you to define a list of websites, webapps, API endpoints and servers to monitor in JSON.
The React front-end provides a dashboard showing state of each asset. The backend will periodically call each 'asset' in your list and record state and response time and also broadcast the results to any connected client via Sockets.io.
Feel free to install as an NPM package, or go onto GitHub and clone the repo.
I understand you might not want an out of the box solution, so feel free to take a look at my code to help you in building your own solution.
NPM Link
GIT HUB Link
Running example on Heroku
You could create a specific route that will be called on a specific setInterval() by your front-end javascript. This route could return a JSON with an errors array if there are any. Something along the lines of:
app.get('/health-check', (req,res) => {
// check database connectivity and any other staff you want here
// add any errors in an array
if (errors.length > 0) {
return res.status(500).json({health: false, errors: errors});
}
return res.status(200).send({health: true});
});
Be careful as there may exist errors that you don't want to show to your user. This will depend on the type of application etc.
Then make an AJAX call from your front-end JS code within a setInterval() function. The implementation of this will depend of the library/framework you use if you do but using jquery for example would be like:
const healthTimer = setInterval(() => {
$.ajax({
url: "[your server url]/health-check",
type: "GET",
success: function(xml, textStatus, xhr) {
// get the server status here if everything is ok
$('div.server-health span.success').text(`Server Status: ${xhr.status}`);
$('div.server-health span.error').text('');
console.log('RESPONSE CODE:', xhr.status);
},
error: function (request, status, error) {
// handle the error rendering here
$('div.server-health span.error').text(`Server Status: ${status}`);
$('div.server-health span.success').text('');
alert(request.responseText);
}
});
}, 15000); // send the request every 15 seconds
Inside your html file you can have a <div> to show the server health:
<div class="server-health">
<span class="error"></span>
<span class="success"></span>
</div>
Related
I created a simple API using express, and deployed it to Heroku, this is the code for it:
const express = require("express");
const app = express();
const cors = require("cors");
app.use(express.json());
app.use(cors());
app.use(express.static("build"));
let notes = [
{
id: 1,
content: "HTML is easy",
date: "2022-05-30T17:30:31.098Z",
important: true,
},
{
id: 2,
content: "Browser can execute only Javascript",
date: "2022-05-30T18:39:34.091Z",
important: false,
},
{
id: 3,
content: "GET and POST are the most important methods of HTTP protocol",
date: "2022-05-30T19:20:14.298Z",
important: true,
},
];
const generateId = (arr) => {
const maxId = arr.length < 0 ? 0 : Math.max(...arr.map((item) => item.id));
return maxId + 1;
};
app.get("/", (req, res) => {
res.send(`<h1>Hello World!</h1>`);
});
app.get("/api/notes", (req, res) => {
res.json(notes);
});
app.get("/api/notes/:id", (req, res) => {
const id = Number(req.params.id);
const note = notes.find((note) => note.id === id);
if (note) {
res.json(note);
} else {
res.status(404).end();
}
});
app.delete("/api/notes/:id", (req, res) => {
const { id } = Number(req.params);
notes = notes.filter((note) => note.id !== id);
res.status(204).end();
});
app.post("/api/notes", (req, res) => {
const body = req.body;
if (!body.content) {
return res.status(400).json({
error: "Content Missing",
});
}
const note = {
content: body.content,
important: body.important || false,
date: new Date(),
id: generateId(notes),
};
notes = notes.concat(note);
res.json(note);
});
app.put("/api/notes/:id", (req, res) => {
const newNote = req.body;
notes = notes.map((note) => (note.id !== newNote.id ? note : newNote));
res.json(newNote);
});
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
as you can see, the data served to the frontend (A React app) comes from the '/api/notes' endpoint, this endpoint returns a response with the notes array.
After deploying to Heroku (https://fierce-chamber-07494.herokuapp.com/) the functionality of adding notes, and setting importance all work perfectly normal, but what I wasn't expecting was for the data to be persistent even after refreshing the page, visiting it in another device, etc. The data only comes from a variable, not a database, nothing. So why is it persistent? does Heroku modify the variable itself? how does this work?
The top-level code of an Express server often runs once, when you start up the server. Variables declared at that top level are then persistent if there are any handlers that reference them.
Consider how a client-side page with JavaScript works - the page loads, and then the JavaScript runs. If you keep the tab open for a couple hours and then come back to it, you'll see that variables declared on pageload still exist when you come back. The same sort of thing is happening here, except that the persistent environment is on your server, rather than on a client's page.
The code that starts up the Express server - that is, your
const express = require("express");
const app = express();
const cors = require("cors");
app.use(express.json());
app.use(cors());
...
and everything below it - doesn't run every time a request is made to the server. Rather, it runs once, when the server starts up, and then when requests are made, request handlers get called - such as the callback inside
app.get("/", (req, res) => {
res.send(`<h1>Hello World!</h1>`);
});
So, the variables declared at the top-level are persistent (even across different requests) because that server environment is persistent.
That said - something to keep in mind with Heroku is that with their free and cheap tiers, if no request is made to your app for a period of time (maybe 30 minutes), Heroku will essentially turn your server off by spinning down the dyno until another request is made, at which point they'll start your server up again, which will run the top-level code again. So while you'll sometimes see a top-level variable that appears to have its mutated values persist over multiple requests, that's not something to count on if your Heroku plan doesn't guarantee 100% uptime for your server.
I'm learning Express and I face an issue which I can't understand.
When I route to /addPerson I expect to log the name: 'Mike', age: 30 to the console. Instead I got nothing logged to the console. What's wrong in my code?
here's the server.js code
const Express = require('express'),
app = Express(),
PORT = process.env.PORT || 5000,
parser = require('body-parser'),
data = []
// initialize the main project folder
app.use(Express.static('public'))
// running the server
app.listen(PORT, () => {
console.log(`Server is running at port ${PORT}`);
})
// include body parser to handle POST requests
app.use(parser.urlencoded({extended: false}))
app.use(parser.json())
// setup CORS
const cors = require('cors')
app.use(cors())
// GET request
app.get('/', (req, res) => {
res.send('<h1>Home Page</h1>')
})
app.get('/addPerson', (req, res) => {
res.send('<h1>Hello Hany</h1>')
})
// POST request
app.post('/addPerson', (req, res) => {
data.push(req.body)
console.log(data);
})
and here is the client side app.js code
const postData = async ( url = '', data = {})=>{
console.log(data);
const response = await fetch(url, {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
},
// Body data type must match "Content-Type" header
body: JSON.stringify(data),
});
try {
const newData = await response.json();
console.log(newData);
return newData;
}catch(error) {
console.log("error", error);
}
}
postData('/addPerson', {name: 'Mike', age: 30});
this the files structure
Alright, I've taken a look at your code and this is what I've noticed. Within your server.js file you have this code block:
app.get('/addPerson', (req, res) => {
res.send('<h1>Hello Hany</h1>')
})
That is sending back a static H1 tag when the user creates a get request to localhost:5000/addPerson. Then, directly below that you have your post route but you're never fully accessing that from anywhere (I looked through all your app.js code to double check).
Instead, I have changed your code to return a static html file with a button that allows you to call this function (just as an example so you can see that your routes do in fact work). This isn't the cleanest solution to your problem but I just wanted to make sure you see where the problem lies as I've been in your shoes before when I first started working with express. You can take a look at the CodeSandbox I setup below to replicate your issue and take a look through all the code to get an understanding.
To properly solve your issue using the app.js file you would have to serve the javscript file as your "frontend". Personally I'm a big fan of React so I usually serve my frontend with React, while my backend is express. You can also very easily serve this file using NodeJS in a similar fashion that you are with your "backend". If you were to take the React approach you would be able to modify this code:
app.get("/addPerson", (req, res) => {
res.sendFile(path.resolve(__dirname, "public", "index.html"));
});
To find the frontend section you desire using React (I can recommend react-router if you require multiple routes but I don't want to overwhelm you with too much information yet) and complete the same function. If you have any questions feel free to reach out and let me know! Hopefully this helps!
I am trying to create a web scraper where the user inputs a URL into a form and when they hit submit, the scraper gets the URL and then returns the data about the URL that I specifiy.
My main app.js file is:
// Dependencies
var express = require('express');
var path = require('path');
var fs = require('fs');
// Custom Libraries - ./ signals to node not to look in the node_modules directory
var scraper = require('./scraper');
// App.js Variables
var app = express();
var viewsPath = path.join(__dirname, '/app/views');
app.use(express.static(__dirname + '/app/public'));
// set the port - 3000
app.set('port', process.env.PORT || 3000);
// Form handling
app.use(require('body-parser').urlencoded({
extended:true }));
app.get('/the_test');
// Writes the domain entered in the form to app/data/domain.txt
app.post('/process', function(request, response){
var domain = request.body.domain;
fs.writeFile('app/data/domain.txt', domain, function (err) {
if (err) return console.log(err);
console.log('Your domain has been saved!');;
});
response.redirect(303, '/results');
});
// Routes require
var routes = require('./routes');
app.use('/', routes);
app.use('/results', routes);
app.listen(app.get('port'), function(){
console.log('Express started on http://localhost:' + app.get('port') + '; press Ctrl-C to terminate.');
});
My scraper file is:
var express = require('express');
var fs = require('fs');
var request = require('request');
var cheerio = require('cheerio');
var scraper = express();
// Scrape the url that was posted
scraper.get('/scrape', function(req, res){
// Scrape this
var url = fs.readFileSync('./app/data/domain.txt', 'utf8');
request(url, function(error, response, html){
if(!error){
var $ = cheerio.load(html);
var header;
var json = { header : ""};
$('.hero-message').filter(function(){
var data = $(this);
header = data.children().first().text();
json.header = header;
});
} else {
console.log(error);
}
fs.writeFile('./app/data/results.json', JSON.stringify(json, null, 4), function(err){
console.log('File successfully written! - Check your project directory for the output.json file');
});
res.send('Check your console!')
});
});
scraper.listen(4000);
console.log('Magic happens on port 4000');
exports = module.exports = scraper;
When I go to localhost:3000, the user is able to enter the URL and hit submit, they are redirected to localhost:3000/results and the URL is logged in data/domain.txt.
When I go to localhost:4000/scrape, the scraper activates, grabs the domain from domain.txt and scrapes it.
My question is how can I make this one fluid program and/or how do I activate the scraper automatically instead of going to localhost:4000/scrape every time? I am very new to Node.js and Express and realize this is a lot of ugly code to look at.
Any tips would be greatly appreciated.
There's no need to keep two separate processes for what you are trying to do. What you can do is to move the scraper action
scraper.get("/scrape", function (req, res) {
// code
});
To the main app.js file and serve everything from port 3000, make sure you include all dependencies from scraper on main. At this point, you might want to learn how to use node's module system to keep code separated and organized.
Depending on how long your scrape process takes, you could do one of the following:
Change the process action to do the work that the scrape action does at the moment, so instead writing the domain to a file and then go to a different url to read from that file and start the process, you catch the domain and feed to the scraper right away.
If the scraper takes a long time and you want to start the scrape job automatically, you don't want it to block your application or to throw a timeout during the request. You should consider implementing a worker queue mechanism. There are a lot of ways to do this, and the correct solution depends a lot on the expected use case of your application.
I am having trouble figuring out the best way for the serve to render my react components only after the http requests have been resolved.
For example:
component A <- component B <- component C (C triggers an action which makes a call to the API and returns data to render, in the mean time just renders 'loading').
When inspecting my source code, I only see 'loading' and would like, for SEO purposes, the server to wait till component C's call has resolved and rendered.
In theory, that sounds easy because the server should call that action itself and wait till the action is finished then call react.renderToString(), like this:
server.get('/', function (req, res, next) {
showMessages({}, function showMessagesCallback() { //add a callback
var html = React.renderToString(ChatComponent());
res.send(html);
});
});
But what if multiple components make action calls and I need to wait for multiple actions to solve and then call renderToString
Instead, the requests are picked up on the client side. My server file:
/**
* This leverages Express to create and run the http server.
* A Fluxible context is created and executes the navigateAction
* based on the URL. Once completed, the store state is dehydrated
* and the application is rendered via React.
*/
import express from 'express';
import path from 'path';
import serialize from 'serialize-javascript';
import {navigateAction} from 'fluxible-router';
import debugLib from 'debug';
import React from 'react';
import app from './app';
import HtmlComponent from 'components/Html';
const htmlComponent = React.createFactory(HtmlComponent);
const debug = debugLib('quran-com');
const server = express();
server.set('state namespace', 'App');
server.use('/public', express.static(path.join(__dirname, '/build')));
server.use('/images', express.static(path.join(__dirname, '/client/images')));
server.use('/fonts', express.static(path.join(__dirname, '/client/styles/fonts')));
server.use((req, res, next) => {
let context = app.createContext();
debug('Executing navigate action');
context.getActionContext().executeAction(navigateAction, {
url: req.url
}, (err) => {
if (err) {
if (err.status && err.status === 404) {
next();
} else {
next(err);
}
return;
}
debug('Exposing context state');
const exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';
debug('Rendering Application component into html');
const html = React.renderToStaticMarkup(htmlComponent({
context: context.getComponentContext(),
state: exposed,
markup: React.renderToString(context.createElement())
}));
debug('Sending markup');
res.type('html');
res.write('<!DOCTYPE html>' + html);
res.end();
});
});
const port = process.env.PORT || 8000;
server.listen(port);
console.log('Listening on port ' + port);
export default server;
what's the best way to do this?
You need to rethink architecture of your app. Components should not be getting data themselves, you are better of when something gives data to them.
My suggestion would be to do it in the navigate action, so that it becomes entry point into any view. Then here you can resolve all data needed and feed stores with that data, once resolved call the callback. E.g.:
module.exports = {
navigateAction: function (context, state, done) {
var completeNavigation = function () {
context.dispatch('NAVIGATE_DONE');
done()
}
var route = _.last(state.routes);
debug('navigate to: ' + route.name);
switch (route.name) {
case 'products':
context.executeAction(productActions.loadProducts, null, completeNavigation);
break;
default:
completeNavigation();
break;
}
}
};
In this sample I'm using react-router.
I am building a cross system admin app, which will be used as an admin tool for multiple backend systems. The app is built on top of Mean.js.
I have setup a /proxy route using "express-http-proxy" to send all sub-routes to their respective backend system endpoints. However, I need to have each request authenticated within my admin app and then decorated with the targeted backendSystem credentials before the "express-http-proxy" can continue. Here's an example of my /proxy route...
app.use('/proxy', users.requiresLogin, expressHttpProxy(config.backendSystem.host, {
forwardPath: function (req) {
return '/1.0' + require('url').parse(req.url).path;
},
decorateRequest: function (req) {
req.headers['content-type'] = 'application/json';
req.headers['backend-system-id'] = config.backendSystem.id;
req.headers['backend-system-key'] = config.backendSystem.key;
return req;
}
}));
NOTE:
Currently the backendSystem credentials are stored based on the environment my admin app is ran in. However, in the future the backendSystem credentials will be specified by the user, and this /proxy route will differently than what is currently shown.
THE ISSUE:
Proxy routes that require data within the request body don't work.
e.g. POST /comments {"user": user_id, "text": "rabble rabble rabble"}
WHAT I'VE FOUND:
bodyParser.json() and "express-https-proxy" don't play nice. I've confirmed this by removing bodyParser.json() from express.js.
However, this isn't a full solution since almost all of my other routes need bodyParser.json, e.g. /auth/signin.
Does anyone have a clean way that I can make a route exception for my /proxy route so that bodyParser.json won't be called for it?
As far as I understand, the root of problem is so:
if you were reading a POST request by pure node, you should be using a code like this
if (req.method == 'POST') {
console.log("POST");
var body = '';
req.on('data', function (data) {
body += data;
console.log("Partial body: " + body);
});
req.on('end', function () {
console.log("Body: " + body);
});
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('post received');
}
in other words, you need to use the req.on('data') & req.on('end') events.
but the problem is,that you can use this code only once. after the 'end' is called, the request is consumed.
so then you use bodyParser , it consumes the request, and the proxy have nothing to do with it.
actually, in my opinion, the proxy wait for the 'data' event to appear , but it will newer happen, so the code halts.
The solution:
you need to 're-enable' the events. I used this code and it works for me.
var express = require('express');
var bodyParser = require('body-parser');
var http = require('http');
//call for proxy package
var devRest = require('dev-rest-proxy');
//init express (as default)
var users = require('./routes/users');
var app = express();
app.use(bodyParser.json());
//set the proxy listening port
app.set('port', 8080);
//process the POST request
app.post('/users/*', function(req, res) {
//just print the body. do some logic with it
console.log("req.body: ",req.body);
//remove listeners set by bodyParser
req.removeAllListeners('data');
req.removeAllListeners('end');
//add new listeners for the proxy to use
process.nextTick(function () {
if(req.body) {
req.emit('data', JSON.stringify(req.body));
}
req.emit('end');
});
//forward the request to another server
devRest.proxy(req,res, 'localhost', 3000);
});
//start the proxy server
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
module.exports = app;
the solution found on schumacher-m post (github of nodejitsu)
I was able to resolve my issue by adding a regex that excluded my /proxy route to where bodyParser.json was being added within express.js. I found that from this answer
While this approach doesn't scale well, it solved my immediate issue.
I get it works by converting the data into query string using 3rd party query-string as follows:
proxyReqBodyDecorator: function(bodyContent, srcReq) {
return (queryString.stringify(bodyContent));
}
Have tried JSON.stringify but not working, need the data in the following format
array_field=val1&array_field=val2&array_field=val3......
To modify the request body, do this with the latest express-http-proxy v1.6.2:
const express = require('express');
const proxy = require('express-http-proxy');
const bodyParser = require('body-parser');
const conf = {
proxyHost: 'some.example.net:9200',
proxyOptions: {
proxyReqBodyDecorator: modifyRequestBody,
preserveHostHdr: true,
parseReqBody: true
},
port: 8073
};
var app = express();
app.use('/proxy', proxy(conf.proxyHost, conf.proxyOptions));
function modifyRequestBody(body, srcReq) {
if(srcReq.method.match(/^(GET|POST)$/i)) {
try {
// convert buffer to string, then to object
var str = Buffer.from(body).toString('utf-8');
var reqBody = JSON.parse(str);
if(someCondition)) {
reqBody.addStuff = 'whatever';
body = reqBody; // return modified body as object
}
} catch(error) {
console.log('- error: ' + JSON.stringify(error));
}
}
return body; // return original buffer, or modified object
}
app.listen(conf.port, function () {
log('app listening on port ' + conf.port);
});
You can fill the proxyReq.bodyContent inside the decorateRequest method with the JSON-ed data from originalReq.body to be correctly POST'ed:
app.use('/proxy', users.requiresLogin, expressHttpProxy(config.backendSystem.host, {
...
...
decorateRequest: function (proxyReq, originalReq) {
...
...
if (originalReq.body) {
proxyReq.bodyContent = JSON.stringify(originalReq.body);
}
return proxyReq;
}
...
...
}));