时间戳

首页 > 解决方案 > 使用 Stomp Client 订阅主题，但我没有收到任何通知 无法使用 React Native 并使用 Angular

javascript - 使用 Stomp Client 订阅主题，但我没有收到任何通知 无法使用 React Native 并使用 Angular

问题描述

我想订阅该主题，SockJS并将Stomp Client订阅放在客户端内部onConnect函数中以确保客户端已连接，这是我的配置：

import getEnvVars from "./environment";
import { socketUrl } from "../services/GlobalUrls";
import SockJS from "sockjs-client";
import { Client } from "@stomp/stompjs";
/**
 * Please notice that this import not used on this file
 * but used on the library of this file
 * so please don't delete it or the app will throw an error
 *  */
import * as encoding from "text-encoding";

const url = getEnvVars().apiUrl + socketUrl;
let _stompClient = null;

const webSocket = () => {
  //const [message, newMessage] = useState();

  _stompClient = new Client({
    brokerURL: url,
    connectHeaders: {},
    debug: (str) => {
      console.log(str);
    },
    reconnectDelay: 500,
    heartbeatIncoming: 4000,
    heartbeatOutgoing: 4000,
    logRawCommunication: false,
    webSocketFactory: () => {
      return SockJS(url);
    },
    onStompError: (frame) => {
      console.log("Stomp Error", frame);
    },
    onConnect: (frame) => {
      console.log("Stomp Connect", frame);
      if (_stompClient.connected) {
        _stompClient.subscribe("topic/notification", (message) => {
          console.log("message");
          if (message.body) {
            let notification = JSON.parse(message.body);
            if (notification.type == "MESSAGE") {
              console.log("MESSAGE", notification);
            } else if (notification.type == "INVITATION") {
              console.log("INVITATION", notification);
            } else if (notification.type == "REMOVED") {
              console.log("REMOVED", notification);
            }
          }
        });
      }
    },
    onDisconnect: (frame) => {
      console.log("Stomp Disconnect", frame);
    },
    onWebSocketClose: (frame) => {
      console.log("Stomp WebSocket Closed", frame);
    },
    onWebSocketError: (frame) => {
      console.log("Stomp WebSocket Error", frame);
    },
  });

  _stompClient.activate();
  return _stompClient;
};

export default webSocket;

在我的反应原生组件上：

  useEffect(() => {
    webSocket();
  }, []);

我的调试显示：

Opening Web Socket...
accept-version:1.0,1.1,1.2
heart-beat:4000,4000
Web Socket Opened...
heart-beat:0,0
version:1.2
content-length:0
id:sub-0
destination:topic/notification/8
>>> CONNECT
accept-version:1.0,1.1,1.2
heart-beat:4000,4000


Received data
<<< CONNECTED
heart-beat:0,0
version:1.2
content-length:0


connected to server undefined
Stomp Connect FrameImpl {
  "_binaryBody": Uint8Array [],
  "command": "CONNECTED",
  "escapeHeaderValues": false,
  "headers": Object {
    "heart-beat": "0,0",
    "version": "1.2",
  },
  "isBinaryBody": true,
  "skipContentLengthHeader": false,
}
>>> SUBSCRIBE
id:sub-0
destination:topic/notification

angular 应用程序上显示了相同的调试，我收到了消息，但在我的 react native 应用程序上我什么也没得到。角度设置：

 const ws = new SockJS(this.globalService.BASE_URL + "/socket");
    this.stompClient = Stomp.over(ws);
    this.stompClient.debug = () => {};
    const that = this;
    this.stompClient.connect({}, function(frame) {
      that.stompClient.subscribe(
        "/topic/notification",
        message => {
          if (message.body) {
            let notification = JSON.parse(message.body);
            if (notification.type == "MESSAGE") {
              that.messageListService.setNotificationObs(notification);
            } else if (notification.type == "INVITATION") {
              that.messageListService.setInvitationNotificationObs(notification);
            } else if (notification.type == "REMOVED") {
              that.messageListService.removeInvitationNotificationObs(notification);
            }
          }
        }
      );
    });

标签： javascriptreact-nativesocketswebsocketstompjs

解决方案

好的，我找到了配置客户端的正确方法，也许这将对未来的任何人有所帮助

我需要实例化客户端_stompClient = new Client();，然后像这样配置它：

_stompClient.configure({
    ...
    onConnect: (frame) => {
      console.log("onConnect");
      _stompClient.subscribe("/topic/notification", (message) => {
                   console.log(message.body);
      });
    },
   ...
  });

  _stompClient.activate();

我在调试时收到了我的消息。

在这里回答

推荐阅读