
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)
- 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
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
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

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 -