rsocketjs channel not established with spring-boot rsocket server - reactjs

Question

I have a simple rsocket backend with one message mapping defined :
#Controller
class MessageController {
#MessageMapping("test")
public Flux<String> test(Flux<String> stringFlux) {
return stringFlux.map(String::toUpperCase);
}
}
On the frontend side I try to connect to this channel from typescript + React + rsocketjs application.
Rsocket client :
class ChatServerClient {
private readonly host: String;
private readonly port: number;
private rsocket!: ReactiveSocket<any, any>;
private constructor(host: String = "localhost", port: number = 9090) {
this.host = host;
this.port = port
}
private async createClient() {
const client = new RSocketClient(
{
setup: {
dataMimeType: 'application/json',
keepAlive: 1000000, // avoid sending during test
lifetime: 100000,
metadataMimeType: MESSAGE_RSOCKET_COMPOSITE_METADATA.string,
},
transport: new RSocketWebsocketClient({
debug: true,
url: "ws://" + this.host + ":" + this.port,
wsCreator: (url) => {
return new WebSocket(url);
}
}, BufferEncoders),
errorHandler: (e) => {
console.log(e)
}
}
);
return await client.connect();
}
public static CreateAsync = async (host: String = "localhost", port: number = 9090) => {
const client = new ChatServerClient(host, port);
client.rsocket = await client.createClient()
return client;
};
test(pushMessage : Flowable<String>) {
const metadata = encodeCompositeMetadata(
[
[MESSAGE_RSOCKET_ROUTING.string, encodeRoute("test")]
]
)
const payloads = pushMessage.map(m => {return {
data : m,
metadata: metadata
}})
return this.rsocket.requestChannel(payloads)
}
}
export { ChatServerClient };
Simple component estabilishing connection :
interface ChatWindowProps { }
const ChatWindow: FC<ChatWindowProps> = (props: ChatWindowProps) => {
const [rsocket, setRsocket] = useState<ChatServerClient | null>(null)
useEffect(() => {
async function getClient() {
const client = await ChatServerClient.CreateAsync("localhost", 9090)
setRsocket(client)
}
getClient()
}, [setRsocket])
console.log("rerender")
const just : Flowable<String> = Flowable.just("a", "b")
const recivedStrings = rsocket?.test(just)
console.log("received strings " + recivedStrings)
recivedStrings?.subscribe({
onNext: m => console.log(m),
onSubscribe: s => {console.log("received strings on subscribe"); s.request(3)}
})
return (
<div className={styles.ChatWindow} data-testid="ChatWindow">
{ rsocket ? (
<div className="chat-container">
Connected
</div>
) : (
<div>Not Connected</div>
)}
</div>
)
};
export default ChatWindow;
I expect that on component rerender, when rsocket client is connected, and I establish the channel communication I would receive "A" and "B" in console but that is not the case, it seems that the channel is not created but client is connected to the server.
Other remarks :
this is just a simplification - other endpoints which use request-response style work so I do not think this is the problem with server setup
I can even see that the returned Flowable is subscribed to but nothing happens on the frontend side.
also on the server side I cannot see any frames which could indicate that any channel connection was established.
The question is - why is the channel not created and items are not emmited to the server and what is the correct way to use channel style communication from typescript rsocketjs client?