如何在前端JavaScript（Next.js）中操作Raspberry Pi GPIO读取PIR传感器

先给明确结论：纯浏览器环境的前端JS（不含后端）完全无法直接操作树莓派的GPIO引脚——浏览器的安全沙箱机制会彻底阻止前端代码触碰底层硬件，这是浏览器的核心安全设计，没有绕过的可能。

但结合你使用的Next.js框架，有两个符合你“不拆分应用”需求的可行方案，下面详细说明：

方案1：利用Next.js API Routes整合Python脚本 #

Next.js的API Routes运行在Node.js后端环境，你可以在这里调用Python脚本读取PIR数据，前端页面通过fetch请求这个接口获取数据，所有代码都在同一个Next.js项目里，无需拆分独立应用：

1. 编写Python脚本read_pir.py（使用RPi.GPIO库读取PIR状态）：

import RPi.GPIO as GPIO
import sys

PIR_PIN = 17  # 替换为你实际连接的引脚
GPIO.setmode(GPIO.BCM)
GPIO.setup(PIR_PIN, GPIO.IN)

try:
    # 输出1表示检测到运动，0表示无运动
    print("1" if GPIO.input(PIR_PIN) else "0")
finally:
    GPIO.cleanup()

2. 在Next.js项目的pages/api目录下创建pir.js：

import { exec } from 'child_process';
import { promisify } from 'util';

const execPromise = promisify(exec);

export default async function handler(req, res) {
  try {
    const { stdout } = await execPromise('python3 read_pir.py');
    res.status(200).json({ motionDetected: stdout.trim() === '1' });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
}

3. 前端页面（比如pages/index.js）调用该API获取数据：

import { useState, useEffect } from 'react';

export default function Home() {
  const [motionDetected, setMotionDetected] = useState(false);

  const checkPIRStatus = async () => {
    const res = await fetch('/api/pir');
    const data = await res.json();
    setMotionDetected(data.motionDetected);
  };

  // 每秒检测一次PIR状态
  useEffect(() => {
    const interval = setInterval(checkPIRStatus, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h1>PIR传感器状态：{motionDetected ? '检测到运动' : '无运动'}</h1>
    </div>
  );
}

方案2：使用Web GPIO API（纯前端，但限制严格） #

Chrome/Edge浏览器提供了实验性的Web GPIO API，允许前端直接访问GPIO，但需要满足以下条件：

• 使用Chrome 89+或Edge 89+版本，开启chrome://flags/#enable-experimental-web-platform-features实验标志
• 网页必须通过localhost或HTTPS访问（本地开发用localhost即可）
• 树莓派需给当前用户配置GPIO权限（执行sudo adduser $USER gpio后重启设备）

前端代码示例：

async function initPIRSensor() {
  if (!('GPIO' in navigator)) {
    alert('当前浏览器不支持Web GPIO API');
    return;
  }

  const gpio = await navigator.gpio.requestAccess({ permission: 'readwrite' });
  const pirPin = await gpio.openPin(17, { direction: 'in' });

  // 每秒读取一次PIR状态
  setInterval(async () => {
    const value = await pirPin.read();
    console.log('PIR状态:', value ? '检测到运动' : '无运动');
  }, 1000);
}

// 页面加载时初始化传感器
initPIRSensor();

注意：该API为实验性特性，随时可能变更，兼容性极差，仅适合测试使用，不建议用于生产环境。

额外说明 #

你提到“无需Node.js方案”，但Next.js本身依赖Node.js运行，其API Routes也基于Node.js环境。如果完全脱离Node.js，只能选择Web GPIO API，但局限性极大。另外，无论使用哪种方案，都需要先在树莓派上安装RPi.GPIO库（执行pip install RPi.GPIO）。

内容的提问来源于stack exchange，提问作者Pexate