PixelPilot: Instructions file for GitHub Copilot

UI/UX Real-time Features 2026

WebSockets (Socket.io, Pusher, native WebSocket API), Server-Sent Events (EventSource), live dashboards, collaborative editing (CRDTs), and real-time chat.

---

1. REAL-TIME DATA ARCHITECTURE

WebSockets (Two-way Communication)

Best for: Chat, collaborative editing, real-time gaming. Tools: Socket.io, Pusher, native WebSocket API.

Server-Sent Events (One-way Streaming)

Best for: Live dashboards, stock tickers, notification feeds. Tools: EventSource API.

Free Tier Recommendations (2026)

• Pusher: 200k messages/day (Great for starters).
• Supabase Realtime: Included in free tier (Postgres-backed).
• Ably: Generous free tier with high reliability.

---

2. LIVE DASHBOARD (React + WebSocket)

import React, { useEffect, useState } from 'react';
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip } from 'recharts';

export function LiveChart() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Native WebSocket Example
    const ws = new WebSocket('wss://api.example.com/realtime');

    ws.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      setData(prev => [...prev.slice(-19), newData]); // Keep last 20 points
    };

    return () => ws.close();
  }, []);

  return (
    <div className="kpi-card">
      <h3 className="kpi-card__title">Live Traffic</h3>
      <div style={{ height: 200, width: '100%' }}>
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data}>
            <Line type="monotone" dataKey="value" stroke="var(--accent)" strokeWidth={2} dot={false} isAnimationActive={false} />
            <XAxis dataKey="time" hide />
            <YAxis hide domain={['auto', 'auto']} />
            <Tooltip />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}

---

3. REAL-TIME CHAT (Minimal Socket.io Example)

import { io } from "socket.io-client";

const socket = io("https://chat-server.example.com");

// Sending a message
function sendMessage(msg) {
  socket.emit("chat message", {
    text: msg,
    user: "User123",
    timestamp: new Date().toISOString()
  });
}

// Receiving a message
socket.on("chat message", (msg) => {
  displayMessage(msg); // Update UI
  swal.toast(`New message from ${msg.user}`, 'info');
});