Implement defensive handling of websocket connection

[bjester]

Background / Epic: #3630
Prerequisite: #3656

Observed behavior

• Currently, if the websocket gets closed, the frontend does not robustly handle it and requires the user to refresh the page

Expected behavior

• The frontend should robustly handle internet connectivity issues, automatically managing the reopening of the connection if it becomes closed or interrupted
• If frontend fails to send a message(s) because the connection has been closed, it should resend them over the sync API
  • This will fast-forward the client's browser to guard against messages that weren't received during that time
  • Perhaps generally speaking we should always call the sync API right before establishing the websocket connection to achieve the fast-forward behavior

User-facing consequences

• We don't want to require the user to refresh the page for a functional editing experience

Additional information

• We want to Implement ping/keep-alive messages to prevent websocket connection closure #3656 first to clear up any other issues that might cause unintended connection closure in our infrastructure

Steps to reproduce the issue

1. Open a channel on the websocket server https://websockets.studio.learningequality.org/ (note: seems like it's no longer connecting)
2. Open the developer console
3. Toggle network connectivity
4. Observe the page doesn't recover and requires a refresh