ESP32实时曲线：用有界WebSocket流观察SHT40

// ---- main/stream_policy.h ----
/* SPDX-License-Identifier: MIT */
#pragma once
#include <stdint.h>
#include <stdbool.h>
#include <stdio.h>
#include <inttypes.h>
typedef struct {uint32_t sequence;int64_t at;int32_t temp_milli,rh_milli;bool valid;} Sample;
static inline bool sample_fresh(Sample s,int64_t now){return s.valid&&now>=s.at&&now-s.at<=6000;}
static inline int sample_json(char *p,size_t n,Sample s,int64_t now){
 if(sample_fresh(s,now)){
  int32_t rh=s.rh_milli<0?0:s.rh_milli>100000?100000:s.rh_milli;
  return snprintf(p,n,"{\"source\":\"esp32-sht40\",\"sequence\":%" PRIu32 ",\"uptime_ms\":%" PRIi64 ",\"valid\":true,\"temperature_c\":%.3f,\"humidity_percent\":%.3f}",s.sequence,s.at,s.temp_milli/1000.,rh/1000.);
 }
 return snprintf(p,n,"{\"source\":\"esp32-sht40\",\"sequence\":%" PRIu32 ",\"uptime_ms\":%" PRIi64 ",\"valid\":false,\"temperature_c\":null,\"humidity_percent\":null}",s.sequence,s.at);
}

// ---- main/main.c ----
/* SPDX-License-Identifier: MIT */
#include <stdio.h>
#include <string.h>
#include <stdatomic.h>
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "freertos/queue.h"
#include "esp_http_server.h"
#include "esp_timer.h"
#include "esp_log.h"
#include "net.h"
#include "stream_policy.h"
#include "sensirion_hal_idf.h"
#include "sensirion_i2c_hal.h"
#include "sht4x_i2c.h"
static const char *TAG="N09";
static QueueHandle_t latest;
static httpd_handle_t server;
static atomic_bool pending;
extern const unsigned char index_html_start[] asm("_binary_index_html_start");
extern const unsigned char index_html_end[] asm("_binary_index_html_end");
static esp_err_t page(httpd_req_t *req){httpd_resp_set_type(req,"text/html; charset=utf-8");httpd_resp_set_hdr(req,"Cache-Control","no-store");esp_err_t e=httpd_resp_send(req,(const char *)index_html_start,index_html_end-index_html_start-1);httpd_sess_trigger_close(req->handle,httpd_req_to_sockfd(req));return e;}
static esp_err_t websocket(httpd_req_t *req){
 if(req->method==HTTP_GET){size_t n=4;int fds[4];unsigned peers=0;if(httpd_get_client_list(req->handle,&n,fds)!=ESP_OK)return ESP_FAIL;for(size_t i=0;i<n;i++)if(fds[i]!=httpd_req_to_sockfd(req)&&httpd_ws_get_fd_info(req->handle,fds[i])==HTTPD_WS_CLIENT_WEBSOCKET)peers++;if(peers>=3)return ESP_FAIL;ESP_LOGI(TAG,"WS handshake fd=%d",httpd_req_to_sockfd(req));return ESP_OK;}
 httpd_ws_frame_t f={0};esp_err_t e=httpd_ws_recv_frame(req,&f,0);if(e!=ESP_OK)return e;
 /* This dashboard is server-to-client only. Bounded inbound consumption; no application writes. */
 if(f.len>64){httpd_sess_trigger_close(req->handle,httpd_req_to_sockfd(req));return ESP_FAIL;}
 uint8_t payload[65];f.payload=payload;e=httpd_ws_recv_frame(req,&f,64);
 if(e!=ESP_OK)return e;
 if(f.type==HTTPD_WS_TYPE_TEXT||f.type==HTTPD_WS_TYPE_BINARY){httpd_sess_trigger_close(req->handle,httpd_req_to_sockfd(req));return ESP_FAIL;}
 return ESP_OK;
}
static void send_latest(void *arg){
 (void)arg;Sample s;
 if(xQueueReceive(latest,&s,0)==pdTRUE){
  /* Dequeue BEFORE taking time: a producer on the other core can enqueue between statements. */
  int64_t now=esp_timer_get_time()/1000;char payload[256];int n=sample_json(payload,sizeof(payload),s,now);
  size_t count=4;int fd[4];
  if(n>0&&n<sizeof(payload)&&httpd_get_client_list(server,&count,fd)==ESP_OK){
   httpd_ws_frame_t f={.type=HTTPD_WS_TYPE_TEXT,.payload=(uint8_t *)payload,.len=n};
   for(size_t i=0;i<count;i++)if(httpd_ws_get_fd_info(server,fd[i])==HTTPD_WS_CLIENT_WEBSOCKET){
    /* Despite _async in the name this call sends synchronously here, in HTTPD context.
       Stack payload stays alive through return; no heap job/frame per client. */
    esp_err_t e=httpd_ws_send_frame_async(server,fd[i],&f);
    if(e!=ESP_OK){ESP_LOGW(TAG,"send fd=%d error=%s -> close requested",fd[i],esp_err_to_name(e));httpd_sess_trigger_close(server,fd[i]);}
   }
  }
 }
 atomic_store(&pending,false);
}
static void sampler(void *arg){
 (void)arg;sensirion_i2c_hal_init();sht4x_init(0x44);uint32_t sequence=0;
 for(;;){int32_t t=0,rh=0;int16_t e=demo_i2c_ready()?sht4x_measure_high_precision(&t,&rh):-1;
  Sample s={.sequence=++sequence,.at=esp_timer_get_time()/1000,.temp_milli=t,.rh_milli=rh,.valid=e==0};
  xQueueOverwrite(latest,&s);ESP_LOGI(TAG,"sample=%lu sensor=%d latest-only",(unsigned long)sequence,e);vTaskDelay(pdMS_TO_TICKS(2000));}
}
void app_main(void){
 latest=xQueueCreate(1,sizeof(Sample));if(!latest){ESP_LOGE(TAG,"queue allocation failed");return;}
 net_start();if(xTaskCreate(sampler,"sht40",4096,NULL,5,NULL)!=pdPASS){ESP_LOGE(TAG,"sampler allocation failed");return;}
 for(;;){
  if(!server&&net_online()){
   httpd_config_t cfg=HTTPD_DEFAULT_CONFIG();cfg.max_open_sockets=4;cfg.lru_purge_enable=false;cfg.recv_wait_timeout=1;cfg.send_wait_timeout=1;cfg.stack_size=6144;
   esp_err_t e=httpd_start(&server,&cfg);if(e==ESP_OK){
    httpd_uri_t root={.uri="/",.method=HTTP_GET,.handler=page};httpd_uri_t ws={.uri="/ws",.method=HTTP_GET,.handler=websocket,.is_websocket=true};
    ESP_ERROR_CHECK(httpd_register_uri_handler(server,&root));ESP_ERROR_CHECK(httpd_register_uri_handler(server,&ws));
    ESP_LOGI(TAG,"HTTP :80, at most 4 accepted sockets / 3 WS clients, trusted LAN only");
   }else{server=NULL;ESP_LOGW(TAG,"httpd_start=%s",esp_err_to_name(e));}
  }
  if(server&&!atomic_exchange(&pending,true)){
   esp_err_t e=httpd_queue_work(server,send_latest,NULL);
   if(e!=ESP_OK){atomic_store(&pending,false);ESP_LOGW(TAG,"work rejected; newest sample remains bounded");}
  }
  vTaskDelay(pdMS_TO_TICKS(2000));
 }
}

