Amin'ny maha-mpandrosoana, ny fametrahana taratasy taratasy amin'ny ankapobeny mba hanatsarana fampiharana dia nofy ratsy. Ny taratasy dia mety miasa na ho tonga amin'ny fahadisoana manan-danja alohan'ny fametrahana, ary tsy misy olona mahalala tena izay mitranga aorian'ny andro sy alina ny ezaka. Izany no toerana ahafahana miditra amin'ny SDK. Amin'ity tetikasa ohatra ity dia hampiseho anao ny fomba hananganana fampiharana React Native vaovao miaraka amin'ny fampahafantarana manokana, lahatsary antso sy feo antso amin'ny fampiasana SDK. Let's get started! Step 1: Make Sure Your Environment Is Ready dingana 1: Ataovy azo antoka fa vonona ny tontolo iainanao Alohan'ny hanombohana ny tetikasa, aoka isika hanamarina raha mifanaraka amin'ny fepetra rehetra ilaina ny rafitra. Minimum Requirements React Native version eo anelanelan'ny 0.73.0 sy 0.79.5 Node.js version 18.20.4 na mihoatra noho izany Ny famoahana ny famoahana ny famoahana ny famoahana ny famoahana ny famoahana ny famoahana ny famoahana ny famoahana ny famoahana ny famoahana. Important Note About New Architecture Raha mihoatra ny 0.76 ny dikan'ny React Native, dia mila manakana ny New Architecture aorian'ny fametrahana. For iOS, open your Podfile and set: ENV['RCT_NEW_ARCH_ENABLED'] = '0'
 For Android, open gradle.properties and set: newArchEnabled=false
 Manoro hevitra aho ny hanao izany alohan'ny. Nahoana? ka tsy mila manala olana any am-boalohany ianao. Step 2: Get Your SDK License Key dingana 2: Get ny SDK fahazoan-dàlana Mila lisansa fanalahidy ianao mba hamantatra ny SDK miaraka amin'ny mpizara. Here is how I got mine: Mifandray amin'ny ekipan'ny varotra Manana ny kaonty mpandrindra aho Tonga ao amin'ny Dashboard Copy ny lisansa fanalahidy avy amin'ny fampiharana fanadihadiana fizarana Raha manana iray ianao, dia azonao atao ny manala ity dingana ity. Step 3: Install the Chat SDK dingana 3: mametraka ny Chat SDK Mandeha ity baiko ity ao amin'ny tetikasa React Native: npm i mirrorfly-reactnative-sdk@2.4.1
 Aorian'ny fametrahana, alefa ny SDK na aiza na aiza ianao te-hanomboka azy, matetika ao amin'ny App.js na App.tsx. import { SDK } from "mirrorfly-reactnative-sdk";
 Step 4: Install Required Dependencies dingana 4: mametraka ny fampiharana ilaina Ny endri-javatra amin'ny chat sy ny antso dia miankina amin'ny fahasamihafana vitsivitsy sy JavaScript. Ampidiro azy ireo mazava ho azy mba hisorohana ny fifanarahana amin'ny dikan-teny. {

  "@react-native-community/netinfo": "^11.4.1",

  "react-native-get-random-values": "1.11.0",

  "realm": "^20.1.0",

  "react-native-fs": "^2.20.0",

  "moment": "2.30.1",

  "react-native-webrtc": "124.0.4",

  "react-native-background-timer": "^2.4.1",

  "react-native-permissions": "^5.2.1"

}
 Ny react-native-webrtc dia tsy maintsy ao amin'ny dikan'ny 124.0.4. Nandritra izany fotoana izany dia nianatra mafy aho taorian'ny nanandrana dikan-tsarimihetsika vaovao izay nandà ny asa antso. Step 5: Initialize the Messaging SDK dingana 5: Manomboka amin'ny SDK Messaging Alohan'ny fikarohana, matetika aho mametraka mpijery fifandraisana. Izany dia manampy ahy hanara-maso raha mifandray amin'ny mpizara ny fampiharana na tsia. function connectionListener(response) {

  if (response.status === "CONNECTED") {

    console.log("Connection Established");

  } else if (response.status === "DISCONNECTED") {

    console.log("Disconnected");

  }

}
 Amin'izao fotoana izao dia mamorona ny fitaovana initialization: const initializeObj = {

  apiBaseUrl: "https://api-preprod-sandbox.mirrorfly.com/api/v1",

  licenseKey: "YOUR_LICENSE_KEY",

  isTrialLicenseKey: true,

  callbackListeners: {

    connectionListener

  }

};
await SDK.initializeSDK(initializeObj);
 Raha miorina tsara ny zava-drehetra, dia hahazo valiny mahomby miaraka amin'ny code 200. Step 6: Register a User dingana 6: Register ny mpampiasa Ao amin'ny fampiharana, ny mpampiasa dia tsy maintsy voasoratra anarana alohan'ny hidirana amin'ny antso na hanombohana ny chat. Izany no ataontsika amin'ity dingana ity: const registerObject = {

  userIdentifier: "user_123",

  fcmtoken: "FCM_TOKEN",

  voipDeviceToken: "VOIP_TOKEN",

  mode: false,

  registerMetaData: {},

  forceRegister: false

};

