WebSockets

[lukaskabc]

Implementation of WebSockets to address changes in kbss-cvut/termit#290

React-Scripts & Create React App Configuration Override

React-Scripts does not allow the modification of webpack configuration, which was required to support .mjs files required by a new library SvenKirschbaum/react-stomp-hooks.

To add an option to override some configurations, Craco was added as a dev dependency.

Changed dependencies

Some package versions were adjusted to address audit security issues.

Changes

• App was wrapped in WebSocket provider - note that it is required for this wrapper to be above others, for example, above React router, to keep the continuous WebSocket connection.
• ActionType was changed from constant to enum to allow usage of actions as typed keys
• fixed the dispatches vocabulary term count loading action on success test, which seemed to be wrong
• BrowserStorage will now artificially fire storage events to allow listening of token change (same for SecurityUtils when the token is cleared)

WebSocket handling

WebSocket connection is established automatically by WebSocketWrapper when a security token is available (not blank), and the lost connection is automatically reconnected.

Publishing

The useStompClient() hook can be used to publish a message from a component, or the withStompClient wrapper can be used for HOC.

Subscribing

The component can subscribe to messages during its lifetime with the useSubscription hook or the withSubscription wrapper for HOC.

Subscribing in a component has a disadvantage - the subscription is canceled and renewed every time React decides to remount the element, so the subscription may eventually miss some message (and BE is notified about un/subscribing every time too).

As an alternative, it is possible to register a global WebSocketDispatcher, which will be active for the life-cycle of WebSocketWrapper.
Global dispatchers are registered in src/reducer/WebSocketDispatchers.ts#DISPATCHERS constant for individual actions using a helper function to construct the key-value pair.
Dispatcher is defined by subscribed destinations, relevant action, and the message callback.
Each dispatcher may listen to one or more destinations.

All registered dispatchers are instanced by WebSocketApp asWebSocketDispatcherSubscriber components.

[ledsoft]

LGTM, will wait with merge for backend.