react-nativewebsocketstompjs

Web socket connections with @stomp/stompjs in React Native


I am still new to React Native , i am currently working on project that requires to implement a websocket connection in React native app and subscribe to the topic to receive messages from the websocket. When i tried to implement it using @stomp/stompjs i am not able to connect to the websocket the onConnect function doesn't work.

Below is my code

import { Client, Message } from '@stomp/stompjs';
const stompConfig = {
    connectHeaders: {},
    brokerURL: "ws://203xxxxxxxx/xxx/connectSocket",
    debug: function (str) {
        console.log('STOMP: ' + str);
    },
    reconnectDelay: 200,
    onConnect: function (frame) {
        console.log("connected")
        const subscription = stompClient.subscribe("/topic/public/" + userId, function (message) {
            console.log(JSON.parse(message.body));

        });
    },
    onStompError: (frame) => {
        console.log('Additional details: ' + frame.body);
    },
}
stompClient = new Client(stompConfig);
useEffect(() => {
    stompClient.activate();
}, [])

Here is the output log I get

LOG  STOMP: Opening Web Socket...
LOG  STOMP: Web Socket Opened...
LOG  STOMP: >>> CONNECT
accept-version:1.0,1.1,1.2
heart-beat:10000,10000

Any help would be appreciated:)


Solution

  • Guys after doing some research i found the solution apparently there is some type of bug in @stomp/stompjs for react native you can view about the issue here I fixed my problem by adding this line of code to my stompConfig

    stompConfig:{
    ...,
    forceBinaryWSFrames: true,
    appendMissingNULLonIncoming: true,
    }