React Native外卖项目：餐厅端订单实时更新及处理功能实现咨询

针对你餐厅端实时获取新订单、处理接单拒单的需求，给你几个高效的实现方案，比固定间隔轮询靠谱多了：

1. WebSocket 实时推送（最优方案） #

这是效率最高的方式，不用客户端主动轮询，服务器有新订单直接推给餐厅端。

• 后端需要搭建WebSocket服务（比如用Node.js的socket.io），监听数据库的订单新增事件——可以通过数据库触发器实现，或者在插入订单的接口里主动触发推送逻辑。
• React Native端用socket.io-client连接服务，代码示例：

import { useEffect, useState } from 'react';
import io from 'socket.io-client';

const RestaurantHome = () => {
  const [orders, setOrders] = useState([]);
  let socket;

  useEffect(() => {
    // 连接WebSocket服务器
    socket = io('你的服务器地址');
    
    // 监听新订单推送事件
    socket.on('newOrder', (newOrder) => {
      // 把新订单加到列表最前面
      setOrders(prev => [newOrder, ...prev]);
    });

    // 监听订单状态更新（接单/拒单后同步状态）
    socket.on('orderStatusUpdated', (updatedOrder) => {
      setOrders(prev => prev.map(order => 
        order.id === updatedOrder.id ? updatedOrder : order
      ));
    });

    // 组件卸载时断开连接，避免内存泄漏
    return () => {
      socket.disconnect();
    };
  }, []);

  // 接单逻辑
  const acceptOrder = (orderId) => {
    socket.emit('acceptOrder', { orderId });
    // 也可以同时调用HTTP接口更新数据库，确保数据持久化
  };

  // 拒单逻辑
  const rejectOrder = (orderId) => {
    socket.emit('rejectOrder', { orderId });
  };

  // 渲染订单列表...
};

• 后端收到acceptOrder或rejectOrder事件后，更新数据库中对应订单的状态，再通过WebSocket推送给相关客户端（比如用户端也能同步订单状态）。

2. 实时数据库（快速开发方案） #

如果你用的是Firebase实时数据库、Supabase这类自带实时功能的服务，直接用官方监听API就能实现自动更新：

import { useEffect, useState } from 'react';
import { database } from './firebaseConfig'; // 你的Firebase配置文件

const RestaurantHome = () => {
  const [orders, setOrders] = useState([]);
  const restaurantId = '你的餐厅ID';

  useEffect(() => {
    // 监听当前餐厅的未处理订单节点
    const ordersRef = database.ref(`restaurants/${restaurantId}/orders`)
      .orderByChild('status')
      .equalTo('pending');
    
    // onSnapshot会在数据新增/修改时自动触发回调
    const unsubscribe = ordersRef.on('value', (snapshot) => {
      const ordersData = snapshot.val();
      if (ordersData) {
        // 把对象转成数组方便渲染
        const ordersList = Object.values(ordersData);
        setOrders(ordersList);
      }
    });

    // 组件卸载时取消监听
    return () => unsubscribe();
  }, []);

  // 接单：直接更新数据库中订单的状态
  const acceptOrder = (orderId) => {
    database.ref(`restaurants/${restaurantId}/orders/${orderId}`)
      .update({ status: 'accepted' });
  };

  // 拒单逻辑同理
  const rejectOrder = (orderId) => {
    database.ref(`restaurants/${restaurantId}/orders/${orderId}`)
      .update({ status: 'rejected' });
  };

  // 渲染订单...
};

这种方式不用自己搭WebSocket，官方已经封装好了实时监听逻辑，适合快速迭代开发。

3. 智能轮询（过渡方案） #

如果暂时不想搞WebSocket或实时数据库，可以优化轮询逻辑，比固定间隔的setInterval更高效：

import { useEffect, useState } from 'react';

const RestaurantHome = () => {
  const [orders, setOrders] = useState([]);
  const [pollInterval, setPollInterval] = useState(5000); // 初始5秒轮询一次

  const fetchOrders = async () => {
    try {
      const res = await fetch('你的订单列表API');
      const newOrders = await res.json();
      
      // 有新订单时缩短轮询间隔，空闲时恢复长间隔
      if (newOrders.length > orders.length) {
        setPollInterval(1000);
      } else {
        setPollInterval(5000);
      }
      
      setOrders(newOrders);
    } catch (err) {
      console.error('获取订单失败:', err);
    }
  };

  useEffect(() => {
    fetchOrders(); // 页面加载时先获取一次
    const intervalId = setInterval(fetchOrders, pollInterval);
    
    return () => clearInterval(intervalId);
  }, [pollInterval]);

  // 接单后手动触发一次更新，不用等轮询
  const acceptOrder = async (orderId) => {
    await fetch(`你的接单API/${orderId}`, { method: 'POST' });
    fetchOrders();
  };

  // 拒单逻辑同理...
};

这种方式在有新订单时更频繁查询，没新订单时降低频率，比固定轮询节省资源。

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