Stop reconnecting when page is hidden (#6534)

* Stop reconnecting when page is hidden

This tries to address the problem of seeing the "attempting to reconnect"
flash lingering around for a very long time when resuming a LiveView tab
on mobile. In my tests, this mostly happens when fallback to longpoll is
disabled. In this case, the following happens:

1. User puts their phone to sleep.
2. After a couple of seconds, the browser kills the websocket connection
   and Phoenix registers this as an error.
3. Phoenix tries to establish a new WebSocket connection. This hangs.
4. User opens the page again. Instead of immediately establishing the
   connection, the WebSocket is stalled for a while. The exact amount
   seems a bit random, but I've seen 10+ seconds. During that time, the
   WebSocket in the devtools doesn't show any activity, but then suddenly
   the connection works again.

If LongPoll is active, at point 3, Phoenix instead tries a LongPoll
connection. In mobile Chrome, the HTTP request fails and Phoenix registers
this as 500 and tries again, backing off. If the user resumes the page -
depending on their luck - they might need to wait for the next backoff
attempt to fire, then the connection is established quickly.

This PR addresses this problem by checking the visibility state using
the `visibilitychange` event, which is recommended for registering a tab
going in the background (for example by a phone going to sleep). We set
a flag that we're hidden and in the case that there's an error, we don't
try to reconnect immediately (since we're hidden). Instead, we reconnect
as soon as the visibilitychange fires again with the page not hidden any
more.

With this change, the connection is immediately established in both mobile
Chrome (Android) and Mobile Safari (iOS), most of the time not seeing the
"trying to reconnect" flash at all.

Also, this PR addresses a problem where the `connectWithFallback` function
would accumulate `onOpen` listeners, causing duplicate callbacks.

Hopefully closes phoenixframework/phoenix_live_view#3896.
Hopefully closes #6149.

* make tests happy

Author: SteffenDE

assets/js/phoenix/socket.js

@@ -116,6 +116,7 @@ export default class Socket {
     this.channels = []
     this.sendBuffer = []
     this.ref = 0
+    this.fallbackRef = null
     this.timeout = opts.timeout || DEFAULT_TIMEOUT
     this.transport = opts.transport || global.WebSocket || LongPoll
     this.primaryPassedHealthCheck = false
@@ -129,6 +130,7 @@ export default class Socket {
     this.disconnecting = false
     this.binaryType = opts.binaryType || "arraybuffer"
     this.connectClock = 1
+    this.pageHidden = false
     if(this.transport !== LongPoll){
       this.encode = opts.encode || this.defaultEncoder
       this.decode = opts.decode || this.defaultDecoder
@@ -150,6 +152,17 @@ export default class Socket {
           this.connect()
         }
       })
+      phxWindow.addEventListener("visibilitychange", () => {
+        if(document.visibilityState === "hidden"){
+          this.pageHidden = true
+        } else {
+          this.pageHidden = false
+          // reconnect immediately
+          if(!this.isConnected()){
+            this.teardown(() => this.connect())
+          }
+        }
+      })
     }
     this.heartbeatIntervalMs = opts.heartbeatIntervalMs || 30000
     this.rejoinAfterMs = (tries) => {
@@ -178,6 +191,11 @@ export default class Socket {
     this.heartbeatTimer = null
     this.pendingHeartbeatRef = null
     this.reconnectTimer = new Timer(() => {
+      if(this.pageHidden){
+        this.log("Not reconnecting as page is hidden!")
+        this.teardown()
+        return
+      }
       this.teardown(() => this.connect())
     }, this.reconnectAfterMs)
     this.authToken = opts.authToken
@@ -396,7 +414,10 @@ export default class Socket {
         fallback(reason)
       }
     })
-    this.onOpen(() => {
+    if(this.fallbackRef){
+      this.off([this.fallbackRef])
+    }
+    this.fallbackRef = this.onOpen(() => {
       established = true
       if(!primaryTransport){
         // only memorize LP if we never connected to primary
@@ -502,6 +523,7 @@ export default class Socket {
   }
 
   onConnClose(event){
+    if(this.conn) this.conn.onclose = () => {} // noop to prevent recursive calls in teardown
     let closeCode = event && event.code
     if(this.hasLogger()) this.log("transport", "close", event)
     this.triggerChanError()

assets/test/socket_http_test.js

@@ -2,19 +2,19 @@
  * @jest-environment jsdom
  * @jest-environment-options {"url": "http://example.com/"}
  */
-import { Socket } from "../js/phoenix"
+import {Socket} from "../js/phoenix"
 
 // sadly, jsdom can only be configured globally for a file
 
-describe("protocol", function () {
-  it("returns ws when location.protocol is http", function () {
+describe("protocol", function (){
+  it("returns ws when location.protocol is http", function (){
     const socket = new Socket("/socket")
     expect(socket.protocol()).toBe("ws")
   })
 })
 
-describe("endpointURL", function () {
-  it("returns endpoint for given path on http host", function () {
+describe("endpointURL", function (){
+  it("returns endpoint for given path on http host", function (){
     const socket = new Socket("/socket")
     expect(socket.endPointURL()).toBe(
       "ws://example.com/socket/websocket?vsn=2.0.0",