Traccar Websockets connection

Hello,
Now am using demo4 server apis to get positions data from it now i want to use websockets for live update but connection failed "ws://demo4.traccar.org/api/socket" am running the project on localhost 3000 can the problem be that am using two different hosts or there is an another reason and here is the ws code :

const wsEndpoint = 'ws://demo4.traccar.org/api/socket'; 

export default function Positions() {
  const [positions, setPositions] = useState([]);
  const { data, isLoading } = useGetAllPositionsQuery(); // Keep if using Redux

  useEffect(() => {
    // Handle initial data fetch from Redux (if applicable)
    if (data) {
      setPositions(data);
    }

    if (wsEndpoint) { 
      const ws = new WebSocket(wsEndpoint);

      ws.onopen = () => {
        console.log('WebSocket connected');
      };

      ws.onmessage = (event) => {
        const newPosition = JSON.parse(event.data);
        // Update state here
        setPositions((prevPositions) => [...prevPositions, newPosition]);
      };

      ws.onerror = (error) => {
        console.error('WebSocket error:', error);
      };

      ws.onclose = () => {
        console.log('WebSocket closed');
      };

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

How do you expect this to work with the cross-origin restrictions in browsers?

How can I handle this problem