如何在 HTML 上显示节点服务器的健康状态

Question

我有两台服务器。一个是在端口 8080 上运行的 server1，另一个是在 8081 上运行的主应用服务器。现在我想在主应用服务器 (8081) 上运行的 UI(HTML) 上展示 server1 的运行状况。我想显示HTML 上的这些元素。

1.Status code of server one.

2.Server is UP Or Down.

3.Response of the server one.

这是我的 nodejs 代码。

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 部分：

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>

我应该怎么做才能在 UI 上显示 server1 的健康状态。

Answer 1

我已经编写并发布了一个带有 React 前端的 Node 应用程序，它正是这样做的。它是完全开源的，可以免费使用。

它允许您定义网站、Web 应用程序、API 端点和服务器列表以在 JSON 中进行监控。

React 前端提供了一个显示每个资产状态的仪表板。后端将定期调用列表中的每个“资产”并记录状态和响应时间，并通过 Sockets.io 将结果广播到任何连接的客户端。

随意安装为 NPM 包，或转到 GitHub 并克隆 repo。

我知道您可能不想要开箱即用的解决方案，因此请随时查看我的代码以帮助您构建自己的解决方案。

NPM Link

GIT HUB Link

Running example on Heroku

Answer 2

您可以创建一个特定的路由，该路由将由您的前端 javascript 在特定的setInterval() 上调用。如果有任何错误数组，此路由可能会返回带有错误数组的 JSON。大致如下：

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});
  });

请小心，因为可能存在您不想向用户显示的错误。这将取决于应用程序的类型等。

然后在 setInterval() 函数中从您的前端 JS 代码进行 AJAX 调用。这个的实现将取决于你使用的库/框架，如果你这样做，但使用 jquery 例如：

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

在您的 html 文件中，您可以使用 <div> 来显示服务器运行状况：

<div class="server-health">
  <span class="error"></span>
  <span class="success"></span>
</div>