vue.jsreactive-programmingspring-webfluxrsocket

How to retrieve RSocket Data to different tabs?


This is my code, it works only for the tab I am on. I receive a response and everything seems to be working fine, I still do not understand the operation of the technology in its entirety, that is why I go to you.

It ends in the "responseHanlder"

connect() {
    // backend ws endpoint
    const wsURL = "ws://localhost:6565/rsocket";

    // rsocket client
    const client = new RSocketClient({
      serializers: {
        data: JsonSerializer,
        metadata: IdentitySerializer,
      },
      setup: {
        keepAlive: 60000,
        lifetime: 180000,
        dataMimeType: "application/json",
        metadataMimeType: "message/x.rsocket.routing.v0",
      },
      transport: new RSocketWebSocketClient({
        url: wsURL,
      }),
    });
    
    client.connect()
          .then((sock) => {
               document.getElementById("connect")
                       .addEventListener("click", (event) => {
                          numberRequester(sock);
                       });
          }, errorHanlder);

    /*Aquí comienza el código del primer socket para insertar un producto
    antes de enviar la notificación primero realiza una acción*/
    const numberRequester = (socket) => {
    
            socket
                .requestResponse({
                  data: {
                    id: null,
                    subscriber: retrieveData.id,
                    titulo: "Se insertó un nuevo producto",
                    descripcion:
                    "Aquí se agrega una descripcion breve de lo que se acaba de hacer (opcional)",
                    fecha_inicio: today,
                    fecha_final: final,
                    leido: false,
                  },
                  metadata:
                    String.fromCharCode("insert.notification".length) +
                    "insert.notification",
                })
                .subscribe({
                  onComplete: responseHanlder,
                  onError: errorHanlder,
                  onNext: responseHanlder,
                  onSubscribe: (subscription) => {
                    //subscription.request(100); // set it to some max value
                  },
                });
            }


    // error handler
    const errorHanlder = (e) => console.log(e);
    // response handler
    const responseHanlder = (payload) => {
      this.sendNotification(payload.data);
    };
} 

After sending the data, my rsocket receives the information and in turn, I receive a response with the data I need. For now, it works only in the tab that runs it, but I need that information reflected in the other tabs because it is a prototype of notifications.


Solution

  • RSocket is statefull, session-oriented, application protocol

    That means, that every time your RSocket client connects to the server, it opens a connection and communicates with your server over it.

    In the case of the client is a Browser, your connection will not be accessible to other browser sessions for security reasons.

    How to broadcast messages via rsocket

    Actually, in the case of browser, you can use 2 options:

    Broker kind of messaging

    You can always connect to a single mediator server which will ensure your messages are broadcast to all the destinations.

    You may find such an example of application at Spring Tutorials

    Broker less messaging with WebRTC transport (experimental and not officially released)

    We have a couple of experiments on bringing WebRTC (along with normal WebSocket) transport to the browser communication.

    Please find those experiments here. Please try it and share your feedback/vote on for this transport support at our issue tracker if you see the need for the one.