Функция onmessage () в Chrome не запускается сразу после повторного подключения, несмотря на получение сообщения с сервера

Question

В настоящее время я пытаюсь создать веб-сокет между Chrome и сервером NodeJS. Сервер Node использует плагин ws , и я использую обработчик веб-сокетов Chrome по умолчанию.

Вот мои строки кода для сервера:

wss.on('connection', function connection(ws) {
  ws.id = uuid();
  let response = {'type': 'uuid','data': ws.id};
  ws.send(JSON.stringify(response));
});

И мой код для клиента:

//Listens for new messages
connection.onmessage = function(e) {
  let data = JSON.parse(e.data);
  console.log(data.data);
}

Что я ожидаю: сервер генерирует UUID для клиента каждый раз, когда они создают соединение, и клиент печатает его на консоли. Когда соединение разорвано и клиент повторно подключается, сервер отправляет клиенту новый UUID.

Что происходит: сервер генерирует UUID для клиента при создании соединения, и клиент печатает его на консоли,Однако, когда сервер выключается и возвращается, а клиент повторно устанавливает соединение, сервер отправляет клиенту новый UUID, но chrome просто не получает его.

Любая помощьбудет принята с благодарностью. Спасибо!

Редактировать: так я подключаюсь к серверу

//Reconnect to server
setInterval(function() {
  if (connection.readyState !== WebSocket.OPEN) {
    reconnect = false;
    connection.close();
    console.log("Disconnected from server. Retrying...");
    connection = new WebSocket(server);
  } else {
    if (!reconnect) {
        reconnect = true;
        console.log("Reconnected to server.");
    }
  }
}, 1000);

Редактировать 2: изменил код, все еще не работает:

//Webhook
//On connection open
connection.onopen = function() {
  console.log("Connected to server");
  reconnect = "";
  //Reconnect to server if disconnected
  connection.onclose = function(e) {
    console.log("Connection closed, reconnecting...");
    //Retry every second
    reconnect = setInterval(function() {
        if (connection.readyState !== WebSocket.OPEN) {
            connection.close();
            console.log("Connecting to server...");
            connection = new WebSocket(server);
        }
    }, 1000);
  }
}

onopen() также не запускается при переподключениях, поэтому клиент будет пытаться переподключаться каждую секунду после отключения и никогда не остановится.

Answer 1

Я нашел решение

//Webhook
function connect() {
  //Attempt to connect to server
  if (firstConnect) {
    console.log("Connecting to server...");
    connection = new WebSocket(server);
  } else {
    if (connection.readyState !== WebSocket.OPEN) {
      connection.close();
      console.log("Connecting to server...");
      connection = new WebSocket(server);
    }
  }

  //On connection open
  connection.onopen = function() {
    firstConnect = false;
    console.log("Connected to server");
    clearInterval(reconnect);
  }

  //Listens for new messages
  connection.onmessage = function(e) {

 }

   //Reconnect to server if disconnected
   connection.onclose = function(e) {
    console.log("Connection closed, reconnecting...");
    connect();
  }
}

Когда вы создаете новое соединение с сокетом, Chrome будет пытаться подключиться самостоятельно до истечения времени ожидания. Тайм-аут вызовет connection.onclose, что в свою очередь вызывает connect().

. Вложив все это в connect(), обработчики событий будут подключаться к новому соединению websocket каждый раз. Кроме того, вам не нужно будет setInterval(), что позволит избежать проблем с производительностью.

Браузеры, протестированные на: Chrome, Opera, Safari