React, React Native and Capacitor

React

import { RealtimeProvider, useChannel, usePresence, useCalls, CallScreen, CallButton, RoomButton } from '@wordplus/realtime/react';

export default function App() {
    return (
        <RealtimeProvider options={ { site: 's1500000007', worker: '/realtime-worker.js', rooms: '/realtime-rooms.min.js' } }>
            <CallScreen />
            <Order id={ 42 } />
        </RealtimeProvider>
    );
}

function Order( { id } ) {
    const [ status, setStatus ] = useState( 'open' );
    const channel = useChannel( `private-orders-${ id }`, { updated: ( data ) => setStatus( data.status ) } );
    const agents = usePresence( 'presence-agents' );

    return (
        <>
            <p>{ status } { channel.state === 'failed' && channel.error }</p>
            { agents.map( ( a ) => <CallButton key={ a.id } to={ Number( a.id ) } call={ `support-${ id }` } name={ a.info?.name }>Call { a.info?.name }</CallButton> ) }
        </>
    );
}

<RealtimeProvider options onError>	connects once for everything inside, and closes when it goes; options are connect()'s or your server's config()
useRealtime()	the connection (Realtime), or null until it's up
useChannel( name, handlers )	listens while the component is on the page; gives { state, error, trigger( event, data ) }; null listens to nothing
usePresence( name )	the members, [ { id, info } ], kept up to date
useCalls()	{ calls, incoming }: the page's calls once loaded, and those ringing
<CallScreen strings? />	starts the call screen (calls)
<CallButton to call type name avatar>, <RoomButton room type title>	its buttons

Several components may listen to one channel: it is left when the last of them goes.

Next.js: the React entry is a client module ('use client'). Render the user's settings on the server to skip a request: const config = await realtime.config( userId ) in a server component, then <RealtimeProvider options={ config }>.

React Native

import 'react-native-get-random-values';   // first: sealing needs crypto.getRandomValues
import { connect } from '@wordplus/realtime/native';

const rt = await connect( {
    site: 's1500000007',
    endpoint: 'https://app.example.com/api/realtime',          // in full
    headers: { Authorization: 'Bearer ' + session.token },      // how your server knows the user
} );

• Channels, presence, client events, publishing and the directory, sealed as in a browser.
• No worker and no address: a native app connects by itself and sends no Origin, which WordPlus Cloud lets in.
• Your server's user( request ) reads the user from the Authorization header, or whatever your app sends.
• Calls in React Native come later (they need a WebRTC module).

Capacitor and Ionic

An app in Capacitor or Ionic is a page: use @wordplus/realtime as in a browser, and add its address to your app in WordPlus Cloud: capacitor://localhost on iOS, https://localhost (or http://localhost) on Android, ionic://localhost for Ionic's. Calls work there as in the browser. Your routes need their full address (endpoint: 'https://app.example.com/api/realtime'), and your server must answer the app's address with CORS.