In questo tutorial, ti guideremo attraverso il processo completo di integrazione dell’SDK di Chat Mirrorfly nella tua app nativa React. Con questo React Native Chat SDKpuoi creare un’app di chat in tempo reale all’interno 10 minuti.
Andando avanti, tratteremo i seguenti passaggi:
- Installa l’SDK
- Inizializza SDK
- Registra gli utenti
- Connettiti al server Mirrorfly
- Invia e ricevi messaggi
Prima di iniziare, assicurati di avere i seguenti prerequisiti:
- Nodo: 14.20.0
- npm: 6.14.10
- reagire-nativo: 0.69.12
Ora iniziamo l’integrazione.
Inizia
- Installa le dipendenze NPM.
{ "@react-native-async-storage/async-storage": "^1.17.7",//Any model "react-native-get-random-values": "1.7.1",//should use model >=1.7.1 "react-native-document-picker" :"8.1.1",// should use model >=8.1.1 'realm': "^10.8.0", 'react-native-fs': "^2.18.0", '@react-native-community/netinfo': "^8.0.0", 'second': "2.29.4", 'rn-fetch-blob': "^0.12.0", 'react-native-compressor': "1.6.1", 'react-native-convert-ph-asset': "^1.0.3", 'react-
Ora, l’integrazione inizia.
Passaggio 1: Installa dipendenze
- Inizia aggiornando il tuo pacchetto.json file.
- Controlla attentamente eventuali pacchetti duplicati. Ciò è particolarmente cruciale se riscontri problemi su iOS.
Passaggio 2: Copia i file SDK
- Vai al cartella dist della chat specchio SDK e copiare tutti i file estratti.
- Crea una nuova listing nel tuo progetto nativo React e incolla tutti i file SDK copiati in esso.
Passaggio 3: Crea sdk.js
- All’interno del tuo progetto, crea un nuovo file denominato Sdk.js.
- Importare l’SDK nel Sdk.js file:
import './index';
const SDK = window.SDK;
export default SDK;Passaggio 4: Inizializza Chat SDK
Ora che hai integrato con successo l’SDK nel tuo progetto, è tempo di inizializzarlo.
- Per raggiungere questo obiettivo, utilizzerai il metodo inizializeDK.
- Incollare la chiave di licenza ottenuta nella sezione GIUNG INIZIA su parametro di licenza.
const initializeObj = {
apiBaseUrl: `API_URL`,
licenseKey: `LICENSE_KEY`,
isTrialLicenseKey: `TRIAL_MODE`,
callbackListeners: {},
};
await SDK.initializeSDK(initializeObj); Passaggio 5: Registra un utente
Per utilizzare la funzionalità di chat, è necessario prima registrare un utente. Usa il metodo di registro a questo scopo:
await SDK.register(`USER_IDENTIFIER`); Al momento della registrazione riuscita, riceverai una risposta contenente un nome utente e una password, essenziali per la connessione al server.
Risposta del campione:
{
statusCode: 200,
message: "Success",
information: {
username: "123456789",
password: "987654321"
}
}Passaggio 6: Connettersi al server Mirrorfly
Utilizzare le credenziali acquisite durante la registrazione per stabilire una connessione al server Mirrorfly. Puoi raggiungere questo obiettivo utilizzando il metodo Join:
await SDK.join(`USERNAME`, `PASSWORD`);
Risposta del campione:
{
message: "Login Success",
statusCode: 200
} Passaggio 7: Invia un messaggio
Per inviare un messaggio a un altro utente, utilizza il sendTextMessage metodo:
await SDK.sendTextMessage(`TO_USER_JID`, `MESSAGE_BODY`,`MESSAGE_ID`,`REPLY_TO`);
Assicurati di fornire il jid del destinatario, il corpo del messaggio, un ID messaggio univoco e un riferimento opzionale al messaggio a cui rispondi.
Risposta del campione:
{
"message": "",// String - Success/Error Message
"statusCode": "" // Quantity - standing code
}Passaggio 8: Ricevi un messaggio
Per ricevere messaggi da altri utenti, implementa la funzione Messagelistener. Questa funzione verrà attivata ogni volta che ricevi un nuovo messaggio. È possibile aggiungere questo metodo di callback durante il processo di inizializzazione.
operate messageListener(response) {
console.log("Message Listener", response);
}Passaggio 9: Ottieni chat recenti
Per ottenere il recente elenco di chat sulla tua app, devi aggiungere il seguente codice:
await SDK.getRecentChatsDB();
Risposta del campione:
{
"message": "",// String - Success/Error Message
"statusCode": "" // Quantity - standing code
"information": (
{
"chatType": "chat",
"createdAt": "2023-09-06 10:52:46",
"deleteStatus": 0,
"fromUserId": "", // String - fromUserId
"msgBody": {
"nickName": "",
"mid": "",// String - consumer mid
"message": "",// String - Person Textual content Mesaage
"message_type": "",// String - Person Textual content Mesaage Sort
"replyTo": "",
"mentionedUsersIds": ""
},
"msgId": "",// String - consumer msgId
"msgStatus": 1,
"msgType": "",// String - msgType
"muteStatus": 0,
"publisherId": "",// String - consumer Quantity
"timestamp":"",// quantity timestamp
"toUserId": "",
"unreadCount": 0,
"userId": "",// String - userId
"userJid": "",// String - userJid
"profileDetails": {
"nickName": "",// String - Person Identify
"picture": "",// String - picture
"standing": "",//String - Person standing
"colorCode": "#7b0b88",
"userId": "",// String - userId
"userJid": "",// String - userJid
"e-mail": "",//String - Person E mail-Id
"mobileNumber": "",//String - Person cellular quantity
"isAdminBlocked": 0
}
},
)
} Passaggio 10: Ricevute di messaggio
Per ottenere lo stato di visualizzazione del messaggio, dovrai utilizzare il seguente metodo:
await SDK.sendSeenStatus(`TO_USER_JID`, `MESSAGE_ID`);
Passaggio 11: Elimina il messaggio dal mittente
Per eliminare un messaggio inviato dalla high quality del mittente, dovrai utilizzare il seguente codice
await SDK.deleteMessagesForMe(`TO_JID`, `MESSAGE_IDS`);
Risposta del campione:
{
statusCode: "", // Quantity - standing code
message: "", // String - Success/Error Message
} Passaggio 12: Elimina il messaggio sia dal mittente che dal ricevitore
Per eliminare un messaggio inviato sia dal mittente che dal destinatario, dovrai utilizzare il seguente codice:
await SDK.deleteMessagesForEveryone(`TO_JID`, `MESSAGE_IDS`);
Risposta del campione:
{
statusCode: "", // Quantity - standing code
message: "", // String - Success/Error Message
} Passaggio 13: Notifiche push
Per abilitare le notifiche push, è necessario integrare Firebase nella tua app. Segui i passaggi seguenti per raggiungere questo obiettivo:
- Vai alla console Firebase e crea un nuovo progetto con il nome del pacchetto app. Ex:
com.testapp. - Quindi, scarica il google-service.json.
- Vai al tuo/Android/App/cartella nella tua app e aggiungi il google-service.json file.
Reagire l’installazione della base di fuoco nativa
Installa il pacchetto Firebase per React Native utilizzando il seguente codice:
Usando NPM
npm set up --save @react-native-firebase/app
@react-native-firebase/messaging Usando il filo
yarn add @react-native-firebase/app
@react-native-firebase/messaging Aggiungi configurazioni Firebase advert Android
È necessario abilitare il plug-in Google-Providers per consentire a Firebase di utilizzare le credenziali in Android.
Per fare ciò, dovrai modificare due file nella listing Android.
È necessario aggiungere il plug-in dei servizi Google come dipendenza all’interno del tuo /android/construct.gradle file.
buildscript {
dependencies {
// ... different dependencies
classpath ("com.google.gms:google-services:4.3.15")
// Add me --- /
}
} Quindi, aggiungi quanto segue al file /android/app/construct.gradle per eseguire il file.
apply plugin: 'com.android.software'
apply plugin: 'com.google.gms.google-services' // Infine, aggiungi quanto segue al tuo file AndroidManifest.xml ed esegui il plug -in.
Registra l’utente con token FCM
import messaging from '@react-native-firebase/messaging';
const fcmToken = await messaging().getToken();
await SDK.register('USER_IDENTIFIER', 'FCM_TOKEN'); Risposta del campione:
{
statusCode: 200,
message: "Success",
information: {
username: "123456789",
password: "987654321"
}
} Configurazione per la gestione dei messaggi in background
Aggiungi il seguente codice al file index.js.
import messaging from '@react-native-firebase/messaging';
const fcmToken = await messaging().getToken();
await SDK.register('USER_IDENTIFIER', 'FCM_TOKEN'); Risposta del campione:
{
msgType: "", // String - worth "receiveMessage"
chatType: "", // String - Chat Sort - "chat" - Single
publisherJid: "", // String - Jid - One Who Sends the Message
publisherId: "", // String - Id - One Who Sends the Message
fromUserJid: "", // String - From Person Jid -
// Will Be Identical as PublisherJid in Case of Single Chat
fromUserId: "", // String - From Person Id
toUserJid: "", // String - Jid - One Who Receives the Message
toUserId: "", // String - To Person Id - One Who Receives the Message
metaData: {}, //Object - Meta information for the message
msgBody: {
message: "", // String - Message Physique
message_type: "", // String - Message Sort textual content, picture, video, audio & file
nickName: "", // String - Person Nickname
mentionedUsersIds: () // Array - Talked about Ids In case of Group
media: { // For Media Message Solely
androidHeight: 0,
androidWidth: 0,
audioType: "" // String - "file" or "recording"
caption: "", // String - Media Caption
length: "", // String - Length - For Audio/Movies
fileName: "", // String - File Identify
file_key: "", // String - File Key
file_size: "", // Quantity - File Measurement
file_url: "", // String - File Url
is_downloaded: "", // Quantity - Downloaded Standing
is_uploading: "", // Quantity - Importing Standing
local_path: "", // String - Native Path
msgId: "", // String - Message Id
originalHeight: 0, // Quantity
originalWidth: 0, // Quantity
thumb_image: "", // Base64 - Thumb Picture
webHeight: 0, // Quantity
webWidth: 0, // Quantity
}
},
msgId: "", // String - Message Id
topicId: "", //String - Subject Id for the message
msgStatus: "", // Quantity - Message Standing
timestamp: 1681185232284, // Quantity - TimeStamp - Milliseconds
profileDetails:{
{
e-mail: "", // String
fromUser: "", // String
picture: "", // String - File Url
mobileNumber: "", // String
nickName: "", // String
standing: "", // String
thumbImage: "", // Base64 - Thumb Picture
userId: "", // String
}
} Conclusione
Ora siamo arrivati alla high quality di questo tutorial. Per dare un rapido riepilogo, ti sei imbattuto nei passaggi completi per aggiungere funzionalità di chat all’app Nativa React utilizzando Mirrorfly SDK. Successivamente, hai imparato i passaggi per aggiungere funzionalità come messaggi di invio/ricezione, ricevute di chat e notifiche push (integrando Firebase).
In caso di domande su questi passaggi, puoi contattare direttamente il staff di supporto tecnico o fare riferimento a questo documentazione.
