Client not able to listen to event

[nickdex]

Title: Real-time socket connection not working between FeathersJS and ReactJS via socket.io

Description:
Note - It is only a problem when listening to events i.e. on method. In network tab for ws connection, messages section we can see the request going and response coming for other methods (get, create etc).
It also works inside the backend app but it is not sending to client

Steps to reproduce:

1. I've set up a FeathersJS backend and a ReactJS frontend to establish a real-time socket connection.

2. Backend Repository: FeathersJS Chat Trail

3. Frontend Connection to FeathersJS:

   import { feathers } from '@feathersjs/feathers';
   import socketio from '@feathersjs/socketio-client';
   import io from 'socket.io-client';
   
   const socket = io("http://localhost:3030");
   const client = feathers();
   client.configure(socketio(socket));
   export default client;

4. Chat.tsx Component:

   import { feathers } from '@feathersjs/feathers'
   import socketio from '@feathersjs/socketio-client'
   import io from 'socket.io-client'
   import React from 'react';
   
   const socket = io('http://localhost:3030')
   const client = feathers()
   // Set up Socket.io client with the socket
   client.configure(socketio(socket))
   
   
   const Temp = () => {
     const createMessage = async () => {
       const newRes = await client
         .service('message-3')
         .create({ text:"hello test message" });
       console.log('new object create', newRes);
     };
   
     client.service('message-3').on('created', data => {
       console.log('new message created i am from listener', data);
     });
   
     return (
       <div>
         <div>course create</div>
         <button onClick={createMessage}>createeee</button>
       </div>
     );
   }
   
   export default Temp;

Expected behavior:

Upon clicking the "createeee" button, I expect the console.log('new message created i am from listener', data) statement to be executed, indicating a successful real-time connection.

Actual behavior:

The listener on the frontend is not triggering the expected console log statement. However, the backend socket listener works correctly. Only the frontend listener seems unresponsive.

System configuration:

Module versions:

• FeathersJS modules: 5.0.11

NodeJS version: 20.8.0

Operating System:

• macOS Version 14.0 (Build 23A344)
• Windows 11

Browser Version:

• Vivaldi 6.2.3105.58 (Stable channel) (arm64)
  • Revision: 160afb130e98d47754ca92d477dfe950a5c0b4c1
  • OS: macOS Version 14.0 (Build 23A344)
  • JavaScript: V8 11.6.189.22

React Native Version: N/A (web issue)

Module Loader: N/A

Additional Information:

We also tried out the feather-chat repository provided by the FeathersJS team. With both the quick start and the Feathers backend connected to the React chat app, we were able to successfully listen to events. However, the issue arises when using the Feathers CLI to generate the app and using it as is.

[daffl]

By default only authenticated users will receive events. A user needs to log in on the frontend as shown here for React.

[nickdex]

@daffl Thanks for the answer.
We are facing a similar issue with custom method as well. By any chance does authentication requirement is for custom methods as well?
The issue is our react app is not able to call custom method as function internally. In server app it works and of course the direct HTTP requests also works. We tried to overload the type as well as shown in https://feathersjs.com/api/client/socketio.html#custom-methods