How to use this library with React

[isBatak]

I'm curious is there any app example or wrapper for React with hooks?

I'm currently implementing my own solution, but I have some questions:

1. How to do a proper useEffect cleanup

useEffect(() => {
    client.connect().subscribe({
      onComplete: (socket) => {
        dispatch({ type: 'complete', socket });
      },
      onError: (error) => dispatch({ type: 'error', error }),
      onSubscribe: (cancel) => {
        // when to call cancel
      },
    });
    
    // cleanup
    return () => {
      // how to close connection?
      // how to unsubscribe?
    };
  }, [client]);

2. I'm getting this error Warning: Single: Invalid call to onError(): onSubscribe has not been called. and I'm not sure where to start. This happens when I'm navigating from one page to another.
   Is it ok to do client.connect().subscribe multiple times in the app lifecycle, or should I store socket connection once it's established?

[viglucci]

Sorry, I'm late to the party on answering this one. You are likely going to want to manage the lifecycle for the RSocket connection with the Context API.

Here is an example I put together using experimental APIs from #158 . The concepts should be similar though to whichever version of RSocket-js you are working with.

Once you have RSocketProvider, you should call it at the top level of your app, ideally above your router (assuming you have a router). You won't want to initialize the connection more than once and should be able to leverage the same connection across renders (assuming a SPA setup).

https://github.com/viglucci/game-platform-example/blob/7e1a98d619f37f6cf572a39e413a1545a94f330c/app-electron/src/renderer/contexts/RSocketProvider.jsx

// RSocketContext.js

import React from 'react';

const Context = React.createContext(null);

export default Context;

// RSocketProvider.jsx

import React, { useEffect, useRef, useState } from 'react';
import RSocketContext from './RSocketContext';

const { RSocketConnector } = require('@rsocket/rsocket-core');
const {
  WebsocketClientTransport,
} = require('@rsocket/rsocket-websocket-client');

const RSocketProvider = (props) => {
  // eslint-disable-next-line react/prop-types
  const { children } = props;
  const [connectionState, setConnectionState] = useState('CONNECTING');
  const rsocket = useRef(null);

  useEffect(() => {
    let connector;
    const connect = async () => {
      connector = new RSocketConnector({
        transport: new WebsocketClientTransport({
          url: 'ws://localhost:9090',
        }),
      });

      try {
        rsocket.current = await connector.connect();
        setConnectionState('CONNECTED');
      } catch (e) {
        // eslint-disable-next-line no-console
        console.error(e);
        setConnectionState('ERROR');
      }
    };

    connect();

    return () => {
      connector.close();
    };
  }, []);

  return (
    <RSocketContext.Provider value={[connectionState, rsocket.current]}>
      {children}
    </RSocketContext.Provider>
  );
};

export default RSocketProvider;