How to use the @feathersjs/socketio-client function in @feathersjs/socketio-client

import Vue from 'vue'
import createApplication from '@feathersjs/feathers'
import socketio from '@feathersjs/socketio-client'
import authentication from '@feathersjs/authentication-client'
import io from 'socket.io-client'

const socket = io(process.env.API_BASE_URL, {
  transports: ['websocket']
})
const feathers = createApplication()

feathers.configure(socketio(socket))
feathers.configure(authentication({
  header: 'Authorization', // the default authorization header for REST
  path: '/api/authentication', // the server-side authentication service path
  jwtStrategy: 'jwt', // the name of the JWT authentication strategy
  entity: 'user', // the entity you are authenticating (ie. a users)
  service: 'users', // the service to look up the entity
  cookie: 'feathers-jwt', // the name of the cookie to parse the JWT from when cookies are enabled server side
  storageKey: 'feathers-jwt', // the key to store the accessToken in localstorage or AsyncStorage on React Native
  storage: window.localStorage // Passing a WebStorage-compatible object to enable automatic storage on the client.
}))

Vue.prototype.$feathers = feathers

export default feathers

progressRoot: {
    position: 'absolute',
    top: '50%',
    left: '50%'
  }
});

const app = feathers();
const socket = io(
  `${process.env.REACT_APP_API_PROTOCOL || window.location.protocol}//${process
    .env.REACT_APP_API_HOSTNAME || window.location.hostname}:${process.env
    .REACT_APP_API_PORT || 3234}`
);

// Setup the transport (Rest, Socket, etc.) here
app.configure(socketio(socket));

// Available options are listed in the "Options" section
app.configure(auth({ storage: localStorage }));

let connection;

class Root extends React.PureComponent {
  state = {
    snackMessage: { open: false, text: '' },
    connected: false,
    hass_url:
      localStorage.getItem('hass_url') ||
      `${window.location.protocol}//hassio:8123`
  };

  componentDidMount = () => this.login();

import feathers, { Application } from '@feathersjs/feathers';
import feathersSocketIOClient from '@feathersjs/socketio-client';

import * as io from 'socket.io-client';

const socket = io();
const app: Application = feathers();

app.configure(feathersSocketIOClient(socket));
app.configure(feathersSocketIOClient(socket, { timeout: 1337 }));

error: (context) => {
    if (typeof window !== 'undefined') {
      const {name} = context.service;
      evbus.emit('request:error', context)
      evbus.emit(name+':error', context)
    }
  }
};

const endpoint = 'http://localhost:8000';

const app = feathers()
if (typeof window !== 'undefined') {
  const ws = io(endpoint)
  const wsc = feathers()
  wsc.configure(socketio(ws, {
    timeout: 2000,
  }));
  wsc.hooks(hooks)
  app.io = wsc
  app.ws = ws
  
}

const rest = feathers.rest(endpoint)

app.configure(rest.axios(axios))
app.hooks(hooks)


export default app

useEffect(() => {
    if (!client) {
      client = feathers();
      let path: string = clone(props.location.pathname);
      let url: string = `${process.env.REACT_APP_API_PROTOCOL ||
        window.location.protocol}//${process.env.REACT_APP_API_HOSTNAME ||
        window.location.hostname}:${
        process.env.REACT_APP_API_PORT || process.env.NODE_ENV === 'development'
          ? '8234'
          : window.location.port
      }`;
      socket = io(url, { path: `${path}/socket.io`.replace('//', '/') });
      client.configure(socketio(socket));
      client.configure(authentication());
    }
  }, [props.location]);

import feathers from '@feathersjs/feathers'
import socketio from '@feathersjs/socketio-client'
import auth from '@feathersjs/authentication-client'
import io from 'socket.io-client'

const socket = io('http://localhost:8081', {transports: ['websocket']})

const api = feathers()
  .configure(socketio(socket))
  .configure(auth({ storage: window.localStorage }))

api.service('/users')
api.service('/messages')

export default api

import feathers from '@feathersjs/feathers';
import socketio from '@feathersjs/socketio-client';
import auth from '@feathersjs/authentication-client';
import io from 'socket.io-client';
import { CookieStorage } from 'cookie-storage'

const storage = new CookieStorage();
const socket = io(process.env.apiURL, { transports: ['websocket'] });
const app = feathers()
  .configure(socketio(socket))
  .configure(auth({ storage }));

export default app;

}],
  },
};

const endpoint = process.settings.origin;


const ws = io(endpoint);
const rest = feathers.rest(endpoint);

const app = feathers();
const wsc = feathers();


app.configure(rest.axios(axios));
wsc.configure(socketio(ws, {
  timeout: 2000,
}));

wsc.hooks(hooks);
app.hooks(hooks);
app.io = wsc;
app.ws = ws;

export default app;

import socketio from '@feathersjs/socketio-client';
import auth from '@feathersjs/authentication-client';
import io from 'socket.io-client';

let API_URL = 'https://cg-trello-clone.now.sh';

if (window.location.hostname === 'localhost') {
  API_URL = 'http://localhost:3030';
}

const socket = io(API_URL, {
  transports: ['websocket'],
});

const feathersClient = feathers()
  .configure(socketio(socket))
  .configure(auth({
    storage: window.localStorage,
  }));

export default feathersClient;