robtaussig / react-use-websocket

React Hook for WebSocket communication
MIT License
1.62k stars 135 forks source link

One websocket connection with multiple queues to subscribe to #220

Closed Claim0013 closed 8 months ago

Claim0013 commented 10 months ago

Hey! I am sorry if this has been asked before (I did read through the whole documentation and searched through the Issues), but I am unable to subscribe to a specific topic after connecting to my backend.

I use RabbitMQ. And before this I was using StompJS.

The backend usually sends messages to specific topics which the frontend then receives if it's subscribed to them and sometimes only if it's the right frontend -> specified by IP address.

My backend looks like this:


@Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/myEndPoint").setAllowedOrigins("*"); 
    }

@Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableStompBrokerRelay(MESSAGE_PREFIX, "queue", "/amq/")
                                .setRelayHost(rabbitmqUri)
                .setSystemLogin(rabbitmqUsername).setClientLogin(rabbitmqUsername).setClientPasscode(rabbitmqPassword)
                .setSystemPasscode(rabbitmqPassword).setAutoStartup(true)
                .setSystemHeartbeatReceiveInterval(HEARTBEAT_RECEIVE_INTERVAL)
                .setSystemHeartbeatSendInterval(HEARTBEAT_SEND_INTERVAL);
        registry.setApplicationDestinationPrefixes("/app");
    }

@Controller
public class Controller {

    @Autowired
    private SimpMessagingTemplate template;

    @Autowired
    private ObjectMapper objectMapper;

        // SEND TO ALL FRONTENDS
    public void sendMessage(SomeObject someObject) {
        this.template.convertAndSend("/topic/myEndPoint", someObject);
    }

        // SEND TO A FRONTEND AT A SPECIFIC IP ADDRESS
        public void sendMessage(SomeObject someObject, String ip) {
        this.template.convertAndSendToUser(ip, "/topic/myEndPoint", someObject);
    }

I can successfully connect to "ws://localhost:8600/myEndPoint" but I cannot subscribe as I did before to a certain topic.

I am using an older approach where we have to handle reconnections and everything else, so react-use-websocket looked super to use instead.

This is the old way btw.

const TOPIC = /topic/myEndPoint';

connectToLoggingWebsocket = ip => {
    loggingStompClient = Stomp.client(`ws://localhost:8600/myEndPoint`);
    loggingStompClient.heartbeat.outgoing = 0;
    loggingStompClient.heartbeat.incoming = 0;
    loggingStompClient.debug = () => null;
    let name = '';

    if (this.props.name) {
      name = this.props.name;
    }
    name = ip + name;
    loggingStompClient.connect({ name }, frame => this.success(frame, loggingStompClient), err => this.failure(err, ip));
  }

success = (frame, stompClient) => {
    console.log(`Connected: ${frame}`);

    stompClient.subscribe(TOPIC, data => {
      console.log(data);
    });
  }

Am I doing something wrong? Is it not possible to subscribe to a topic? Any help is appreciated.

Thanks

danielmcmillan commented 9 months ago

I think this is outside of the scope of this library which manages a WebSocket connection. This is just a bi-direction communication channel and doesn't itself include features like topics and subscriptions which may be provided by higher level messaging protocols supported by RabbitMQ such as STOMP.

robtaussig commented 8 months ago

I agree with @danielmcmillan. I would love to make this library more usable, but something like this should be implemented based on individual requirements as there are many ways to go about it.