await SDK.register(registerObject);
 Raha mahomby ny mpampiasa, ny SDK dia hamerina ny username sy ny tenimiafina. Step 7: Connect to the Server dingana 7: mifandray amin'ny mpizara Rehefa voasoratra anarana, ny fifandraisana amin'ny mpampiasa dia tsotra. await SDK.connect("USERNAME", "PASSWORD");
 Raha mahomby ny fifandraisana, ny fifandraisanaListener ihany koa dia ho niteraka. Izany no fomba mahazatra ny fanamafisana ny zava-drehetra miasa araka izay ilaiko. Step 8: Send Your First Message dingana 8 - Handefa ny hafatra voalohany Mba handefa hafatra ianao dia mila ny JID ny mpandray. const userJid = SDK.getJid("OTHER_USERNAME");
 Now send a message:

await SDK.sendTextMessage(

  userJid,

  "Hello, this is my first message",

  "msg_001",

  null

);
 Raha ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valin'ny valiny. Step 9: Receive Messages dingana 9: Hahazo ny hafatra Ny fampiharana dia mila mpijery hafatra mba hanomboka handray hafatra. Isaky ny fampiharana misy hafatra miditra na hetsika mifandraika amin'ny hafatra mitranga, ity mpijery ity dia hitarika. function messageListener(response) {

  console.log("New message received", response);

}
 Ataovy azo antoka fa ity mpijery ity dia navoaka nandritra ny fampidirana ny SDK ao amin'ny CallbackListeners. Step 10: Enable Audio and Video Calls dingana 10: Hamela ny antso sy ny lahatsary antso Rehefa miasa ny chat, ny fametrahana antso mahatsapa toy ny dingana manaraka. Initialize Call Listeners Ny antso dia mitaky mpijery bebe kokoa satria misy hetsika maro mifandraika. const incomingCallListener = res => {};

const callStatusListener = res => {};

const userTrackListener = res => {};

const missedCallListener = res => {};
 Ampidiro ireo amin'ny antso mitovy amin'ny initializeSDK. Step 11: Make a Voice Call dingana 11: manao antso antso To make an audio call: await SDK.makeVoiceCall(["USER_JID"]);
 Raha mahomby ny antso, dia hahazo ny ID efitrano sy ny toe-javatra antso amin'ny alàlan'ny mpijery ny toe-javatra antso. Step 12: Make a Video Call dingana 12: Manao lahatsary antso Ny antso amin'ny lahatsary dia miasa amin'ny fomba mitovy. await SDK.makeVideoCall(["USER_JID"]);
 Hahazo ny feo sy ny lahatsary ao amin'ny userTrackListener ianao. Aza milalao ny feo manokana mba hisorohana ny feo. Step 13: Receive and Handle Incoming Calls dingana 13: Hahazo sy handray ny antso avy amin'ny mpampiasa Rehefa mivantana amin'ny mpampiasa iray hafa ianao, ny CallListener tonga dia mamoaka ny antsipiriany momba ny antso rehetra. To answer the call: await SDK.answerCall();
 To end the call: await SDK.endCall();
 To decline an incoming call: await SDK.declineCall();
 OK!! Izany dia tena haingana. Efa vita ny fanorenana ny fampiharana React Native vaovao miaraka amin'ny chat sy ny antso fahaiza-manao. Ankehitriny, satria ity lahatsoratra ity dia maharitra loatra, dia manoro hevitra anao ny mitsidika ny MirrorFly Docs mba hitohy amin'ny fampidirana fahaiza-manao bebe kokoa. Efa niresaka momba ny rohy etsy ambany aho: MirrorFly API fanadihadiana MirrorFly API fanadihadiana Misaotra amin'ny famakiana ny lahatsoratra. Manantena aho fa nahalala zavatra vaovao ianao. Raha manana fanontaniana / valin-teny ianao, aza misalasala ny mamela fanehoan-kevitra. Ity lahatsoratra ity dia navoakan'ny HackerNoon Business Blogging Program. Ity lahatsoratra ity dia navoakan'ny HackerNoon Business Blogging Program.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Hot off the press! This story contains factual information about a recent event.

Read My Stories

Ity horonam-peo ity dia novokarina tamin'ny fiteny niandohan'ny tantara!

Ahoana no namorona fampiharana React Native miaraka amin'ny chat sy ny antso ao amin'ny fampiharana

About Author

COMMENTS

HANG TAGS

ITY ARTICLE ITY NO NARESAKA TAMIN'NY

Related Stories

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps