Синхронное закрытие веб-сокета в браузере

Question

У меня есть веб-приложение, использующее WebSocket для подключения к серверу и выполнения действия.После того, как действие закончено, соединение будет закрыто автоматически.Но пользователь может перезапустить действие, нажав кнопку, которая закрывает соединение, а затем создает новое соединение.

Пример кода, когда пользователь перезапускает действие:

if (this.connection) {
    this.connection.close()
    // this.connection = null
}

if (!this.connection) {
    this.connection = new WebSocket(serverSocketURL)

    // Other logic codes here

    this.connection.onclose = () => {
        this.connection = null
    }
}

Проблема в close()Метод асинхронный, поэтому второй код блока выполняется до закрытия соединения.Как синхронно закрыть WebSocket соединение?Должен ли я использовать setTimeout, чтобы немного подождать после вызова close() метода?

Answer 1

Возможно, это будет делать то, что вы хотите

Когда пользователь «повторно подключает» соединение, для установления нового соединения добавляется второй close слушатель - так как этот слушатель добавляется после того, который устанавливает this.connection = null, он будет вызываться после этого запущен, поэтому нет шансов на состояние гонки

const makeConnection = () => {
    this.connection = new WebSocket(serverSocketURL);
    // Other logic codes here
    this.connection.addEventListener('close', () => {
        this.connection = null
    });
};
if (this.connection) {
    this.connection.addEventListener('close', makeConnection);
    this.connection.close();
} else {
    makeConnection();
}

или - используя onclose вместо addEventListener('close',

const makeConnection = () => {
    this.connection = new WebSocket(serverSocketURL);
    // Other logic codes here
    this.connection.onclose = () => {
        this.connection = null
    };
};
if (this.connection) {
    this.connection.onclose = makeConnection;
    this.connection.close();
} else {
    makeConnection();
}