Improve the automatic reconnect behavior (for actioncable)

[krschacht]

See here: https://github.com/hotwired/turbo/issues/1261#issuecomment-2125650736

This is the old code I was using:

import { cable } from "@hotwired/turbo-rails"

window.isConnected = true
window.cable = cable
window.consumer = await cable.createConsumer()
setInterval(() => {
  if (consumer.connection.isOpen() != window.isConnected) {
    window.isConnected = consumer.connection.isOpen()
    console.log(`cable ${window.isConnected ? 'connected' : 'DISCONNECTED'}`)
    const elem = document.getElementById('connection-status')
    if (!window.isConnected) {
      if (elem) {
        elem.classList.add('bg-red-400')
        elem.classList.add('text-white')
      }
    } else {
      if (elem) {
        elem.classList.remove('bg-red-400')
        elem.classList.remove('text-white')
        elem.classList.add('text-gray-200')
      }
    }
  }
}, 500)
window.consumer.connection.open()