基于BOA的嵌入式Web项目【机房温度监控】

一、需求分析

我们的需求很简单，采集端不断的通过温度传感器采集温度，然后传输到web前端页面进行显示，超过一定温度进行预警或者变化操作，如果后续还有什么需求可以直接添加。

二、项目结构

采集端采集数据 ==> CGI进程 ==> Web服务器 ==> 浏览器显示

更加详细的结构参考下图：

三、效果图

我们动态加载机房温度，并且当机房的温度超过90°的时候我们的监控就会出现红条警告，右边我们内嵌了一个空调

四、数据传输 4.1 采集端数据传输到CGI进程

对于这两个端口的数据传输，我们选择使用共享内存的方式，此时我们的数据采集端就作为了写入端，不断的往共享内存中写入数据，然后我们的CGI进程就不断的读取数据，这里目前不考虑原子性操作，于是没有写入信号量相关的代码限制

这里可以查看我之前写的关于共享内存的简单解析：https://acmer.blog.csdn.net/article/details/124708423

4.2 CGI进程数据传输到Web服务器

这里的话就是前端知识了，我们的CGI每次调用返回一个json数据，然后用ajax解析这个数据，并且通过jquery.js的动态制图绘制出机房五台电脑的温度变化

4.3 Web服务器传输给浏览器

这里的这一步就是Boa服务器帮我们完成的啦，这里只需要简单配置一下Boa服务器就好了，可以跟着我的这篇博客配置： https://acmer.blog.csdn.net/article/details/124388148

注意的是这里CGI路径并未配置，当然你也可以将你的cgi程序放在它默认的地方，但为了方便管理我们还是更改了一下cgi的读取位置，在最后一行的cgi-bin:ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/ 将后面的位置改为你项目存放cgi程序的位置，我这里的话是存放在/home/mangata/webpro/cgi

五、 采集端 5.1 思路

对于采集端，由于没有硬件的设备，我们这里就造一些随机数字就好了，于是我们只需要随机化五个机房的温度，并且写入共享内存中即可

5.2 代码

我们这里给这个命名为sim_catch.c

#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include "task.h"

static struct task_infos *tasks;
static char* task_lables[]={"机房1","机房2","机房3","机房4","机房5"};
//获取随机数据
void get_data(int num){
    tasks->num = num;//设置机房的数量
    for(int i = 0;i data[i].temp = (rand() % 9000 + 1000)/100.0;//将数据限制在(0,100.0)的浮点数据
        snprintf(tasks->data[i].label,sizeof(tasks->data[i].label),"%s",task_lables[i]);//像共享内存写入数据
    }
}
//数据打印在控制台显示
void show_data(){
    for(int i = 0;i num; ++i) {
        printf("the label is: %s,the temp is %.2lf\n",tasks->data[i].label,tasks->data[i].temp);
    }
}

int main()
{
    srand(time(NULL));//随机数播种
    tasks = (struct task_infos *)init_shm();//初始化共享内存
    while(1){//每隔2s获取一次温度数据
        get_data(5);
        sleep(2);
    }
    return 0;
}

六、CGI进程 6.1 思路

通过共享内存我们可以获取到sim_catch.c在共享内存中写入的温度数据，这里要构造成json字符串，我们需要借助一个外部的库，cJSON 通过这个文件我们就能很容易构造出我们想要的JSON字符串了，这里想要学习如何构造可以去网上搜一些资料，当然也可直接看项目中的readme文件，通过官方的几个小例子也可以快速学会（这里留个坑，后面有时间精读一下项目）

6.2 代码

然后我们就能构造出我们需要的JSON字符串了，这个CGI进程我们取名temo_cgi.c

//
// Created by Mangata on 2022/5/10.
//

#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include "task.h"
#include "cJSON.h"

static task_infos *tasks;

void send_json(){
    int num;
    char temp[32];
    char *string;
    cJSON *infos = NULL;
    cJSON  *info = NULL;
    cJSON *monitor = cJSON_CreateObject();

    if (monitor == NULL)
    {
        goto end;
    }
    num = tasks->num;
    cJSON_AddItemToObject(monitor,"num", cJSON_CreateNumber(num));

    infos = cJSON_CreateArray();
    if(infos == NULL){
        goto end;
    }
    cJSON_AddItemToObject(monitor,"data",infos);
    for(int i = 0;i data[i].label));
        snprintf(temp,sizeof temp,"%.2lf",tasks->data[i].temp);
        cJSON_AddItemToObject(info,"temp", cJSON_CreateString(temp));
    }
    string = cJSON_Print(monitor);
    if (string == NULL)
    {
        fprintf(stderr, "Failed to print monitor.\n");
    } else {
        printf("%s",string);
    }
    free(string);
end:
    cJSON_Delete(monitor);
    return;
}

int main()
{
    printf("Content-Type:text/html;charset=utf-8\r\n");
    printf("\r\n");
    tasks = (task_infos*)init_shm();
    if(tasks == NULL) {
        return -1;
    }
    send_json();
    return 0;
}

七、Web界面 7.1 思路

这里使用了bootstrap 框架，简单绘制了一下，只用到了几个控件，就没有什么好讲的，中间有一些注释的语句，那些是另一种刷新方式，手动刷新，没有使用定时器，另外界面的右侧，嵌入了一个在线空调（虽然感觉没什么用）

7.2 代码

DOCTYPE html>


    
    
    
    Home
    
    
    
    



    
        
        
            
                Toggle navigation
                
                
                
            
            xxx机房监控
        

        
        
            
                温度监控(current)
                机房电脑

            


        
    










































    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));
    let data = [];
    for (let i = 0; i