Upgrade order display from polling to WebSockets

[Copilot]

The order marking screen and customer-facing order progress screen used polling (setInterval at 5-11s) to fetch new orders. This introduces latency and unnecessary server load.

Changes

Backend (Django Channels)

• Added channels and daphne to requirements
• Configured ASGI application with WebSocket routing in pavilion/asgi.py
• Created WebSocket consumers in pos_server/consumers.py:
  • OrderConsumer at /ws/orders/ for kitchen/bar order marking
  • OrderProgressConsumer at /ws/order-progress/ for customer display
• Added Django signals in pos_server/signals.py to broadcast order changes on save/delete

Frontend

• Replaced polling with WebSocket connections in both JS files
• Added automatic reconnection with exponential backoff
• Handle initial_orders, order_created, order_updated, order_deleted events

Example

# Signal broadcasts order updates to all connected clients
@receiver(post_save, sender=Order)
def order_saved(sender, instance, created, **kwargs):
    update_type = 'order_created' if created else 'order_updated'
    broadcast_order_update(instance, update_type)

// Client receives real-time updates
ordersSocket.onmessage = function(e) {
    const data = JSON.parse(e.data);
    if (data.type === 'order_created') {
        appendOrder(data.order);
    }
};

Uses InMemoryChannelLayer for simplicity; swap to Redis for horizontal scaling.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com//advisories
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Can you upgrade the order display flow from polling for new orders to using websockets and adding new orders to the screen whenever they appear in the system. Make sure both the order marking screen and the customer facing order progress screen are upgraded.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

To eliminate the XSS vulnerability, any untrusted, user-supplied value written to the DOM in an HTML context must be properly escaped or sanitized. The best fix here is to encode all potentially untrusted data (such as data.name and data.special_instructions) before interpolating them into HTML. The correct encoding is HTML-entity encoding, which prevents injected HTML or JavaScript—even if the supplied strings contain special characters.

The fix should provide a robust escapeHtml function—using a well-tested implementation or a library such as he (if allowed in context)—and use it for all variables interpolated into innerHTML. Apply this escaping in the appendOrder function before template construction, replacing all instances of direct interpolation for user-controlled data.

If using libraries is allowed, using a widely-recognized module like he is safest. If not, provide a minimal but complete escape function at the top of the file or within the relevant scope, and use it for each instance of interpolating untrusted values.

Changes to be made (in pos_server/static/pos_server/kitchen-bar.js):

• Add an escapeHtml function.
• Wrap all potentially tainted interpolations (data.name, data.special_instructions, data.start_time, etc.) with escapeHtml when constructing HTML in appendOrder.

---

To fix the DOM-based XSS vulnerability, we must ensure that any user-controlled text inserted into HTML is properly escaped. Since we're using .innerHTML, content will be parsed as HTML. The ideal approach is to set the element's text content (using .textContent) instead of HTML whenever possible. This completely avoids issues with HTML injection.

In this snippet, we are populating a list item with a line like "2 X Sandwich". Both dish.quantity and dish.name can be passed as arguments to a function that sets textContent, safely displaying the values as raw text, not HTML.

Specifically:

• Find the line item.innerHTML = ${dish.quantity} X ${dish.name}; and replace it with:

  item.textContent = `${dish.quantity} X ${dish.name}`;
  

• This can be done in file pos_server/static/pos_server/kitchen-bar.js inside the block for appendOrder.

No external libraries or dependencies are required.

---