尽管收到了来自服务器的消息，但 Chrome 的 onmessage() 不会在重新连接后立即触发

Question

I'm currently trying to create a websocket between chrome and a NodeJS server. The Node server is using the ws plugin, and I'm using Chrome's default websocket handler.

Here are my lines of code for the server:

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

And my code for the client:

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

What I expect: The server generates a UUID for the client everytime they create a connection, and the client prints it to console. When the connection is severed and the client reconnects, the server sends a new UUID to the client.

What happens: The server generates a UUID for the client when they create a connection, and the client prints it to console. However, when the server goes down and comes back up, and the client re-establishes a connection, the server does send a new UUID to the client, but chrome just isn't picking it up.

Any help would be greatly appreciated. Thanks!

Edit: This is how I reconnect to the server

//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);

Edit 2: Modified the code, still doesn't work:

//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() does not fire on reconnections either, so the client will try to reconnect every second after disconnecting, and will never stop.

Answer 1

I found a solution

//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();
  }
}

When you create a new socket connection, chrome will repeatedly try to connect on its own until it times out. Timing out will fire connection.onclose , which in turns calls connect() .

By nesting it all in connect() , the event handlers will be hooked onto the new websocket connection everytime. Furthermore, you will not need to setInterval() , thus avoiding any performance issues.

Browsers tested on: Chrome, Opera, Safari