将 Strophe.js 与 React Native 一起使用

Posted

技术标签:

【中文标题】将 Strophe.js 与 React Native 一起使用【英文标题】:Using Strophe.js with ReactNative 【发布时间】:2015-11-06 16:00:01 【问题描述】:

我正在尝试构建一个 ReactNative 聊天应用程序。后端由 Prosody XMPP/Bosh 服务器组成。现在我想使用 Strophe.js javascript 库进行连接。我遇到的问题是 Strophe.js 库依赖于全局 document 变量来生成 XML 节点。你们中是否有人已经遇到过同样的问题或知道如何让它工作?

【问题讨论】:

嘿 sebbo,我知道你已经有一段时间没有问过了,但你成功了吗?如果您愿意,我很想与您快速聊天讨论这个问题,这将对我有很大帮助!干杯 嗨@PrettyGoodPancake 不幸的是我找不到一个简单的方法让它工作所以我基本上切换到第三方消息服务(sendbird.com) 你试过github.com/node-xmpp/node-xmpp 吗?我认为 NodeJS 库更有可能在 RN 中工作。 【参考方案1】:

我找到了一个可行的解决方案: 我使用的是并行运行的 ReactNative WebView,并且对我的 ReactNativeApp 不可见,类似于此 Crypto(但使用 ReactNativeWebview!不是 React Native WebView Javascript Bridge)

在WebView中可以使用Strophe,只需要在WebView中为RN和Strophe的通信编写一个Wrapper即可。

我会尝试使用基本版本来制作 gitRepo

(检查加密示例: https://github.com/saulshana***/react-native-webview-crypto )

【讨论】:

【参考方案2】:

在 ReactNative 中使用的 Javascript 引擎是无头的,这意味着它不提供全局对象,如 navigatordocumentlocation 等。除此之外,浏览器功能齐全并且具有所有 XHR 功能普通浏览器。

Storephe 与服务器的通信都是基于 XHR 请求。您只需要模拟文档对象以防止 Strophe 在找不到 document 对象时引发异常。 mock-browser 正是出于这个原因而构建。如何使用它的一个简单示例:

let MockBrowser = require('mock-browser').mocks.MockBrowser;
let mock = new MockBrowser();
GLOBAL.window = mock.getWindow()
GLOBAL.document = mock.getDocument()
GLOBAL.navigator = mock.getNavigator()

【讨论】:

嘿@bman,你试过这个解决方案吗?我似乎无法使用 RN 让它工作。你介意分享更多关于如何开始使用 Strophe + Mock-browser 的代码吗?非常感谢! 嗨,你有没有找到任何适用于 react native 的 xmpp 客户端解决方案?【参考方案3】:

有一些 xmpp javscript 库可以与 react-native 一起使用。 但它们需要进一步配置。

还有一些非常积极维护的用于 react native 的 xmpp 库。 XMPP.js 就是其中之一。他们还提供插件支持。 但是,它们还处于开发的早期阶段,当然像 strophe.js 这样的库要先进得多。

【讨论】:

以上是关于将 Strophe.js 与 React Native 一起使用的主要内容,如果未能解决你的问题,请参考以下文章

无法在 windows phone 7.5(vs2010) 上使用 strophe.js 保持与 XMPP 服务器的连接

Strophe.js Jabber 搜索 (XEP-0055)

在 Angular 6 中连接到 Strophe.js

使用webpack找不到Strophe插件

使 RID 与 Strophe js 连接的多个选项卡保持同步

使用 strophe.js 和 punjab 将 Google Talk 集成到 Web 应用程序