Client not able to listen to event

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:

I've set up a FeathersJS backend and a ReactJS frontend to establish a real-time socket connection.
Backend Repository: FeathersJS Chat Trail

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;

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.

feathersjs / feathers