在 ReactNative 中使用 Strophe.js

Question

I am trying to build a ReactNative chat app. The backend consists of a Prosody XMPP/Bosh server. Now I want to connect by using the Strophe.js Javascript library. The problem that I have is that the Strophe.js library depends on the global document variable for generating XML nodes. Did anyone of you already have the same problem or has a clue how might get it working?

Answer 1

I found a working solution: Im using a ReactNative WebView running parallel and not Visible to my ReactNativeApp, similar to this Crypto (but with ReactNativeWebview! not React Native WebView Javascript Bridge)

In the WebView you can use Strophe, you just need to write a Wrapper for the Communication between RN and Strophe in the WebView.

I'll try to make gitRepo with a working Basic Version

(Check the Crypto Example: https://github.com/saulshanabrook/react-native-webview-crypto )

Answer 2

Javascript engine used in ReactNative is headless, meaning it does not provide global objects like navigator , document , location , etc. Other than that the browser is fully functional and has all XHR functionalities of a normal browser.

Storephe's communication with the server is all based on XHR requests. You only need to mock the document object to prevent Strophe from raising an exception when it can't find the document object. mock-browser build for that exact reason. A simple example of how to use it:

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

Answer 3

There are a few xmpp javscript libraries which may work with react-native. But they require further configuration.

There are also quite actively maintained xmpp libraries for react native. XMPP.js is one of them. They also provide plugin support. But, they are quite early in development and of course libraries like strophe.js are much more advanced.