HTTPS环境下JS实现本地ESP32设备检测与重定向方案求助

关于公网IP对比方案的可行性 #

对比用户与ESP32的公网IP只能作为辅助判断依据，无法保证准确性：

• 如果同一内网下的设备通过不同公网出口访问服务器（比如家庭双宽带），公网IP会不一致，导致误判。
• ESP32的公网IP实际是其所在路由器的NAT地址，多个内网设备共享同一公网IP，无法区分是否在同一内网。

因此不建议将其作为核心判断逻辑，以下是更可靠的方案：

方案1：Node.js服务器代理本地请求（推荐） #

利用后端不受浏览器混合内容限制的特性，让Node.js服务器代为检测ESP32是否可达，流程如下：

1. ESP32通过WebSocket连接服务器时，上报自身的内网IP/mDNS地址（比如http://esp32.local:80）和设备唯一标识。
2. 用户打开PWA时，向Node.js服务器发起检测请求（比如GET /check-local-device），携带用户标识或设备绑定信息。
3. 服务器收到请求后，代为访问ESP32上报的内网地址（比如请求/ping接口），根据返回结果判断设备是否在本地网络。
4. 服务器将检测结果和ESP32本地地址返回给PWA，PWA提示用户是否跳转至本地页面。

代码示例（Node.js + Express） #

const express = require('express');
const http = require('http');
const app = express();

// 存储ESP32设备信息（生产环境建议用数据库）
const esp32Devices = new Map();

// 处理ESP32 WebSocket连接时的地址上报
// 假设WebSocket连接时，ESP32发送{ deviceId: 'xxx', localUrl: 'http://esp32.local:80' }
function handleEsp32WebSocketMessage(message) {
  const { deviceId, localUrl } = JSON.parse(message);
  esp32Devices.set(deviceId, { localUrl });
}

// 检测本地设备的路由
app.get('/check-local-device', (req, res) => {
  const { deviceId } = req.query;
  const device = esp32Devices.get(deviceId);
  if (!device) return res.json({ exists: false });

  // 服务器代为请求ESP32的ping接口
  const url = new URL(`${device.localUrl}/ping`);
  http.get(url, (espRes) => {
    res.json({ exists: espRes.statusCode === 200, localUrl: device.localUrl });
  }).on('error', () => {
    res.json({ exists: false });
  });
});

// 启动服务器
app.listen(3000);

优势 #

• 完全规避浏览器混合内容策略限制，PWA仅与HTTPS服务器通信。
• 支持ESP32动态DHCP场景，因为地址由设备主动上报。

方案2：轻量化ESP32 HTTPS支持 #

如果ESP32资源允许，可使用ESP-IDF自带的esp-tls库搭建极简HTTPS服务器，使用自签名证书：

1. 生成自签名SSL证书（可通过openssl命令生成）。
2. 在ESP32代码中集成esp-tls，加载证书并启动HTTPS服务器。
3. PWA直接访问ESP32的HTTPS地址，无混合内容问题（用户首次访问需手动信任证书）。

优势 #

• 无需依赖Node.js服务器，直接实现本地访问。
• 从根源解决混合内容限制问题。

方案3：本地访问引导提示 #

结合方案1的检测结果，当确认设备在本地时，PWA提示用户手动跳转至ESP32的HTTP页面：

// PWA端代码
async function checkLocalDevice() {
  const res = await fetch('/check-local-device?deviceId=xxx');
  const { exists, localUrl } = await res.json();
  if (exists) {
    if (confirm('检测到本地设备，是否切换至本地访问以提升速度？')) {
      window.open(localUrl, '_blank');
    }
  }
}

虽然浏览器会提示HTTP页面不安全，但本地使用场景下用户可接受该风险。

内容的提问来源于stack exchange，提问作者Dr.Random