Réagissez au chat multi-utilisateurs avec le backend Chatix

Je vais maintenant vous montrer comment créer un chat pour l'équipe / utilisateurs / amis si vous n'avez pas votre backend ou si vous ne voulez pas passer du temps à le développer. Nous ferons un simple chat textuel et cela nous prendra environ une heure.

Pour écrire un chat réseau fonctionnel sans backend est presque impossible, il doit être sous une forme ou une autre. Nous utiliserons Chatix et son SDK JavaScript. Chatix et SDK seront engagés dans le stockage des messages et les tâches réseau, et nous nous occuperons du front-end.

Le code du projet terminé est disponible sur GitHub
Démo

Structure du projet

• App (le composant racine de l'application, agit en tant que dépositaire d'État, car dans cette leçon, nous n'ajouterons ni Redux ni aucun autre gestionnaire d'État)
  
  • En-tête (l'en-tête de notre application qui affiche le logo, le nom du chat et permet à l'utilisateur d'écrire son nom)
  • LogoHeader
  • Titre de la pièce
  • Principal
  • MemberList (liste de chat)
    
    • MemberItem []
  • ChatField (un conteneur pour tout ce qui concerne les messages de chat)
    
    • Messagecontainer
    • Message [] (présentation du message; dans cette leçon, nous ne travaillerons qu'avec des messages texte)
    • SendMessageForm (formulaire pour envoyer un nouveau message de chat)
  • ChatixSDK (composant sans tête chargé de travailler avec le backend)

Remarque importante sur le stockage d'état. Bien sûr, il serait plus pratique d'ajouter Redux ici et de traiter les changements d'état, mais pour gagner du temps, nous stockons l'état dans le composant racine de l'application et transmettons les données aux composants enfants et appelons leurs parents à partir des méthodes enfants.
Par exemple, lorsque nous aurons le nom du chat, nous l'enregistrerons dans l'état du composant App et le passerons par les props : App → Header → RoomTitle . Lorsque l'utilisateur écrit un message, nous le transférons de SendMessageForm vers l'application: SendMessageForm → ChatField → Main → App .

Notre chat ressemblera à ceci dans la conception:

Interaction entre les composants

Nos composants doivent se transmettre des données et pour que tout fonctionne comme il se doit, déterminons maintenant comment ils vont interagir les uns avec les autres.

Comme vous pouvez le voir sur la figure, le composant principal pour nous est l' App , qui fournit des données aux composants enfants (en raison de la réactivité, nous attribuons simplement prop et le composant enfant répondra aux changements), et les composants enfants transmettent successivement des appels de méthode à l' App . Ce n'est pas la meilleure architecture qui puisse (et devrait) être faite pour un projet de production, mais elle fera l'affaire pour notre leçon.

Création de projet

Créer des composants visuels

Chapeau

1. Vous devez d'abord créer un nouveau projet, pour cela, nous utiliserons create-react-app .

   
   

    npx create-react-app chatix-chatroom cd chatix-chatroom 

   
   

   Exécutez le projet avec la commande

   
   

    npm start 

   
   

2. Commençons par créer un en-tête.
   Tout d'abord, ajoutez un logo à l'en-tête. Pour ce faire, dans le dossier src, créez le dossier des composants et dans celui-ci le dossier logo_header . Nous téléchargeons le logo dans ce dossier et créons 2 fichiers LogoHeader.js et LogoHeader.css

   
   

LogoHeader.js

 import React from 'react' import logo from './chatix_logo.svg'; import './LogoHeader.css'; function LogoHeader(){ return ( <div className="LogoHeader"> <img src={logo} className="App-logo" alt="Chatix logo" /> </div> ); } export default LogoHeader; 

LogoHeader.css

 .LogoHeader{ flex-basis: 200px; flex-grow: 0; flex-shrink: 0; } 

Tout est clair ici, dans ce composant un fichier avec un logo et des styles est simplement importé.

Je n'ajouterai plus le code des feuilles de style ici, vous pouvez les voir sur la page du projet terminé

Affichez maintenant le nom du salon de discussion. Pour ce faire, créez un dossier de titre de pièce et le composant RoomTitle . Nous allons jeter le nom dans ce composant via des accessoires, nous écrivons donc props.chatroomName et maintenant nous allons le transférer ici.

Titre de la pièce

 import React from 'react'; import './RoomTitle.css'; function RoomTitle(props){ return ( <div className="RoomTitle"> <h1>{props.chatroomName}</h1> </div> ); } export default RoomTitle; 

Ensuite, nous créons le composant d'en-tête lui-même et y plaçons le logo et le nom de la salle de chat. Jetez immédiatement le nom du chat dans le composant enfant via prop chatroomName .

Je vous rappelle que nous avons convenu que toutes les données (état de l'application) seront stockées par le composant racine de l' application . De là, nous transférerons d'abord l'en- tête vers Header et de Header vers RoomTitle .

composants \ header \ Header.js

Header.js

 import React from 'react'; import './Header.css' import LogoHeader from '../logo_header/LogoHeader'; import RoomTitle from '../room-title/RoomTitle'; function Header(props) { return ( <header> <LogoHeader/> <RoomTitle chatroomName={props.chatroomName} /> </header> ); } export default Header; 

Ensuite, ouvrez le fichier App.js et ajoutez-y le composant Header.js .
Ensuite, nous ajoutons le nom à l' état et le transmettons à l'en- tête via des accessoires .
Dans l'en-tête, vous devez également ajouter le nom de l'utilisateur actuel. Pour ce faire, ajoutez l'objet utilisateur à l'état et transférez-le de la même manière à l'en-tête

 import React from 'react'; import './App.css'; import Header from './components/header/Header'; class App extends React.Component { constructor(props){ super(props); chatroomName: '-', me: { is_online: true, name: "", uuid: "98s7dfh9a8s7dhf" } } render() { return ( <div className="App"> <Header chatroomName={this.state.chatroomName} me={this.state.me} /> </div> ); }; } export default App; 

Maintenant, dans l'en-tête, vous devez ajouter une entrée avec le nom de l'utilisateur actuel et affecter le gestionnaire à modifier afin que nous puissions transférer le nouveau nom d'utilisateur vers le composant App .

Pour cela, nous ajoutons la fonction handleChangeName props.updateVisitor à l'entrée avec le nom et appelons la fonction de rappel props.updateVisitor dans laquelle nous transmettons l'objet utilisateur avec le nom mis à jour.

Header.js

 function Header(props) { const [name, setName] = useState(props.me.name ? props.me.name : props.me.uuid.substr(-10)) const handleChangeName = (e) => { setName(e.target.value) let visitor = {...props.me}; visitor.name = e.target.value; props.updateVisitor(visitor) } return ( <header> <LogoHeader/> <RoomTitle chatroomName={props.chatroomName}/> { props.me ? <input className='name-input' value={name} placeholder=' ' onChange={(e) => handleChangeName(e)} /> : null } </header> ); } 

Ajoutez maintenant cette fonction props.updateVisitor à l' application et props.updateVisitor -la à l'en- props.updateVisitor . Jusqu'à présent, il met simplement à jour l'objet utilisateur dans l'état, mais ensuite, nous mettrons à jour l'utilisateur sur le serveur.

 onUpdateVisitor = (visitor) => { this.setState({me: visitor}) } 

Donc, maintenant, notre application ressemble à ceci et ne sait pour l'instant que mettre à jour le nom. Continuez

Barre latérale

Passons maintenant à la création d'une barre latérale.
La barre latérale sera située à l'intérieur du composant principal sur la page Main.js.
Nous le créons components \ main \ Main.js , puis créons un composant avec une liste d'utilisateurs components \ member-list \ MemberList.js et créons immédiatement un composant qui affichera les utilisateurs eux-mêmes components \ member-item \ MemberItem.js .

Pour clarifier la relation entre ces 3 composants, jetez un œil au plan du projet au début de l'article.

Les composants sont créés, maintenant allons-y dans l'ordre.
Tout d'abord, ajoutez le tableau d'utilisateurs à l'état du composant App et ajoutez le composant Main . Ensuite, nous transmettrons ces utilisateurs dedans.

L'appli

 class App extends React.Component { constructor(props) { super(props); this.state = { chatroomName: '-', members: [ { is_online: true, name: "", uuid: "98s7dfh9a8s7dhf" }, { is_online: true, name: "", uuid: "mnzxcv97zx6chvo" }, { is_online: false, name: "", uuid: "kjuhv987ashdfoua" }, { is_online: false, name: "", uuid: "jdhnf978WEHJSNDL" }, ], me: { is_online: true, name: "", uuid: "98s7dfh9a8s7dhf" } }; } render() { return ( <div className="App"> <Header chatroomName={this.state.chatroomName} me={this.state.me} /> <Main members={this.state.members} me={this.state.me} /> </div> ); }; } 

Dans le composant principal , ajoutez le composant MemberList et transférez-y le tableau d'utilisateurs.

Main.js

 function Main(props) { return( <section className="Main"> <MemberList members={props.members} /> </section> ); } 

Et dans le composant MemberList, nous parcourons tous les utilisateurs et pour chaque retour le composant MemberItem et lui passons l'objet utilisateur.

MemberList.js

 function MemberList(props) { const members = props.members.map((member) => <MemberItem key={member.uuid} member={member} /> ); return ( <section className="MemberList"> {members} </section> ); } 

Le composant MemberItem affiche déjà directement l'utilisateur dans la barre latérale. Nous y vérifions le nom de l'utilisateur, s'il n'est pas installé, puis affichons les 10 premiers caractères de l'identifiant. Nous vérifions également le statut en ligne / hors ligne et comparons l'identifiant avec l'identifiant de l'utilisateur actuel, de sorte qu'en face de lui pour afficher la marque "(You)".

 function MemberItem(props) { function getName(){ let name = '' if (props.member.uuid === props.me.uuid) { if(props.me.name) { name = props.me.name } else { name = props.me.uuid.substring(props.me.uuid.length-10, props.me.uuid.length); } } else { if(props.member.name){ name = props.member.name } else { name = props.member.uuid.substring(props.member.uuid.length-10, props.member.uuid.length); } } return name; } return( <div className="MemberItem"> <img src={ icon } alt={ props.member.name }/> <span> { getName() } { props.member.uuid === props.me.uuid && " () " } </span> { props.member.is_online && <span className="online">•</span> } </div> ); } 

C'est fait. Maintenant, l'application ressemble déjà à ceci

Liste des messages et formulaire de soumission

Nous allons maintenant traiter de la liste des messages et de la forme d'envoi.
Tout d'abord, ajoutez un tableau avec des messages à l'état du composant App .

L'appli

 this.state = { chatroomName: '-', messages: [ { content: " 1", sender_id: "mnzxcv97zx6chvo", uuid: "dg897sdfg" }, { content: " 2", sender_id: "98s7dfh9a8s7dhf", uuid: "8723hernm" }, { content: "  ", sender_id: "mnzxcv97zx6chvo", uuid: "435nbcv98234" } ], members: [ { is_online: true, name: "", uuid: "98s7dfh9a8s7dhf" }, { is_online: true, name: "", uuid: "mnzxcv97zx6chvo" }, { is_online: false, name: "", uuid: "kjuhv987ashdfoua" }, { is_online: false, name: "", uuid: "jdhnf978WEHJSNDL" }, ], me: { is_online: true, name: "", uuid: "98s7dfh9a8s7dhf" } }; 

Et les transmettre au composant principal

L'appli

  <Main members={this.state.members} messages={this.state.messages} me={this.state.me} /> 

Créez maintenant les composants composant / chat-field / ChatField.js
Connectez-le à Main et transférez-y les messages.

Principal

 function Main(props) { return( <section className="Main"> <MemberList me={props.me} members={props.members} /> <ChatField messages={props.messages} /> </section> ); } 

Ensuite, créez le composant conponents / message-container / MessageContainer.js
Connectez-le à ChatField et transférez -y également des messages.

Chatfield

 function Main(props) { return( <section className="Main"> <MemberList me={props.me} members={props.members} /> <ChatField messages={props.messages} /> </section> ); } 

Ensuite, nous parcourrons tous les messages et pour chaque retour le composant qui le montrera.
Créons-le conponents / message / Message.js . Nous y affichons l'icône du visiteur, son nom ou son identifiant si aucun nom n'est spécifié et le texte du message lui-même.

Message

 function Message(props) { const getSenderName = () => { if (props.sender) { return props.sender.name ? props.sender.name : props.sender.uuid.substr(-10); } return "Unknown sender"; }; return( <div className="Message"> <div className="message-sender-icon"> <img src={icon} alt="visitor icon"/> </div> <div className="message-bubble"> <div className="message-sender-name">{getSenderName()}</div> <div className="message-content">{props.message.content}</div> </div> </div> ); } 

Maintenant, dans un MessageContainer, nous parcourons tous les messages et pour chaque retour le composant Message auquel nous passons l'objet message

Messagecontainer

 function MessageContainer(props) { const messageList = props.messages.map(message => <Message key={message.uuid} sender={props.members.find((member) => member.uuid === message.sender_id)} message={message} /> ); return ( <section className="MessageContainer" ref={messagesContainer}> {messageList} </section> ); } 

Maintenant, le projet ressemble à ceci:

Créez maintenant un composant avec un formulaire pour envoyer des messages composants / send-message-form / SendMessageForm.js . Dans celui-ci, nous allons créer une entrée et un bouton pour l'envoi. Lorsque l'entrée est modifiée, son texte est écrit dans l'état et lorsque vous cliquez sur le bouton, nous appelons la fonction de rappel onSendNewMessage et transférons le message de l'état vers celui-ci. onSendNewMessage allons créer la fonction onSendNewMessage un peu plus tard dans le composant App et la transmettre via des accessoires.

Sendmessageform

 class SendMessageForm extends React.Component { constructor(props) { super(props); this.state = { message: '' }; } currentMessageChanged = (e) => { this.setState({message: e.target.value }); } sendMessageClicked = async (e) => { e.preventDefault(); if (this.state.message.length > 0) { await this.props.onSendNewMessage(this.state.message); this.setState({...this.state, ...{message : ''}}); } } render(){ return ( <section className="SendMessageForm"> <form> <input type="text" value={this.state.message} onChange={this.currentMessageChanged} placeholder="Type message to send"/> <button type="submit" onClick={this.sendMessageClicked} > Send </button> </form> </section> ); } } 

Placez maintenant le composant SendMessageForm à l'intérieur de ChatField .

Chatfield

 function ChatField(props) { return( <section className="ChatField"> <MessageContainer members={props.members} messages={props.messages} /> <SendMessageForm onSendNewMessage={props.onSendNewMessage}/> </section> ); } 

Dans le composant principal , nous onSendNewMessage également onSendNewMessage fonction onSendNewMessage dans ChatField .

Principal

 <ChatField members={props.members} messages={props.messages} onSendNewMessage={props.onSendNewMessage} /> 

Créez maintenant cette fonction dans l' application et transférez-la à Main .

L'appli

 onSendNewMessage = async (message) => { console.log(message) } 

L'appli

 <Main members={this.state.members} messages={this.state.messages} onSendNewMessage={this.onSendNewMessage} me={this.state.me} /> 

C'est fait. Maintenant, lorsque vous cliquez sur le bouton Envoyer un message, il sera transféré vers le composant App .
Maintenant, l'application ressemble à ceci:

Donc, maintenant tout est affiché dans notre application et tout fonctionne comme il se doit, mais jusqu'à présent avec des données statiques, et afin de revitaliser notre chat, vous devez l'associer au backend.

Connexion backend

Pour ce faire, la première chose que vous devez faire est d'installer le package chatix-core .

 npm i chatix-core 

Créez ensuite un compte sur chatix et créez une salle de chat. Pour ce faire, allez sur chatix.io et inscrivez-vous.
Après l'enregistrement, vous pouvez voir l' identifiant du site websiteId dans l'interface d'administration sur la page des paramètres de chat.

Nous créons maintenant une nouvelle salle de chat avec laquelle nous allons travailler.

Nous revenons à notre projet et créons un nouveau composant à travers lequel nous travaillerons avec le serveur.
composants \ chatix \ ChatixSDK.js

Nous y importons ChatixCore.

 import ChatixCore from 'chatix-core'; 

Dans le composant ChatixSDK, créez une instance de la classe ChatixCore et passez websiteId comme argument.

 const websiteId = "_WEBSITE_ID"; this.sdk = new ChatixCore(websiteId); 

Maintenant, dans this.sdk, vous pouvez utiliser les méthodes de travail avec la salle de chat. Vous pouvez afficher la liste des méthodes sur la page du projet chatix-core

Ensuite, nous devons nous connecter au serveur et obtenir des données sur la salle de discussion créée précédemment. Il existe des méthodes asynchrones start () et getChatroom () pour cela .

Après avoir reçu l'objet de la salle de conversation, prenons immédiatement son nom et le transférons vers l' application . Pour ce faire, ajoutez la fonction de rappel updateChatroomTitle(chatroom.title) dans l' application et appelez-la dans ChatixSDK .

ChatixSDK

 class ChatixSDK extends React.Component { constructor(props){ super(props); const websiteId = "_WEBSITE_ID"; this.chatroomId = "_CHATROOM_ID"; this.sdk = new ChatixCore(websiteId); this.sdk.start() .then( async () => { try { // refresh information about chatroom and call passed handler const chatroom = await this.sdk.getChatroom(this.chatroomId); if (props.updateChatroomTitle) { props.updateChatroomTitle(chatroom.title); } } catch (err) { console.error(err); } }) .catch((e) => { console.error(e); }); } render(){ return null; } } 

vous pouvez regarder this.chatroomId dans l'interface du gestionnaire en ouvrant la salle de chat souhaitée.

Maintenant, dans l' application, nous allons connecter le composant ChatixSDK et y ajouter la fonction updateChatroomTitle, qui mettra à jour le nom du chat. Nous y ajoutons également un lien ref afin de pouvoir accéder à ce composant.

L'appli

 this.chatixSDK = React.createRef(); 

 setChatroomTitle = (newName) => { const newStateFragment = { chatroomName: newName}; this.setState({...this.state, ...newStateFragment}); }; 

L'appli

 render() { return ( <div className="App"> <Header chatroomName={this.state.chatroomName} me={this.state.me} updateVisitor={this.onUpdateVisitor} /> <Main members={this.state.members} messages={this.state.messages} onSendNewMessage={this.onSendNewMessage} me={this.state.me} /> <ChatixSDK ref={this.chatixSDK} updateChatroomTitle={this.setChatroomTitle} /> </div> ); }; 

C'est fait. Maintenant, juste après la connexion au serveur, nous demandons des données de discussion, obtenons son nom et l'écrivons à l'état du composant App , et puisque les changements d'état provoquent le rendu du composant, le nom dans l'en-tête sera mis à jour automatiquement. Maintenant, le nom par défaut de l'état peut être remplacé par une chaîne vide.

L'appli

 chatroomName: '' 

Remplissons maintenant la barre latérale avec de vrais utilisateurs.
Mais avant d'obtenir la liste des utilisateurs dont vous avez besoin pour vous connecter au chat, pour cela, dans le ChatixSDK à l'intérieur de la fonction this.sdk.start() , nous obtenons une liste de toutes les salles de chat de l'utilisateur, vérifiez si elle est connectée à la salle actuelle et sinon, connectez-la.

ChatixSDK

 const myChatrooms = await this.sdk.getMyChatrooms(); if (myChatrooms.filter(x => x.id===this.chatroomId).length === 0) { await this.sdk.connectToChatroom(this.chatroomId); } 

Après nous être assurés que notre utilisateur est connecté à la salle de chat, nous pouvons obtenir une liste des participants à ce chat.

ChatixSDK

 // lets get all chatroom members using infinite loop with break on empty server response let membersPage = 1; let allChatroomMembers = []; while(true) { let pagedMembers = await this.sdk.getChatroomMembers(this.chatroomId, membersPage++, 10); allChatroomMembers = [...allChatroomMembers, ...pagedMembers]; if (pagedMembers.length === 0) { break; } } 

Ici, dans une boucle infinie, nous demandons aux utilisateurs page par page jusqu'à ce que nous obtenions tout le monde, dès que nous obtenons tout le monde, nous rompons la boucle. Après cela, tout comme le nom de la salle de conversation, nous le transmettons au composant parent à l'aide de la fonction de rappel.

ChatixSDK

 if (props.setChatroomMembers) { props.setChatroomMembers(allChatroomMembers); } 

Maintenant, dans le composant App , créez cette fonction de rappel setChatroomMembers qui setChatroomMembers utilisateurs par leur état en ligne / hors ligne et par ordre alphabétique et les enregistrera dans l'état.

App.js

 setChatroomMembers = (members) => { members.sort(this.sortMembers); const newStateFragment = { members: members}; this.setState({...this.state, ...newStateFragment}); } 

Ajouter la fonction de tri sortMembers . Il trie les utilisateurs par statut et par ordre alphabétique.

App.js

 sortMembers(a, b) { if (a.is_online === true && b.is_online === false) { return -1; } else if (b.is_online === true && a.is_online === false) { return 1; } else { if (a.name && b.name) { if (a.name.toLocaleUpperCase() > b.name.toLocaleUpperCase()) { return 1; } else if (a.name.toLocaleUpperCase() < b.name.toLocaleUpperCase()) { return -1; } } else if (a.name && !b.name) { return -1; } else if (!a.name && b.name) { return 1; } if (a.uuid > b.uuid) { return -1; } else { return 1; } } } 

Ensuite, nous transmettons la fonction setChatroomMembers dans ChatixSDK .

L'appli

 render() { return ( <div className="App"> <Header chatroomName={this.state.chatroomName} me={this.state.me} updateVisitor={this.onUpdateVisitor} /> <Main members={this.state.members} messages={this.state.messages} onSendNewMessage={this.onSendNewMessage} me={this.state.me} /> <ChatixSDK ref={this.chatixSDK} updateChatroomTitle={this.setChatroomTitle} setChatroomMembers={this.setChatroomMembers} /> </div> ); }; 

Maintenant, juste après la connexion au serveur, ainsi qu'avec l'en-tête, nous demandons une liste de tous les utilisateurs connectés et l'écrivons dans l'état du composant App . Et modifiez également la valeur par défaut de la liste des utilisateurs dans l'état.

L'appli

 members: [] 

Maintenant, selon exactement le même principe, nous obtenons l'objet de l'utilisateur actuel et un tableau de messages et les écrivons également dans l'état App

ChatixSDK

 // lets load 100 last messages from current chatroom const lastMessages = await this.sdk.getChatroomMessages(this.chatroomId, null, 100); if (props.setChatroomMessages) { props.setChatroomMessages(lastMessages); } if (props.setMe) { const me = this.sdk.getVisitor(); this.props.setMe(me); } 

L'appli

 <ChatixSDK ref={this.chatixSDK} setMe={this.setMe} updateChatroomTitle={this.setChatroomTitle} setChatroomMembers={this.setChatroomMembers} setChatroomMessages={this.setChatroomMessages} /> 

Ensuite, nous enverrons des messages.

Nous dans l' application avons déjà une fonction onSendNewMessage qui affiche envoyer un message à la console. Au lieu de cela, nous appellerons simplement la méthode sendChatroomMessage pour envoyer un message à partir de ChatixSDK .
Il s'agit d'une méthode asynchrone et elle renvoie l'objet du message envoyé dans la réponse, que nous ajoutons immédiatement au tableau de messages dans l'état. Soit dit en passant, veuillez noter que nous this.chatixSDK lien this.chatixSDK créé précédemment.

L'appli

 onSendNewMessage = async (message) => { let receivedMsg = await this.chatixSDK.current.sendChatroomMessage(message); const currentMessages = this.state.messages; currentMessages.push(receivedMsg); const newStateFragment = {messages: currentMessages}; this.setState({...this.state, ...newStateFragment}); } 

Étant donné qu'un changement d'état entraîne son nouveau rendu, la liste des messages sera mise à jour automatiquement. Mais nous devons nous assurer que lors de l'ajout de messages, le défilement dans le bloc de messages descend.

Pour ce faire, ouvrez le composant MessageContainer et à l'aide du hook useEffect, surveillez la modification dans le tableau de messages, et dès qu'il a changé et que les messages ont été ajoutés, nous obtenons un bloc scrollHeight avec des messages et le faisons défiler de la même quantité

 function MessageContainer(props) { const messagesContainer = React.createRef(); useEffect(() => { messagesContainer.current.scrollTop = messagesContainer.current.scrollHeight }, [props, messagesContainer]); const messageList = props.messages.map(message => <Message key={message.uuid} sender={props.members.find((member) => member.uuid === message.sender_id)} message={message} /> ); return ( <section className="MessageContainer" ref={messagesContainer}> {messageList} </section> ); } 

Terminons maintenant la mise à jour du nom d'utilisateur. Nous avons déjà créé une entrée dans l'en-tête et lorsque nous la modifions, nous transmettons l'objet utilisateur mis à jour au composant App et nous l'avons affiché dans la console. Terminons cette fonction. Pour ce faire, ajoutez-y la méthode appelée this.chatixSDK.current.updateVisitor(user) , cela mettra à jour les données sur le serveur. Et il suffit de mettre à jour les données dans l'état local, pour cela, nous mettons à jour l'objet this.state.me et dans le tableau this.state.members , this.state.members trouvons également l'utilisateur actuel et le this.state.members jour. Cela est nécessaire pour mettre à jour le nom de l'utilisateur actuel dans les messages qui lui sont envoyés.

L'appli

 onUpdateVisitor = (user) => { this.chatixSDK.current.updateVisitor(user) this.setMe(user) let currentUser = this.state.members.find((member) => (member.uuid === user.uuid)) let currentUserIndex = this.state.members.indexOf(currentUser) let newMembers = [...this.state.members] newMembers[currentUserIndex] = user; this.setState({ members: newMembers }) } 

Nous devons maintenant apprendre à répondre aux messages entrants, à connecter / déconnecter les utilisateurs et à modifier les informations et les utilisateurs connectés.

Pour ce faire, dans le fichier ChatixSDK.js du constructeur, nous devons remplacer les fonctions de rappel. Vous pouvez voir la liste complète des fonctions et des arguments sur la page du projet chatix-core .

Nous sommes actuellement intéressés par onChatroomMessageReceived , onMemberConnectedToChatroom , onMemberDisconnectedFromChatroom et onApplyVisitorInfo .

Nous les redéfinissons et pour chaque fonction nous appelons notre rappel que nous allons créer dans l' App .

 this.sdk.onChatroomMessageReceived = (chatroomId, message) => { if (chatroomId === this.chatroomId) { this.props.onNewMessageReceived(message); } }; this.sdk.onMemberConnectedToChatroom = (chatroomId, member) => { if (chatroomId === this.chatroomId && props.addChatroomMember) { this.props.addChatroomMember(member); } }; this.sdk.onMemberDisconnectedFromChatroom = (chatroomId, member) => { if (chatroomId === this.chatroomId && props.removeChatroomMember) { this.props.removeChatroomMember(member); } }; this.sdk.onApplyVisitorInfo = (visitor) => { this.props.onMemberUpdated(visitor) } 

Ensuite, accédez à l' application et créez ces fonctions.

onNewMessageReceived (message)
Cette fonction prend un objet de message et l'ajoute simplement à l'état avec le reste des messages. , .

App

 onNewMessageReceived = (message) => { const currentMessages = this.state.messages; currentMessages.push(message); const newStateFragment = {messages: currentMessages}; this.setState({...this.state, ...newStateFragment}); } 

App
addChatroomMember(member)
state members. .

App

 addChatroomMember = (member) => { const newStateFragment = {}; const currentMembers = this.state.members; currentMembers.push(member); currentMembers.sort(this.sortMembers); newStateFragment.members = currentMembers; this.setState({...this.state, ...newStateFragment}); } 

App
removeChatroomMember(memberId)
state members state .

 removeChatroomMember = (memberId) => { const currentMembers = this.state.members; const filteredMembers = currentMembers.filter(x=> x.uuid !== memberId); const newStateFragment = {members: filteredMembers}; this.setState({...this.state, ...newStateFragment}); } 

onMemberUpdated(updatedMember)
. . state .

App

 onMemberUpdated = (updatedMember) => { let oldMember = this.state.members.find(member => member.uuid === updatedMember.uuid); oldMember = this.state.members.indexOf(oldMember); let newStateMembers = this.state.members; newStateMembers[oldMember] = updatedMember; this.setState({ members: newStateMembers }) } 

ChatixSDK

ChatixSDK

 <ChatixSDK ref={this.chatixSDK} setMe={this.setMe} updateChatroomTitle={this.setChatroomTitle} setChatroomMembers={this.setChatroomMembers} addChatroomMember={this.addChatroomMember} removeChatroomMember={this.removeChatroomMember} setChatroomMessages={this.setChatroomMessages} onNewMessageReceived={this.onNewMessageReceived} onMemberUpdated={this.onMemberUpdated} /> 

C'est fait! \ , , / .

alekseyso
Matériaux supplémentaires:
SDK Chatix ()
SDK Chatix (npm)
192 -