FeathersJs client using both REST and WS

[alexjs-dev]

Hello,

Have a use-case where I need to use both REST and WS. Most of the app already uses REST, but I do have a messages services which is used for chatting, and that obviously needs to use sockets. Any hack around this?
Because by default I get an error that

react_devtools_backend.js:2560 Authentication error Error: Only one default client provider can be configured

My socket connection

import socketio from '@feathersjs/socketio-client'
import io from 'socket.io-client'
import { feathersClient } from '~services/ApiClient'

const baseUrl = process.env.API_URL
const socket = io(baseUrl)

class SocketClient {
  constructor() {
    this.userId
    this.accessToken = window.localStorage.getItem('feathers-jwt')
    this.feathers = feathersClient.app
    this.messages = this.feathers.service('messages')

    if (this.accessToken && this.accessToken !== '') {
      this.feathers.configure(socketio(socket))

      // Receive real-time events through Socket.io
      this.messages.on('created', (message) => {
        console.log('message', message)
      })
    }
  }
}

export default SocketClient

Rest

import feathers from '@feathersjs/feathers'
import rest from '@feathersjs/rest-client'
import SocketClient from './SocketClient'
import { Creators } from '../store/auth/creators'
import store from '../store'
import axios from 'axios'
import auth from '@feathersjs/authentication-client'

const baseUrl = process.env.API_URL

class FeathersClient {
  constructor() {
    this.restClient = rest(baseUrl)
    this.socket
    this.app = feathers()
    this.app.configure(this.restClient.axios(axios))
    if (process.browser) {
      this.app.configure(
        auth({
          storage: window.localStorage,
        })
      )
    }
  }

  client = () => this.app

  service = (service) => this.app.service(service)

  disconnect = async () => {
    console.log('Disconnecting...')
    if (process.browser) {
      store.dispatch(Creators.logOut())
      window.localStorage.removeItem('feathers-jwt')
      await this.app.logout()
    }
  }

  reAuthenticate = async () => {
    console.log('Re-authenticating...')
    try {
      await this.app.reAuthenticate()
      this.socket = new SocketClient()
    } catch (e) {
      console.error('Authentication error', e)
      this.disconnect()
    }
  }

  authenticate = async (config) => {
    console.log('Authenticating...')
    try {
      if (process.browser) {
        const response = await this.app.authenticate(config)
        if (response.accessToken) {
          window.localStorage.setItem('feathers-jwt', response.accessToken)
        }
        return response
      }
    } catch (e) {
      console.error('Authentication error', e)
      await this.disconnect()
    }
  }
}

export default FeathersClient

[alexjs-dev]

I was thinking about using socket.io lib separately and I managed to authenticate that way easily, however what event should I listen to?

because I need to listen to messages service's create event, on a channel with user's id (doing filtering on BE)

  app.service('messages').publish((data) => {
    // (data, context)
    return app.channel(data.recipientId); // only publish to recipientId
  });

[Mairu]

Hi, you can register 2 apps with different clients, if needed

this.restClient = rest(baseUrl)
this.socket =io()
this.app = feathers()
this.app.configure(this.restClient.axios(axios))
this.wsApp = feathers()
this.wsApp.configure(this.socket)