Асинхронные события в порядке очереди

const useNewGroupCall = async (regime, setRegime, connect, status, state, httpServer) => {
    const [con, setCon] = useState(0)
    if( regime !== REGIME_STATUS.CREATE_CALL ) return
        if(con < 1)
        if( !state.idMe || status !== SOCKET_STATUS_TYPE.CONNECTED ) {
            setCon( 1 )
            connect(httpServer)
            return
        }
        if( !state.idMe || status !== SOCKET_STATUS_TYPE.CONNECTED ) return
        if(con < 2) {
            setCon( 2 )
            const url = "http://" + httpServer + `crt/call-group`
            const data = {idMe: state.idMe, title: state.title, name: state.name}
            await httpRequest(url, "POST", data, null)
        }
        if(state.idGroupCall) setRegime( REGIME_STATUS.STOPPED )
    return
}

import React from 'react';
import { connection, STATUS } from './connection';
import eventEmitter from './eventEmitter';
import call from './call';
function App() {
  // чтобы считать сколько неудачных попыток соедениться было
  const prevCon = React.useRef<{ host: string; count: number }>({
    host: '',
    count: 1,
  });
 
  const abort = React.useRef<(() => void) | undefined>();
  const [con, seCon] = React.useState({ status: STATUS.DISCONNECTED });
  const [callState, setCallState] = React.useState(false);
  const [host, setHost] = React.useState('');
 
  React.useEffect(() => {
    eventEmitter.on('connection', seCon);
  }, []);
  React.useEffect(() => {
    eventEmitter.on('call', setCallState);
  }, []);
 
  React.useEffect(() => {
    if (con.status == STATUS.INPROGRESS) {
      if (prevCon.current.host === host) prevCon.current.count++;
      else prevCon.current.count = 1;
      prevCon.current.host = host;
    } else {
      prevCon.current.count = 1;
    }
  }, [con, host]);
 
  const handlerCall = () => {
    setCallState(false);
    abort.current = call(host);
  };
  const handlerAbortCall = () => {
    setCallState(false);
    if(abort.current) abort.current();
  };
  const handleConect = () => {
    setCallState(false);
    connection.connect(host);
  };
  const handleDisconect = () => {
    setCallState(false);
    connection.disconnect();
  };
 
  return (
    <>
      <div>
        Host name - правильный хост только: https://example.com, остальный
        disconnected{' '}
      </div>
      <div>
        <input
          type="text"
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            setHost(e.target.value)
          }
          value={host}
        />
        <button onClick={handleConect}>Connect</button>
        <button onClick={handleDisconect}>Disconnect</button>
        <button onClick={handlerCall}>Call</button>
        <button onClick={handlerAbortCall}>Abort Call</button>
      </div>
 
      <div>
        Status Connection: {con.status}{' '}
        {con.status === STATUS.INPROGRESS ? prevCon.current.count : ''}
      </div>
      <div>Status Call: {callState ? 'Call started' : 'Call failed'}</div>
    </>
  );
}
 
export default App;

import { connection, STATUS } from './connection';
import eventEmitter from './eventEmitter';
 
let inprogress = false,
  abort = false;
 
// количество попыток соедениться с сервером
const tryConnect = 3;
const _call = (host: string) => {
  return new Promise(async (resolve) => {
    let con = false;
    for (let i = 0; i < tryConnect; i++) {
      if (abort) break;
      const res = await connection.connect(host);
      if (res.connection !== STATUS.CONNECTED) continue;
      con = true;
      break;
    }
    inprogress = false;
    eventEmitter.emit('call', con);
    resolve(con);
  });
};
 
const cbAbort = () => {
  abort = true;
};
 
const call = (host: string) => {
  if (inprogress) return;
  abort = false;
  inprogress = true;
 
  _call(host);
  return cbAbort;
};
export default call;

import eventEmitter from './eventEmitter';
 
export enum STATUS {
  CONNECTED = 'connected',
  DISCONNECTED = 'disconnected',
  INPROGRESS = 'inprogress',
}
 
const rightHost = 'https://example.com';
let timeout: ReturnType<typeof setTimeout> | null = null;
let host = '';
let status = STATUS.DISCONNECTED;
// обертка имитация реального соединения
export const connection = {
  connect: function (newHost: string): Promise<{ connection: STATUS }> {
    return new Promise((resolve) => {
      if (newHost == host && status === STATUS.CONNECTED) {
        return resolve({ connection: STATUS.CONNECTED });
      }
      host = newHost;
      this.notify(STATUS.INPROGRESS);
 
      if (timeout) clearTimeout(timeout);
 
      timeout = setTimeout(() => {
        timeout = null;
        let res = STATUS.DISCONNECTED;
        if (host === rightHost) res = STATUS.CONNECTED;
        this.notify(res);
        resolve({ connection: res });
      }, 5000);
    });
  },
  disconnect: async function () {
    this.notify(STATUS.DISCONNECTED);
  },
  notify: function (newStatus: STATUS) {
    status = newStatus;
    eventEmitter.emit('connection', { status });
  },
};

type Listener = (...args: any[]) => void;
 
class EventEmitter {
  private events: { [key: string]: Set<Listener> } = {};
 
  on(event: string, listener: Listener): void {
    if (!this.events[event]) {
      this.events[event] = new Set();
    }
    this.events[event].add(listener);
  }
 
  emit(event: string, ...args: any[]): void {
    if (!this.events[event]) return;
    this.events[event].forEach((listener) => {
      listener(...args);
    });
  }
}
 
export default new EventEmitter();

const handlerCall = () => {
    setCallState(false);
    abort.current = call(host);
  };