added notices for ws events

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Follows/Followers tabs on user profiles now display the content properly.
 - Handle punycode in screen names
 - Fixed local dev mode having non-functional websockets in some cases
+- Show notices for websocket events (errors, abnormal closures, reconnections)
 
 ## [2.2.2] - 2020-12-22
 ### Added

src/i18n/en.json

@@ -646,7 +646,10 @@
     "reload": "Reload",
     "up_to_date": "Up-to-date",
     "no_more_statuses": "No more statuses",
-    "no_statuses": "No statuses"
+    "no_statuses": "No statuses",
+    "socket_reconnected": "Realtime connection established",
+    "socket_broke": "Realtime connection lost: CloseEvent code {0}",
+    "socket_closed": "No realtime connection, updates can arrive with a delaye until connection is re-established"
   },
   "status": {
     "favorites": "Favorites",

src/modules/api.js

@@ -91,12 +91,29 @@ const api = {
             }
           )
           state.mastoUserSocket.addEventListener('open', () => {
+            // Do not show notification when we just opened up the page
+            if (state.mastoUserSocketStatus !== null) {
+              dispatch('pushGlobalNotice', {
+                level: 'success',
+                messageKey: 'timeline.socket_reconnected',
+                timeout: 5000
+              })
+            }
             commit('setMastoUserSocketStatus', WSConnectionStatus.JOINED)
           })
           state.mastoUserSocket.addEventListener('error', ({ detail: error }) => {
             console.error('Error in MastoAPI websocket:', error)
             commit('setMastoUserSocketStatus', WSConnectionStatus.ERROR)
             dispatch('clearOpenedChats')
+            /* Since data in WS event for error is useless it's better to show
+             * generic warning instead of in "close" which actually has some
+             * useful data
+             */
+            dispatch('pushGlobalNotice', {
+              level: 'error',
+              messageKey: 'timeline.socket_closed',
+              timeout: 5000
+            })
           })
           state.mastoUserSocket.addEventListener('close', ({ detail: closeEvent }) => {
             const ignoreCodes = new Set([
@@ -112,6 +129,12 @@ const api = {
               dispatch('startFetchingNotifications')
               dispatch('startFetchingChats')
               dispatch('restartMastoUserSocket')
+              dispatch('pushGlobalNotice', {
+                level: 'error',
+                messageKey: 'timeline.socket_broke',
+                messageArgs: [code],
+                timeout: 5000
+              })
             }
             commit('setMastoUserSocketStatus', WSConnectionStatus.CLOSED)
             dispatch('clearOpenedChats')