<!-- ---- main/index.html ---- -->
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SHT40 实时曲线</title><style>
:root{font-family:system-ui,sans-serif;color:#17324d;background:#edf4f8}body{max-width:960px;margin:auto;padding:20px}main{background:white;border-radius:16px;padding:20px}h1{font-size:clamp(24px,5vw,36px)}.status{min-height:3em}canvas{width:100%;height:280px;border:1px solid #a9bbcc;border-radius:8px}button{font:inherit;padding:12px 18px;min-height:44px;border:2px solid #1e5e9b;color:#174a77;background:white;border-radius:8px}button:focus-visible,a:focus-visible{outline:3px solid #aa5c00;outline-offset:3px}dl{display:flex;gap:24px;flex-wrap:wrap}dt{font-size:14px}dd{margin:0;font-size:22px}small{display:block;margin-top:20px;line-height:1.7}p{line-height:1.65}
</style><main><h1>SHT40 实时温度曲线</h1><p id="connection" class="status" role="status">等待连接…</p><dl><div><dt>温度</dt><dd id="temp">—</dd></div><div><dt>相对湿度</dt><dd id="rh">—</dd></div><div><dt>数据状态</dt><dd id="valid">未收到</dd></div></dl><canvas id="chart" width="900" height="280" role="img" aria-label="最近120个接收样本的温度曲线；缺失值留空。上方同时显示最新数值。"></canvas><p><button id="pause" type="button" aria-pressed="false">暂停绘图</button></p><small>最多保留120个样本；服务器每2秒采样，网络慢时跳过中间样本。曲线横轴是接收次序，不是等间隔历史记录。连接恢复后清除旧曲线；失效数据不填造数值。此页面没有历史补录。仅供你管理的可信局域网。</small><noscript>实时曲线需要JavaScript。可通过固件串口日志检查传感器与联网；本页没有无脚本伪实时数据。</noscript></main>
<script>
'use strict';
const CAPACITY=120, points=[], chart=document.getElementById('chart'), ctx=chart.getContext('2d');
const statusEl=document.getElementById('connection'), validEl=document.getElementById('valid');
let socket=null,retryTimer=null,retry=1000,paused=false,lastReceived=0,generation=0;
function draw(){
 ctx.clearRect(0,0,chart.width,chart.height);ctx.fillStyle='#17324d';ctx.font='16px system-ui';
 const values=points.filter(p=>p.t!==null).map(p=>p.t);
 if(!values.length){ctx.fillText('等待有效温度，缺失样本留空',32,50);return;}
 const lo=Math.floor(Math.min(...values))-1,hi=Math.ceil(Math.max(...values))+1;
 ctx.fillText(`${lo}–${hi} °C · 最近 ${points.length} 个接收样本`,24,26);
 ctx.strokeStyle='#1e5e9b';ctx.lineWidth=3;ctx.beginPath();let active=false;
 points.forEach((p,i)=>{if(p.t===null){active=false;return;}const x=24+i/(CAPACITY-1)*(chart.width-48),y=chart.height-30-(p.t-lo)/(hi-lo)*(chart.height-80);if(active)ctx.lineTo(x,y);else ctx.moveTo(x,y);active=true;});ctx.stroke();
}
function clearCurrent(label){validEl.textContent=label;document.getElementById('temp').textContent='—';document.getElementById('rh').textContent='—';}
function schedule(){if(retryTimer!==null)return;const delay=retry;retry=Math.min(retry*2,30000);statusEl.textContent=`连接中断；${delay/1000}秒后重试`;retryTimer=setTimeout(()=>{retryTimer=null;connect();},delay);}
function connect(){
 const own=++generation;points.length=0;lastReceived=0;clearCurrent('未收到');draw();
 const ws=new WebSocket(`${location.protocol==='https:'?'wss':'ws'}://${location.host}/ws`);socket=ws;
 ws.onopen=()=>{if(own!==generation)return;statusEl.textContent='WebSocket已连接，等待样本';};
 ws.onmessage=event=>{
  if(own!==generation||typeof event.data!=='string'||event.data.length>256)return;
  let p;try{p=JSON.parse(event.data);}catch{return;}
  if(!p||!['esp32-sht40','host-fixture'].includes(p.source)||!Number.isInteger(p.sequence)||p.sequence<0||p.sequence>4294967295||typeof p.valid!=='boolean')return;
  const good=p.valid===true&&Number.isFinite(p.temperature_c)&&p.temperature_c>=-45&&p.temperature_c<=130&&Number.isFinite(p.humidity_percent)&&p.humidity_percent>=0&&p.humidity_percent<=100;
  if(p.valid&&!good)return;
  lastReceived=performance.now();retry=1000;statusEl.textContent=`${p.source==='host-fixture'?'主机合成夹具':'ESP32 SHT40'} · 收到序号 ${p.sequence}`;
  points.push({t:good?p.temperature_c:null});if(points.length>CAPACITY)points.shift();
  if(good){validEl.textContent='有效接收';document.getElementById('temp').textContent=p.temperature_c.toFixed(2)+' °C';document.getElementById('rh').textContent=p.humidity_percent.toFixed(2)+' %';}else clearCurrent('传感器失效/超龄');
  if(!paused)draw();
 };
 ws.onclose=()=>{if(own!==generation)return;clearCurrent('连接中断');schedule();};
 ws.onerror=()=>{if(own===generation)ws.close();};
}
document.getElementById('pause').onclick=e=>{paused=!paused;e.currentTarget.setAttribute('aria-pressed',String(paused));e.currentTarget.textContent=paused?'继续绘图':'暂停绘图';if(!paused)draw();};
setInterval(()=>{if(lastReceived&&performance.now()-lastReceived>6000)clearCurrent('超过6秒无新样本');},1000);
window.addEventListener('pagehide',()=>{
 generation++;if(retryTimer!==null){clearTimeout(retryTimer);retryTimer=null;}
 const previous=socket;socket=null;previous?.close();lastReceived=0;points.length=0;
 clearCurrent('页面已暂停连接');statusEl.textContent='页面已暂停连接';draw();
});
window.addEventListener('pageshow',event=>{if(event.persisted){retry=1000;connect();}});
connect();draw();
</script></html>