черновик уведомления вебсокет

gistfile1.txt

import { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    const ws = new WebSocket('ws://your-server.com/orders');
    ws.onmessage = (event) => {
      const newOrder = JSON.parse(event.data);
      setOrders((prev) => [...prev, newOrder]);
    };
    ws.onclose = () => console.log('WebSocket закрыт');
    return () => ws.close();
  }, []);

  return (
    <div className="container">
      <h1>Новые заказы</h1>
      <ul>
        {orders.map((order, index) => (
          <li key={index}>{order.product} - {order.price}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;






.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}