Skip to main content

​
Overview

The OrderRealtime interface provides a contract for establishing and managing real-time connections to receive order updates. It works in conjunction with OrderEvents to handle create and update notifications. Source: application/order/order-realtime.ts, application/order/order-events.ts

​
Interface Definitions

​
OrderRealtime

interface OrderRealtime {
  connect(events: OrderEvents): void;
  disconnect(): void;
}

​
OrderEvents

type OrderEvents = {
  onCreated?: (order: OrderListDto) => void;
  onUpdated?: (order: OrderListDto) => void;
};

​
Methods

​
connect()

Establishes a real-time connection and registers event handlers for order notifications. 
connect(events: OrderEvents): void

​
Parameters

​
events
OrderEvents
required
An object containing callback functions for order events
​
events.onCreated
function
Optional callback invoked when a new order is createdSignature: (order: OrderListDto) => voidParameters:
  • order: The newly created order data
​
events.onUpdated
function
Optional callback invoked when an existing order is updatedSignature: (order: OrderListDto) => voidParameters:
  • order: The updated order data

​
Returns

​
void
void
This method does not return a value

​
Example

const orderRealtime = getOrderRealtimeInstance();

orderRealtime.connect({
  onCreated: (order) => {
    console.log('New order received:', order.displayNumber);
    console.log('Status:', order.status);
    console.log('Priority:', order.priority);
  },
  onUpdated: (order) => {
    console.log('Order updated:', order.displayNumber);
    console.log('New status:', order.status);
  }
});
You can register only one of the event handlers if you don’t need both. Both onCreated and onUpdated are optional.

​
disconnect()

Closes the real-time connection and stops receiving order events. 
disconnect(): void

​
Returns

​
void
void
This method does not return a value

​
Example

// Clean up when component unmounts
useEffect(() => {
  orderRealtime.connect({
    onCreated: handleNewOrder,
    onUpdated: handleOrderUpdate
  });
  
  return () => {
    orderRealtime.disconnect();
  };
}, []);
Always call disconnect() when you no longer need real-time updates to prevent memory leaks and unnecessary network traffic.

​
OrderListDto Structure

Both event callbacks receive an OrderListDto object with the following structure:
​
id
string
required
Unique identifier for the order
​
partnerName
string
Name of the partner/restaurant
​
partnerImage
string
URL to the partner’s image
​
displayNumber
string
required
Human-readable order number for display
​
status
OrderStatus
required
Current status of the order (RECEIVED, CONFIRMED, PREPARING, READY, PICKED_UP, DELIVERED, CANCELLED)
​
priority
OrderPriority
required
Order priority level (NORMAL or HIGH)
​
activeTimer
string
Active timer value for the order
​
courierName
string
Name of the assigned courier

​
Usage Patterns

​
Basic Connection

const realtime = orderRealtimeService;

realtime.connect({
  onCreated: (order) => {
    addOrderToBoard(order);
  },
  onUpdated: (order) => {
    updateOrderOnBoard(order);
  }
});

​
React Hook Integration

function OrderBoard() {
  const [orders, setOrders] = useState<OrderListDto[]>([]);
  
  useEffect(() => {
    const realtime = getOrderRealtime();
    
    realtime.connect({
      onCreated: (newOrder) => {
        setOrders(prev => [...prev, newOrder]);
      },
      onUpdated: (updatedOrder) => {
        setOrders(prev => 
          prev.map(order => 
            order.id === updatedOrder.id ? updatedOrder : order
          )
        );
      }
    });
    
    return () => realtime.disconnect();
  }, []);
  
  return <div>{/* Render orders */}</div>;
}

​
Handling Only Updates

// Subscribe only to updates, ignore new orders
orderRealtime.connect({
  onUpdated: (order) => {
    console.log(`Order ${order.displayNumber} updated to ${order.status}`);
  }
});

​
Implementation Notes

The OrderRealtime interface does not specify the underlying transport mechanism (WebSocket, SSE, polling, etc.). The implementation determines the actual real-time technology used.
Event handlers should be lightweight and non-blocking. For heavy processing, consider using a message queue or worker pattern.

​
Error Handling

Implementations should handle connection errors gracefully: 
try {
  orderRealtime.connect({
    onCreated: handleNewOrder,
    onUpdated: handleOrderUpdate
  });
} catch (error) {
  console.error('Failed to establish real-time connection:', error);
  // Implement fallback strategy (polling, retry, etc.)
}

Build docs developers (and LLMs) love

Get started for freeTalk to us