物联网设备接入系统后如何查看硬件实时数据?

要在软件中实时查看硬件设备的信息，通常需要结合前后端技术来实现。以下是设计思路和实现步骤：

1. 系统架构设计

实时查看硬件设备信息的系统通常采用以下架构：

数据采集层: 硬件设备通过传感器采集数据，发送到InfluxDB。
数据存储层: InfluxDB存储设备的历史和实时数据。
后端服务层: 提供API接口，从InfluxDB查询数据并返回给前端。
前端展示层: 通过Web界面或移动端实时展示设备信息。
实时通信层: 使用WebSocket或Server-Sent Events (SSE)实现实时数据推送。

2. 实现步骤

(1) 数据采集与存储

硬件设备通过MQTT、HTTP或其他协议将数据发送到后端，后端将数据写入InfluxDB。可以参考前面的Java代码实现数据写入。

(2) 后端服务设计

后端需要提供API接口，用于查询设备的历史数据和实时数据。

API设计

查询历史数据: 返回设备在某个时间范围内的数据。

请求示例：GET /api/devices/{deviceId}/history?start=2023-10-01T00:00:00Z&end=2023-10-02T00:00:00Z

响应示例：

{
    "deviceId": "device_123",
    "data": [
        {"time": "2023-10-01T12:00:00Z", "temperature": 25.3, "humidity": 60.1},
        {"time": "2023-10-01T12:05:00Z", "temperature": 25.5, "humidity": 60.0}
    ]
}

查询实时数据: 返回设备的最新数据。

请求示例：GET /api/devices/{deviceId}/realtime

响应示例：

{
    "deviceId": "device_123",
    "time": "2023-10-01T12:10:00Z",
    "temperature": 25.4,
    "humidity": 60.2
}

后端代码示例（Spring Boot + InfluxDB）

import com.influxdb.client.InfluxDBClient;
import com.influxdb.client.InfluxDBClientFactory;
import com.influxdb.client.QueryApi;
import com.influxdb.query.FluxRecord;
import com.influxdb.query.FluxTable;
import org.springframework.web.bind.annotation.*;

import java.time.Instant;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/api/devices")
public class DeviceController {

    private final InfluxDBClient influxDBClient;

    public DeviceController() {
        // 初始化InfluxDB客户端
        this.influxDBClient = InfluxDBClientFactory.create("http://localhost:8086", "your-token".toCharArray(), "your-org", "your-bucket");
    }

    // 查询历史数据
    @GetMapping("/{deviceId}/history")
    public Map<String, Object> getHistoryData(
            @PathVariable String deviceId,
            @RequestParam String start,
            @RequestParam String end) {

        String fluxQuery = String.format("from(bucket: \"your-bucket\") " +
                "|> range(start: %s, stop: %s) " +
                "|> filter(fn: (r) => r._measurement == \"hardware_metrics\" and r.device_id == \"%s\")", start, end, deviceId);

        QueryApi queryApi = influxDBClient.getQueryApi();
        List<FluxTable> tables = queryApi.query(fluxQuery);

        List<Map<String, Object>> data = new ArrayList<>();
        for (FluxTable table : tables) {
            for (FluxRecord record : table.getRecords()) {
                Map<String, Object> point = new HashMap<>();
                point.put("time", record.getTime());
                point.put(record.getField(), record.getValue());
                data.add(point);
            }
        }

        Map<String, Object> response = new HashMap<>();
        response.put("deviceId", deviceId);
        response.put("data", data);
        return response;
    }

    // 查询实时数据
    @GetMapping("/{deviceId}/realtime")
    public Map<String, Object> getRealtimeData(@PathVariable String deviceId) {
        String fluxQuery = String.format("from(bucket: \"your-bucket\") " +
                "|> range(start: -1m) " + // 查询最近1分钟的数据
                "|> filter(fn: (r) => r._measurement == \"hardware_metrics\" and r.device_id == \"%s\") " +
                "|> last()", deviceId); // 获取最新的一条数据

        QueryApi queryApi = influxDBClient.getQueryApi();
        List<FluxTable> tables = queryApi.query(fluxQuery);

        Map<String, Object> response = new HashMap<>();
        if (!tables.isEmpty()) {
            FluxRecord record = tables.get(0).getRecords().get(0);
            response.put("deviceId", deviceId);
            response.put("time", record.getTime());
            response.put(record.getField(), record.getValue());
        }
        return response;
    }
}

(3) 前端实时展示

前端可以通过以下方式实现实时数据展示：

轮询（Polling）: 定期调用后端API获取最新数据（简单但不高效）。
WebSocket: 建立双向通信通道，后端主动推送数据到前端。
Server-Sent Events (SSE): 后端单向推送数据到前端。

WebSocket实现示例

后端（Spring Boot）:

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class WebSocketController {

    @MessageMapping("/device-data")
    @SendTo("/topic/device-data")
    public String sendDeviceData(String deviceId) {
        // 查询设备的最新数据并返回
        return "Device Data: " + deviceId;
    }
}

前端（JavaScript）:

const socket = new WebSocket('ws://localhost:8080/ws');
socket.onmessage = function(event) {
    const data = JSON.parse(event.data);
    console.log("Received data:", data);
    // 更新UI
};

SSE实现示例

后端（Spring Boot）:

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

@RestController
public class SSEController {

    @GetMapping("/sse/device-data/{deviceId}")
    public SseEmitter streamDeviceData(@PathVariable String deviceId) {
        SseEmitter emitter = new SseEmitter();
        // 模拟实时数据推送
        new Thread(() -> {
            try {
                while (true) {
                    String data = fetchDataFromInfluxDB(deviceId); // 从InfluxDB获取数据
                    emitter.send(data);
                    Thread.sleep(1000); // 每秒推送一次
                }
            } catch (Exception e) {
                emitter.completeWithError(e);
            }
        }).start();
        return emitter;
    }

    private String fetchDataFromInfluxDB(String deviceId) {
        // 查询InfluxDB并返回数据
        return "Device Data: " + deviceId;
    }
}

前端（JavaScript）:

const eventSource = new EventSource('/sse/device-data/device_123');
eventSource.onmessage = function(event) {
    const data = JSON.parse(event.data);
    console.log("Received data:", data);
    // 更新UI
};