Next.js在智慧零售门店中的IoT数据可视化方案实战（一）

import { useFrame } from '@react-three/fiber'
import { RFIDDataContext } from '@/context/rfid-context'

/**
 * 智能货架组件
 * 用于显示和更新RFID智能货架的3D可视化状态
 * @param {Object} props - 组件属性
 * @param {string} props.shelfId - 货架唯一标识符
 * @returns {JSX.Element} 3D货架组元素
 */
function SmartShelf({ shelfId }) {
  const { inventory } = useContext(RFIDDataContext)
  const meshRef = useRef()
  
  // 实时更新商品位置
  useFrame(() => {
    // 过滤出当前货架的商品并更新对应槽位的颜色状态
    const items = inventory.filter(item => item.shelf === shelfId)
    items.forEach(item => {
      const slot = meshRef.current.getObjectByName(`slot_${item.position}`)
      if(slot) {
        slot.material.color = item.stock > 0 ? GREEN : RED 
      }
    })
  })

  // 渲染货架和20个商品槽位
  return (
    <group ref={meshRef}>
      <mesh geometry={shelfGeometry}>
        {[...Array(20)].map((_, i) => (
          <mesh 
            key={i}
            name={`slot_${i}`}
            position={[i % 5, Math.floor(i/5), 0]}
            geometry={itemGeometry}
          />
        ))}
    </group>
  )
}

/**
 * 获取静态属性数据，用于服务端渲染基础布局
 * @returns {Promise<Object>} 包含布局数据的props对象
 */
export async function getStaticProps() {
  // 静态生成基础布局
  const layout = await fetchDashboardLayout();
  return { props: { layout } };
}

/**
 * 实时仪表板组件，展示销售图表和客户密度热力图
 * @param {Object} layout - 从getStaticProps获取的初始布局数据
 * @returns {JSX.Element} 仪表板界面
 */
function RealtimeDashboard({ layout }) {
  // 客户端获取实时数据
  const [metrics, setMetrics] = useState(layout);
  
  // 建立WebSocket连接以接收实时指标数据更新
  useEffect(() => {
    const socket = io(process.env.NEXT_PUBLIC_WS_URL);
    socket.on('metrics', data => {
      setMetrics(prev => ({ ...prev, ...data }));
    });
    return () => socket.disconnect();
  }, []);

  return (
    <div className='grid grid-cols-4 gap-4'>
      <EChart option={salesChart(metrics.sales)} />
      <Heatmap data={metrics.customerDensity} />
    </div>
  );
}

const ShelfView = dynamic(
  () => import('@/components/ShelfView'),
  { 
    loading: () => <Skeleton />,
    ssr: false // 禁用三维组件的SSR
  }
)

// API路由实现
export default function handler(req, res) {
  res.setHeader('Content-Type', 'text/event-stream')
  res.setHeader('Cache-Control', 'no-cache')
  
  const sendData = setInterval(() => {
    const stock = getRealtimeStock()
    res.write(`data: ${JSON.stringify(stock)}\n\n`)
  }, 1000)
  
  req.on('close', () => clearInterval(sendData))
}

// 使用版本号控制数据状态
const useRealtimeData = (key) => {
  const [data, setData] = useState({ value: null, version: 0 })
  
  useEffect(() => {
    const socket = io(ENDPOINT)
    socket.on(key, (newData) => {
      setData(prev => {
        if(newData.version > prev.version) {
          return newData
        }
        return prev
      })
    })
  }, [key])
}

// 边缘节点数据聚合
export const config = {
  runtime: 'edge', // Vercel边缘函数
  regions: ['sin1'] // 靠近IoT设备的区域
}

export default async function (request) {
  // 使用Protobuf替代JSON解析
  const decoder = new TextDecoder()
  const data = await request.arrayBuffer()
  const msg = StockMessage.decode(new Uint8Array(data))
  
  // 写入全局缓存
  globalThis.deviceCache.set(msg.deviceId, msg)
}