在 React Native 中使用 @stomp/stompjs 的 Web 套接字连接

Posted

技术标签:

【中文标题】在 React Native 中使用 @stomp/stompjs 的 Web 套接字连接【英文标题】:Web socket connections with @stomp/stompjs in React Native 【发布时间】:2021-12-30 10:32:12 【问题描述】:

我还是 React Native 的新手,我目前正在研究需要在 React Native 应用程序中实现 websocket 连接并订阅主题以接收来自 websocket 的消息的项目。当我尝试使用 @stomp/stompjs 实现它时,我无法连接到 websocket,onConnect 函数不起作用。

下面是我的代码

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();
, [])

这是我得到的输出日志

 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

任何帮助将不胜感激:)

【问题讨论】:

【参考方案1】:

伙计们,在做了一些研究后,我发现解决方案显然在 @stomp/stompjs 中存在某种类型的错误,用于反应原生,您可以查看有关该问题 here 我通过将这行代码添加到我的 stompConfig

解决了我的问题
stompConfig:
...,
forceBinaryWSFrames: true,
appendMissingNULLonIncoming: true,

【讨论】:

以上是关于在 React Native 中使用 @stomp/stompjs 的 Web 套接字连接的主要内容,如果未能解决你的问题,请参考以下文章

无法使用 @stomp/stompjs 订阅主题

React - 回调的关闭问题

使用 React-Native-Router-Flux 在 React Native 中嵌套场景

在带有 wix/react-native-navigation 的模态中使用 react-native-gesture-handler (RNGH)

尝试在 create-react-native-app 项目 (expo) 中使用 react-native-fs

React-native:如何在 React-native 中使用(和翻译)带有 jsx 的 typescript .tsx 文件?