How to work around Safari 10.1 error "Failed to send WebSocket frame"?

Question

It seems that the WebSocket API in Safari 10.1 has a maximum amount of binary data that it can buffer and then the next message sent gets the error "WebSocket connection to ... failed: Failed to send WebSocket frame."

Safari then closes the connection with code 1006 (CLOSE_ABNORMAL).

WebSockets are supposed to report the bufferedAmount - but Safari always reports 0 until after the error occurs and the connection is closed.

I tried just doing 100ms a setTimeout between each message, and that seems to work in the case of small chunks of data, but it seems brittle and large chunks still get errors when I send my closing JSON message, even with a longer delay.

You can see the bug in action here - the "Play Sample" buttons work in Safari 10.03 but error in 10.1. (Code that handles the WebSocket connection.)

Any ideas on how to work around this? Or what the limit even is? I know that Safari is Open Source, but I'm not sure where to look.

Update: here's a simpler example:

// this fails in Safari 10.1 but works in 10.03 (and other browsers)
var ws = new WebSocket('wss://echo.websocket.org');

ws.onerror = function(evt) {
  // Not sure why, but error events seem to have no useful information
  // The console, however, will have the following error:
  // WebSocket connection to 'wss://echo.websocket.org/' failed: Failed to send WebSocket frame.
  console.log("WebSocket error - see console for message");
}
ws.onclose = function(evt) {
  console.log(`WebSocket closed with code: ${evt.code}, reason: ${evt.reason}`);
}

ws.onopen = function() {
  console.log('sending first binary message');
  ws.send(new Uint8Array(23085));
  console.log('bufferedAmount is ' + ws.bufferedAmount);

  // this gets the error
  console.log('sending second binary message');
  ws.send(new Uint8Array(23085));
  console.log('bufferedAmount is ' + ws.bufferedAmount);

  console.log('sending third binary message');
  ws.send(new Uint8Array(23085));
  console.log('bufferedAmount is ' + ws.bufferedAmount);

  ws.close();
}

https://jsfiddle.net/yta2mjuf/2/

The second message gets an error closes the connection, and after the third message, bufferedAmount is 23093.

Answer 1

I tried your real world link on Safari 10.1.2 and did not see the problem. Seems it has been fixed.