ws-client

Description

• Netcomposer WebSocket wrapper using react-use-websocket and the Event Bus design pattern
• Provides connection, communication and event subscription

WS Communication

Dependencies

• React
• react-use-websocket
• Zod

API

• WSClientProvider: provider that allows the use of the useWSClient hook. Params: wsUrl (WS url to connect to), netcomposerAppPrefix (app identifier used as prefix), logMode ('verbose', 'minimalist', 'only-error' or 'off'), keepAliveTimeout (max time that the client can be idle to keep alive the connection with the server. Optional, defaults to 5 seconds), ackTimeout (max time to consider a WS ack message as slow. Optional, defaults to 5 seconds) & resultTimeout (max time to consider a WS result message as slow. Optional, defaults to 10 seconds). Client code must be wrapped by it.
• useWSClient: hook that give access through destructuring to connectionStatus, sendCommand, connect & disconnect.
  • connectionStatus: variable that provides the state of the WS connection. One of Connecting, Open, Closing, Closed or Uninstantiated. Type can be imported as ConnectionStatus.
  • sendCommand: function that allows message sending to the WS. Accepts a param of type Message and returns a Promise. Message type can be imported.
• useEventSubscription: hook that provides a subscribe on mount and unsubscribe on unmount mechanism. Params: eventKey (the event key this subscription is associated to) & eventHandler (the eventHandler to call in response to that event).

important: useEventSubscription eventHandler must be wrapped in React.useCallback to maintain referential stability

Log Modes

Verbose

• Ack
• Ping
• Command
• Result
• Event
• Error

Minimalist

• Command
• Result
• Event
• Error

Only Error

• Result Error
• Error

Off

• Nothing

Examples

TODO

Resources

• react-use-websocket
• Event Bus
• TanStack Query with WS
• Publishing node modules TS ES modules