React native XMPP Client using stanza
December 14, 2020
React native XMPP Client using stanza.io
1. This is based off Matt Folley's implementation of XMPP client using stanza
2. Adding some caveats from my experience.
-> Doesn't WORK WITH EXPO based packaging i.e. create-react-naitve-app (CRNA) xmpprn WON'T WORK. CRNA has limitation on including node core modules.
-> Code doesn't cross compile for some linking reasons RNRandomBytes.seed not defined
i.e. Linux machine cannot create a ios app and vice versa
-> Works with ejabberd
-> the virtual host name in ejabberd has to be same as the domain name of the JID
Example alice@myhost should be hosted on a host named 'myhost'
If not then you need to modiy the connect call to specify the jabber server.
3. Steps.
install ejabberd
create a virtualhost named 'emacsdesktop' or any hostname you like
create 3 users with following user name password. (Simple password for demo)
Username Password
admin amdin
alice alice
bob bob
3.3 Create the app
# react-native init xmpprn
# cd xmpprn
# npm install stanza --save
# npm install react-native-browser-builtins --save
# npm install rn-nodeify --save-dev
# ./node_modules/.bin/rn-nodeify --install --hack
# Add the following line package.json
"postinstall": "rn-nodeify --install --hack"
# You should now be able to do a
import "./shim.js" # first line in roject
........
import * as XMPP from 'stanza';
<Normal stanza code>
# see Sample in App.js
additinal
wss://mydomain:5443/ws
https://github.com/legastero/stanza/blob/master/docs/React_Native.md
React Native Code
import "./shim"
import React ,{useEffect} from 'react'
import { Button, Text } from 'react-native'
import styled from 'styled-components/native';
import * as XMPP from 'stanza.io';
let client;
const App = () => {
useEffect(() => {
client = XMPP.createClient({
jid: 'userdemo@domain',
password: '',
transport: 'websocket',
wsURL: 'wss://domain:5443/ws'
})
client.on('session:started', () => {
//SESSION IS IMPORTANT without session you will not recevice message
client.getRoster();
client.sendPresence();
});
client.on('chat', (msg) => {
alert(msg.from.local + ':' + msg.body);
});
client.connect();
}, [])
const SendMessage=()=>{
client.sendMessage({
to: 'admin@domain',
body: 'input text data'
})
}
return (
<Container>
<Text>App</Text>
<Button title="Send" onPress={SendMessage}></Button>
</Container>
)
}
export default App
const Container = styled.View`
flex:1;
align-items:center;
justify-content:center;
`;