如何修复前端的 RXStomp 客户端有时在生产服务器上不接收数据？

Question

Here is my configuration for RXStomp on frontend;

import { RxStompConfig } from '@stomp/rx-stomp';
import { environment } from '../../../environments/environment';

export const myRxStompConfig: RxStompConfig = {

  reconnectDelay: 20000,

  debug: (msg: string): void => {
    if (!environment.production) {
      console.log(msg);
    }
  },
};

Here is the code for the rxStompService;

import { Injectable } from "@angular/core";
import { RxStomp } from "@stomp/rx-stomp";
import SockJS from "sockjs-client";
import { environment } from "../../../environments/environment";
import { myRxStompConfig } from "../configurations/rx-stomp.config";

@Injectable({
  providedIn: "root",
})
export class RxStompService extends RxStomp {
  public currentRetry  = 0;

  public resetRetry() {
    this.currentRetry = 0;
  }
}

export function rxStompServiceFactory() {
  const rxStomp = new RxStompService();
  myRxStompConfig.webSocketFactory = function () {
    return new SockJS(`${environment.baseUrl}/public/chatsocket`);

  };
  rxStomp.resetRetry();
  myRxStompConfig.beforeConnect = (): Promise<void> => {
    return new Promise<void>((resolve, reject) => {
      if (rxStomp.currentRetry <= 5) {
        rxStomp.currentRetry++;
        resolve();
      }
    });
  };
  rxStomp.configure(myRxStompConfig);
  rxStomp.activate();
  return rxStomp;
}

The websocket was working fine until a couple of days ago when the socket broke on the production server and then we changed the URL of the websocket on the backend from public/websocket to public/chatsocket . The socket gets connected and then I subscribe to the required channel using

this.rxStompService.watch(`/user/${id}/message`).subscribe((message) => {
   console.log(message.body);
};

The messages send correctly on the backend (Springboot) using this code;

private void sendWebMessageToConversation(MessageResponseDto messageResponseDto, String destinationId) {
        try{
            simpMessagingTemplate.convertAndSendToUser(destinationId, "/message", messageResponseDto);
        }
        catch (Exception e){
            logger.error(e.getMessage(), e);
        }
    }

After debugging we found that the message gets filtered correctly and sent to all the users in a particular conversation via simpMessagingTemplate.convertAndSendToUser but the message does not get received on the frontend socket client RXStomp, even though the socket connection is established and the client is subscribed/watching the correct channel.

This feature works correctly on all of the test environments but for some reason there is an inconsistency when working on the production server. Sometimes one user subscribed to the channel will receive messages but the other won't. Or both users won't receive messages, or the feature works correctly and both receive messages properly. How do I fix this to make it work correctly all the time?

Answer 1

It is difficult to pinpoint issue without seeing more details. I believe the issue could most probably is because of the fact that there is no acknowledgement from frontend. Your code posted doesn't seem to have acknowledgement.

By default stomp is using auto ack. This will just send the message to frontend but won't ensure client received data. You probably will have to change the ack to client or client-individual depending on your requirement.

Check this link to see if you need to implement this for acknowledgement.

I also couldn't see any reconnection logic implemented. Try to implement that as well.