React Native餐厅端实时获取客户订单的方案优化咨询：每秒轮询API的问题与替代方案

Hey there! Let's walk through your questions step by step—your current approach works, but there are definitely better ways to handle real-time order updates without the jank and excessive server load.

Is Your Current 1-Second Polling Optimal? #

Short answer: No. Here's why:

• Client-side lag: Firing a network request every second, plus parsing JSON and updating state, keeps the React Native JS thread constantly busy. This is exactly what's causing your app to feel卡顿.
• Unnecessary server load: Even when there are no new orders, you're hitting your Express API every single second. Multiply that by multiple restaurant clients, and your database and server will take unnecessary performance hits.
• Wasted bandwidth: Most of these requests will return identical data to the previous one—total resource waste.

Alternative Solutions for Lag-Free Real-Time Updates #

Here are the best fixes that address both client卡顿 and server overload:

1. WebSockets (Bi-Directional Communication) #

WebSockets create a persistent, two-way connection between the client and server. When a new order is added to the database, your server can immediately push that order to the relevant restaurant client—no polling required at all.

Example Setup:

Server-side (Express with ws library):

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

// Map connected clients to their restaurant IDs
wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    const { restaurantId } = JSON.parse(message);
    ws.restaurantId = restaurantId;
  });

  // Call this function when a new order is saved to your DB
  const pushNewOrder = (newOrder) => {
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN && client.restaurantId === newOrder.restaurantId) {
        client.send(JSON.stringify({ type: 'NEW_ORDER', data: newOrder }));
      }
    });
  };
});

Client-side (React Native):

import { useEffect, useState } from 'react';

const RestaurantOrders = ({ id }) => {
  const [currentOrders, setCurrentOrders] = useState([]);
  let ws = null;

  useEffect(() => {
    // Initialize WebSocket connection
    ws = new WebSocket('ws://your-server-url:8080');
    
    // Send restaurant ID to server on connect
    ws.onopen = () => {
      ws.send(JSON.stringify({ restaurantId: id }));
    };

    // Listen for new orders from server
    ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      if (message.type === 'NEW_ORDER') {
        // Add new order to existing list (or replace if full refresh is needed)
        setCurrentOrders(prev => [...prev, message.data]);
      }
    };

    // Cleanup connection on component unmount
    return () => {
      if (ws) ws.close();
    };
  }, [id]);

  // ... rest of your component rendering logic
};

2. Server-Sent Events (SSE) - Lightweight Unidirectional Push #

If you only need the server to send updates to the client (no client-to-server messages beyond initial setup), SSE is a simpler, lighter alternative to WebSockets. It uses standard HTTP and works natively in most environments.

Example Setup:

Server-side (Express):

app.get('/streamOrders/:id', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const restaurantId = req.params.id;

  // Send initial active orders first
  const sendInitialOrders = async () => {
    const orders = await getActiveOrdersFromDB(restaurantId); // Your existing DB query
    res.write(`data: ${JSON.stringify({ type: 'INITIAL', data: orders })}\n\n`);
  };
  sendInitialOrders();

  // Listen for new order events (use a DB trigger or event emitter)
  const orderListener = (newOrder) => {
    if (newOrder.restaurantId === restaurantId) {
      res.write(`data: ${JSON.stringify({ type: 'NEW', data: newOrder })}\n\n`);
    }
  };
  orderEventEmitter.on('newOrder', orderListener);

  // Cleanup when client disconnects
  res.on('close', () => {
    orderEventEmitter.off('newOrder', orderListener);
    res.end();
  });
});

Client-side (React Native):

import { useEffect, useState } from 'react';

const RestaurantOrders = ({ id }) => {
  const [currentOrders, setCurrentOrders] = useState([]);
  let eventSource = null;

  useEffect(() => {
    eventSource = new EventSource(`http://your-server-url/streamOrders/${id}`);

    eventSource.onmessage = (event) => {
      const message = JSON.parse(event.data);
      if (message.type === 'INITIAL') {
        setCurrentOrders(message.data);
      } else if (message.type === 'NEW') {
        setCurrentOrders(prev => [...prev, message.data]);
      }
    };

    return () => {
      if (eventSource) eventSource.close();
    };
  }, [id]);

  // ... rest of your component
};

3. Long Polling (Improved Polling) #

If you can't implement WebSockets/SSE right away, long polling is a better middle ground than 1-second polling. The client sends a request, and the server holds it open until there's new data or a timeout—then the client immediately sends another request. This cuts down on unnecessary requests drastically.

Example Client-Side Adjustment:

const loadData = async () => {
  try {
    const response = await fetch(`${API_URL}/getActiveOrders?ID=${id}`);
    const result = await response.json();
    
    if (result.auth === true) {
      setCurrentOrders(prev => {
        // Only update if data changed to avoid unnecessary re-renders
        if (JSON.stringify(prev) !== JSON.stringify(result.data)) {
          return result.data;
        }
        return prev;
      });
    }
    // Immediately send next request after this one completes
    loadData();
  } catch (error) {
    // Retry after a short delay if there's an error
    setTimeout(loadData, 5000);
  }
};

useEffect(() => {
  loadData();
  return () => {
    // Add abort controller logic here to cancel in-flight requests if needed
  };
}, [id]);

Performance with Large Datasets #

Your current polling approach will struggle with large datasets:

• Every request fetches all active orders, meaning more data transferred over the network, slower JSON parsing on the client, and heavier state updates that trigger more re-renders.
• Frequent polling amplifies this issue—each 1-second request will take longer to complete, leading to even more lag.

With WebSockets/SSE, you can optimize this by:

• Pushing only new/updated orders instead of the entire list. The client just appends or updates existing entries, which is much lighter.
• Sending incremental updates (e.g., only status changes for existing orders) instead of full order objects.
• For initial load, you can still fetch the full list once, then use real-time pushes for updates.

On the React Native side, optimize component rendering:

• Use React.memo for child components that display orders to prevent unnecessary re-renders.
• Use useMemo and useCallback to memoize computed values and event handlers.

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