Erstellen von Echtzeit-Chat-Apps mit Parse React Hook

react chat app echtzeit einführung im letzten leitfaden haben sie mehr über die @parse/react @parse/react hilfsbibliothek erfahren, die die unterstützung von parse live query schnell in ihrer react anwendung ermöglicht die bibliothek ist vollständig in typescript geschrieben, basierend auf parse javascript sdk , und befindet sich derzeit in der alpha version jetzt werden sie in diesem leitfaden den parse react hook in einer realistischen situation verwenden, um eine einfache live chat anwendung zu erstellen diese app besteht aus zwei react komponenten, die die nützlichkeit von parses live query hervorheben und auch alles zeigen, was sie wissen müssen, um ihre vollständige live app zu erstellen parse react native befindet sich derzeit in der alpha version die bibliothek wird getestet, daher empfehlen wir, vorsichtig vorzugehen ihr feedback ist sehr geschätzt, also zögern sie nicht, die bibliothek zu verwenden und uns ihre fragen und ersten eindrücke per e mail an community\@back4app com zu senden voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine react app, die erstellt und mit back4app verbunden schließen sie den vorherigen leitfaden ab, damit sie ein besseres verständnis für den parse react hook und live query wenn sie das bildschirmlayout verwenden möchten, das in diesem leitfaden bereitgestellt wird, sollten sie die ant design ant design bibliothek ziel um eine live chat anwendung in react zu erstellen, die den @parse/react @parse/react hook als aktivator für live query auf parse verwendet 1 verstehen und erstellen der datenbankklassen die chat anwendung wird aus zwei kleinen datenbankklassen bestehen nickname nickname und nachricht nachricht nickname nickname hat nur ein textfeld namens name name und wird die benutzer in der anwendung darstellen nachricht nachricht wird jede textnachricht speichern, die zwischen zwei benutzern gesendet wird, daher muss es ein textfeld namens text text und zwei objektzeigerfelder namens sender sender und receiver receiver , die beide mit der nickname nickname klasse verbunden sind führen sie den folgenden code schnipsel in der javascript konsole ihres back4app dashboards aus, um diese klassen zu erstellen und mit einigen beispielen zu füllen 1 // create nicknames 2 let nicknamea = new parse object('nickname'); 3 nicknamea set('name', 'smartboy22'); 4 nicknamea = await nicknamea save(); 5 let nicknameb = new parse object('nickname'); 6 nicknameb set('name', 'clevergirl23'); 7 nicknameb = await nicknameb save(); 8&#x9; 9 // create message linked to nicknames 10 let message = new parse object('message'); 11 message set('text', 'hi! how are you?'); 12 message set('sender', nicknamea); 13 message set('receiver', nicknamea); 14 message = await message save(); 15 console log('success'); 2 aktivierung der live abfrage jetzt, da sie die nickname nickname und nachricht nachricht klassen erstellt haben, müssen wir sie mit live abfragefähigkeiten aktivieren gehen sie zu ihrem back4app dashboard und navigieren sie zu app einstellungen app einstellungen > servereinstellungen servereinstellungen > server url und live abfrage server url und live abfrage nachdem sie ihre back4app subdomain aktiviert haben, können sie dann die live abfrage aktivieren und auswählen, welche db klassen dafür aktiviert werden sollen stellen sie sicher, dass sie die neuen klassen auswählen und die änderungen speichern das nächste, was zu tun ist, ist die erstellung unserer chat app, die aus zwei komponenten besteht, chatsetup chatsetup und livechat livechat 3 erstellung der chatsetup komponente diese komponente ist verantwortlich für die erstellung und einrichtung der sender und empfänger nickname nickname objekte und dient auch als container für die struktur der livechat livechat komponente das layout für den einrichtungsbereich hat nur zwei eingabefelder für die nicknames und einen button, der die einrichtungsfunktion auslöst erstellen sie eine neue datei in ihrem src src verzeichnis mit dem namen chatsetup js chatsetup js (oder chatsetup tsx chatsetup tsx ) und verwenden sie den folgenden code chatsetup js 1 import react, { usestate } from "react"; 2 import " /app css"; 3 import { button, input } from "antd"; 4 import parse from "parse"; 5 import { livechat } from " /livechat"; 6&#x9; 7 export const chatsetup = () => { 8 // state variables holding input values and results 9 const \[sendernicknameinput, setsendernicknameinput] = usestate(""); 10 const \[sendernicknameid, setsendernicknameid] = usestate(null); 11 const \[receivernicknameinput, setreceivernicknameinput] = usestate(""); 12 const \[receivernicknameid, setreceivernicknameid] = usestate(null); 13&#x9; 14 // create or retrieve nickname objects and start livechat component 15 const startlivechat = async () => { 16 const sendernicknamename = sendernicknameinput; 17 const receivernicknamename = receivernicknameinput; 18&#x9; 19 // check if user informed both nicknames 20 if (sendernicknamename === null || receivernicknamename === null) { 21 alert("please inform both sender and receiver nicknames!"); 22 return false; 23 } 24&#x9; 25 // check if sender nickname already exists, if not create new parse object 26 let sendernicknameobject = null; 27 try { 28 const senderparsequery = new parse query("nickname"); 29 senderparsequery equalto("name", sendernicknamename); 30 const senderparsequeryresult = await senderparsequery first(); 31 if ( 32 senderparsequeryresult !== undefined && 33 senderparsequeryresult !== null 34 ) { 35 sendernicknameobject = senderparsequeryresult; 36 } else { 37 sendernicknameobject = new parse object("nickname"); 38 sendernicknameobject set("name", sendernicknamename); 39 sendernicknameobject = await sendernicknameobject save(); 40 } 41 } catch (error) { 42 alert(error); 43 return false; 44 } 45&#x9; 46 // check if receiver nickname already exists, if not create new parse object 47 let receivernicknameobject = null; 48 try { 49 const receiverparsequery = new parse query("nickname"); 50 receiverparsequery equalto("name", receivernicknamename); 51 const receiverparsequeryresult = await receiverparsequery first(); 52 if ( 53 receiverparsequeryresult !== undefined && 54 receiverparsequeryresult !== null 55 ) { 56 receivernicknameobject = receiverparsequeryresult; 57 } else { 58 receivernicknameobject = new parse object("nickname"); 59 receivernicknameobject set("name", receivernicknamename); 60 receivernicknameobject = await receivernicknameobject save(); 61 } 62 } catch (error) { 63 alert(error); 64 return false; 65 } 66&#x9; 67 // set nickname objects ids, so live chat component is instantiated 68 setsendernicknameid(sendernicknameobject id); 69 setreceivernicknameid(receivernicknameobject id); 70 return true; 71 }; 72&#x9; 73 return ( 74 \<div> 75 \<div classname="header"> 76 \<img 77 classname="header logo" 78 alt="back4app logo" 79 src={ 80 "https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png" 81 } 82 /> 83 \<p classname="header text bold">{"react on back4app"}\</p> 84 \<p classname="header text">{"live query chat app"}\</p> 85 \</div> 86 \<div classname="container"> 87 {sendernicknameid === null && receivernicknameid === null && ( 88 \<div> 89 \<input 90 classname="form input" 91 value={sendernicknameinput} 92 onchange={(event) => setsendernicknameinput(event target value)} 93 placeholder={"sender (your) nickname"} 94 size="large" 95 /> 96 \<input 97 classname="form input" 98 value={receivernicknameinput} 99 onchange={(event) => setreceivernicknameinput(event target value)} 100 placeholder={"receiver (their) nickname"} 101 size="large" 102 /> 103 \<button 104 type="primary" 105 classname="form button" 106 color={"#208aec"} 107 size={"large"} 108 onclick={startlivechat} 109 > 110 start live chat 111 \</button> 112 \</div> 113 )} 114 {sendernicknameid !== null && receivernicknameid !== null && ( 115 \<livechat 116 sendernicknamename={sendernicknameinput} 117 sendernicknameid={sendernicknameid} 118 receivernicknamename={receivernicknameinput} 119 receivernicknameid={receivernicknameid} 120 /> 121 )} 122 \</div> 123 \</div> 124 ); 125 }; chatsetup tsx 1 import react, { usestate, fc, reactelement } from "react"; 2 import " /app css"; 3 import { button, input } from "antd"; 4 import { livechat } from " /livechat"; 5 import parse from "parse"; 6&#x9; 7 export const chatsetup fc<{}> = () reactelement => { 8 // state variables holding input values and results 9 const \[sendernicknameinput, setsendernicknameinput] = usestate(""); 10 const \[sendernicknameid, setsendernicknameid] = usestate\<string | null>(null); 11 const \[receivernicknameinput, setreceivernicknameinput] = usestate(""); 12 const \[receivernicknameid, setreceivernicknameid] = usestate\<string | null>(null); 13&#x9; 14 // create or retrieve nickname objects and start livechat component 15 const startlivechat = async () promise\<boolean> => { 16 const sendernicknamename string = sendernicknameinput; 17 const receivernicknamename string = receivernicknameinput; 18&#x9; 19 // check if user informed both nicknames 20 if (sendernicknamename === "" || receivernicknamename === "") { 21 alert("please inform both sender and receiver nicknames!"); 22 return false; 23 } 24&#x9; 25 // check if sender nickname already exists, if not create new parse object 26 let sendernicknameobject parse object | null = null; 27 try { 28 const senderparsequery parse query = new parse query("nickname"); 29 senderparsequery equalto("name", sendernicknamename); 30 const senderparsequeryresult parse object | undefined = await senderparsequery first(); 31 if ( 32 senderparsequeryresult !== undefined 33 ) { 34 sendernicknameobject = senderparsequeryresult; 35 } else { 36 sendernicknameobject = new parse object("nickname"); 37 if (sendernicknameobject !== null) { 38 sendernicknameobject set("name", sendernicknamename); 39 sendernicknameobject = await sendernicknameobject save(); 40 } 41 } 42 } catch (error) { 43 alert(error); 44 return false; 45 } 46&#x9; 47 // check if receiver nickname already exists, if not create new parse object 48 let receivernicknameobject parse object | null = null; 49 try { 50 const receiverparsequery parse query = new parse query("nickname"); 51 receiverparsequery equalto("name", receivernicknamename); 52 const receiverparsequeryresult parse object | undefined = await receiverparsequery first(); 53 if ( 54 receiverparsequeryresult !== undefined 55 ) { 56 receivernicknameobject = receiverparsequeryresult; 57 } else { 58 receivernicknameobject = new parse object("nickname"); 59 if (receivernicknameobject !== null) { 60 receivernicknameobject set("name", receivernicknamename); 61 receivernicknameobject = await receivernicknameobject save(); 62 } 63 } 64 } catch (error any) { 65 alert(error); 66 return false; 67 } 68&#x9; 69 // set nickname objects ids, so live chat component is instantiated 70 if (sendernicknameobject !== null && receivernicknameobject !== null) { 71 setsendernicknameid(sendernicknameobject id); 72 setreceivernicknameid(receivernicknameobject id); 73 } 74 return true; 75 }; 76&#x9; 77 return ( 78 \<div> 79 \<div classname="header"> 80 \<img 81 classname="header logo" 82 alt="back4app logo" 83 src={ 84 "https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png" 85 } 86 /> 87 \<p classname="header text bold">{"react on back4app"}\</p> 88 \<p classname="header text">{"live query chat app"}\</p> 89 \</div> 90 \<div classname="container"> 91 {sendernicknameid === null && receivernicknameid === null && ( 92 \<div> 93 \<input 94 classname="form input" 95 value={sendernicknameinput} 96 onchange={(event) => setsendernicknameinput(event target value)} 97 placeholder={"sender (your) nickname"} 98 size="large" 99 /> 100 \<input 101 classname="form input" 102 value={receivernicknameinput} 103 onchange={(event) => setreceivernicknameinput(event target value)} 104 placeholder={"receiver (their) nickname"} 105 size="large" 106 /> 107 \<button 108 type="primary" 109 classname="form button" 110 color={"#208aec"} 111 size={"large"} 112 onclick={startlivechat} 113 > 114 start live chat 115 \</button> 116 \</div> 117 )} 118 {sendernicknameid !== null && receivernicknameid !== null && ( 119 \<livechat 120 sendernicknamename={sendernicknameinput} 121 sendernicknameid={sendernicknameid} 122 receivernicknamename={receivernicknameinput} 123 receivernicknameid={receivernicknameid} 124 /> 125 )} 126 \</div> 127 \</div> 128 ); 129 }; beachten sie, dass die livechat livechat komponente nur initialisiert und gerendert wird, wenn der einrichtungsprozess erfolgreich ist und alle statusvariablen korrekt gesetzt sind ebenso sind die einrichtungseingaben nach dem prozess verborgen und das layout der untergeordneten komponente wird gerendert 4 erstellen der live chat komponente die livechat livechat komponente verwaltet die anzeige und das senden der nachrichten nachrichten zwischen den beiden spitznamen spitznamen die als parameter bei der initialisierung übergeben werden in dieser komponente werden sie schließlich den useparsequery useparsequery hook von @parse/react @parse/react verwenden, um die live abfrage einzurichten, die jedes nachrichten nachrichten objekt, das mit dieser chat instanz verbunden ist, abruft erstellen sie eine neue datei in ihrem src src verzeichnis mit dem namen livechat js livechat js (oder livechat tsx livechat tsx ) und fügen sie den folgenden code ein livechat js 1 import react, { usestate } from "react"; 2 import " /app css"; 3 import { button, input, tooltip } from "antd"; 4 import { syncoutlined } from "@ant design/icons"; 5 import parse from "parse"; 6 import { useparsequery } from "@parse/react"; 7&#x9; 8 export const livechat = (props) => { 9 // state variable to hold message text input 10 const \[messageinput, setmessageinput] = usestate(""); 11&#x9; 12 // create parse query for live querying using useparsequery hook 13 const parsequery = new parse query("message"); 14 // get messages that involve both nicknames 15 parsequery containedin("sender", \[ 16 props sendernicknameid, 17 props receivernicknameid, 18 ]); 19 parsequery containedin("receiver", \[ 20 props sendernicknameid, 21 props receivernicknameid, 22 ]); 23 // set results ordering 24 parsequery ascending("createdat"); 25&#x9; 26 // include nickname fields, to enable name getting on list 27 parsequery includeall(); 28&#x9; 29 // declare hook and variables to hold hook responses 30 const { islive, isloading, issyncing, results, count, error, reload } = 31 useparsequery(parsequery, { 32 enablelocaldatastore true, // enables cache in local datastore (default true) 33 enablelivequery true, // enables live query for real time update (default true) 34 }); 35&#x9; 36 // message sender handler 37 const sendmessage = async () => { 38 try { 39 const messagetext = messageinput; 40&#x9; 41 // get sender and receiver nickname parse objects 42 const sendernicknameobjectquery = new parse query("nickname"); 43 sendernicknameobjectquery equalto("objectid", props sendernicknameid); 44 let sendernicknameobject = await sendernicknameobjectquery first(); 45 const receivernicknameobjectquery = new parse query("nickname"); 46 receivernicknameobjectquery equalto("objectid", props receivernicknameid); 47 let receivernicknameobject = await receivernicknameobjectquery first(); 48&#x9; 49 // create new message object and save it 50 let message = new parse object("message"); 51 message set("text", messagetext); 52 message set("sender", sendernicknameobject); 53 message set("receiver", receivernicknameobject); 54 message save(); 55&#x9; 56 // clear input 57 setmessageinput(""); 58 } catch (error) { 59 alert(error); 60 } 61 }; 62&#x9; 63 // helper to format createdat value on message 64 const formatdatetotime = (date) => { 65 return `${date gethours()} ${date getminutes()} ${date getseconds()}`; 66 }; 67&#x9; 68 return ( 69 \<div> 70 \<div classname="flex between"> 71 \<h2 class="list heading">{`${props sendernicknamename} sending, ${props receivernicknamename} receiving!`}\</h2> 72 \<tooltip title="reload"> 73 \<button 74 onclick={reload} 75 type="primary" 76 shape="circle" 77 icon={\<syncoutlined />} 78 /> 79 \</tooltip> 80 \</div> 81 {results && ( 82 \<div classname="messages"> 83 {results 84 sort((a, b) => a get("createdat") > b get("createdat")) 85 map((result) => ( 86 \<div 87 key={result id} 88 classname={ 89 result get("sender") id === props sendernicknameid 90 ? "message sent" 91 "message received" 92 } 93 > 94 \<p classname="message bubble">{result get("text")}\</p> 95 \<p classname="message time"> 96 {formatdatetotime(result get("createdat"))} 97 \</p> 98 \<p classname="message name"> 99 {result get("sender") get("name")} 100 \</p> 101 \</div> 102 ))} 103 \</div> 104 )} 105 \<div classname="new message"> 106 \<h2 classname="new message title">new message\</h2> 107 \<input 108 classname="form input" 109 value={messageinput} 110 onchange={(event) => setmessageinput(event target value)} 111 placeholder={"your message "} 112 size="large" 113 /> 114 \<button 115 type="primary" 116 classname="form button" 117 color={"#208aec"} 118 size={"large"} 119 onclick={sendmessage} 120 > 121 send message 122 \</button> 123 \</div> 124 \<div> 125 {isloading && \<p>{"loading…"}\</p>} 126 {issyncing && \<p>{"syncing…"}\</p>} 127 {islive ? \<p>{"status live"}\</p> \<p>{"status offline"}\</p>} 128 {error && \<p>{error message}\</p>} 129 {count && \<p>{`count ${count}`}\</p>} 130 \</div> 131 \</div> 132 ); 133 }; livechat tsx 1 import react, { usestate, fc, reactelement } from "react"; 2 import " /app css"; 3 import { button, input, tooltip } from "antd"; 4 import { syncoutlined } from "@ant design/icons"; 5 import parse from "parse"; 6 import { useparsequery } from "@parse/react"; 7&#x9; 8 type livechatprops = { 9 sendernicknameid string, 10 sendernicknamename string, 11 receivernicknameid string, 12 receivernicknamename string, 13 } 14&#x9; 15 export const livechat fc\<livechatprops> = (props livechatprops) reactelement => { 16 const parse = require("parse/dist/parse min js"); 17 // state variable to hold message text input 18 const \[messageinput, setmessageinput] = usestate(""); 19&#x9; 20 // create parse query for live querying using useparsequery hook 21 const parsequery parse query = new parse query("message"); 22 // get messages that involve both nicknames 23 parsequery containedin("sender", \[ 24 props sendernicknameid, 25 props receivernicknameid, 26 ]); 27 parsequery containedin("receiver", \[ 28 props sendernicknameid, 29 props receivernicknameid, 30 ]); 31 // set results ordering 32 parsequery ascending("createdat"); 33&#x9; 34 // include nickname fields, to enable name getting on list 35 parsequery includeall(); 36&#x9; 37 // declare hook and variables to hold hook responses 38 const { islive, isloading, issyncing, results, count, error, reload } = 39 useparsequery(parsequery, { 40 enablelocaldatastore true, // enables cache in local datastore (default true) 41 enablelivequery true, // enables live query for real time update (default true) 42 }); 43&#x9; 44 // message sender handler 45 const sendmessage = async () => { 46 try { 47 const messagetext string = messageinput; 48&#x9; 49 // get sender and receiver nickname parse objects 50 const sendernicknameobjectquery parse query = new parse query("nickname"); 51 sendernicknameobjectquery equalto("objectid", props sendernicknameid); 52 let sendernicknameobject parse object | undefined = await sendernicknameobjectquery first(); 53 const receivernicknameobjectquery parse query = new parse query("nickname"); 54 receivernicknameobjectquery equalto("objectid", props receivernicknameid); 55 let receivernicknameobject parse object | undefined = await receivernicknameobjectquery first(); 56&#x9; 57 // create new message object and save it 58 let message parse object = new parse object("message"); 59 message set("text", messagetext); 60 message set("sender", sendernicknameobject); 61 message set("receiver", receivernicknameobject); 62 message save(); 63&#x9; 64 // clear input 65 setmessageinput(""); 66 } catch (error any) { 67 alert(error); 68 } 69 }; 70&#x9; 71 // helper to format createdat value on message 72 const formatdatetotime = (date date) string => { 73 return `${date gethours()} ${date getminutes()} ${date getseconds()}`; 74 }; 75&#x9; 76 return ( 77 \<div> 78 \<div classname="flex between"> 79 \<h2 class="list heading">{`${props sendernicknamename} sending, ${props receivernicknamename} receiving!`}\</h2> 80 \<tooltip title="reload"> 81 \<button 82 onclick={reload} 83 type="primary" 84 shape="circle" 85 icon={\<syncoutlined />} 86 /> 87 \</tooltip> 88 \</div> 89 {results && ( 90 \<div classname="messages"> 91 {results 92 sort((a, b) => a get("createdat") > b get("createdat")) 93 map((result) => ( 94 \<div 95 key={result id} 96 classname={ 97 result get("sender") id === props sendernicknameid 98 ? "message sent" 99 "message received" 100 } 101 > 102 \<p classname="message bubble">{result get("text")}\</p> 103 \<p classname="message time"> 104 {formatdatetotime(result get("createdat"))} 105 \</p> 106 \<p classname="message name"> 107 {result get("sender") get("name")} 108 \</p> 109 \</div> 110 ))} 111 \</div> 112 )} 113 \<div classname="new message"> 114 \<h2 classname="new message title">new message\</h2> 115 \<input 116 classname="form input" 117 value={messageinput} 118 onchange={(event) => setmessageinput(event target value)} 119 placeholder={"your message "} 120 size="large" 121 /> 122 \<button 123 type="primary" 124 classname="form button" 125 color={"#208aec"} 126 size={"large"} 127 onclick={sendmessage} 128 > 129 send message 130 \</button> 131 \</div> 132 \<div> 133 {isloading && \<p>{"loading…"}\</p>} 134 {issyncing && \<p>{"syncing…"}\</p>} 135 {islive ? \<p>{"status live"}\</p> \<p>{"status offline"}\</p>} 136 {error && \<p>{error message}\</p>} 137 {count && \<p>{`count ${count}`}\</p>} 138 \</div> 139 \</div> 140 ); 141 }; lass uns diese komponentenstruktur in vier teile aufteilen, damit du das layout besser verstehen kannst ganz oben haben wir die einrichtung der parse query parse query und des parse react hooks hier kannst du sehen, wie die props props parameter verwendet werden, um die abfrage zu aktivieren, die die nachrichten abruft, die wir wollen; danach hast du die sendmessage sendmessage funktion, die ein neues message message objekt erstellt, das mit dem nickname nickname verbunden ist, der in dieser chat instanz verwendet wird es gibt auch eine hilfsfunktion zur formatierung des datumswerts der nachrichten; jetzt haben wir im jsx code die statusflags, die mit den variablen des parse react hooks verbunden sind, sowie die schaltfläche zum neuladen der verbindung; schließlich kannst du die message message liste sehen, in der der stil der gerenderten listenelemente durch den wert des absenders bestimmt wird unten haben wir den teil zum senden der nachricht, mit einem einfachen texteingabefeld und einem button fügen sie schließlich diese klassen zu ihrer app css app css datei hinzu, wenn sie das layout der komponenten vollständig rendern möchten, und lassen sie uns mit dem testen unserer app fortfahren app css 1 @import ' antd/dist/antd css'; 2&#x9; 3 html { 4 box sizing border box; 5 outline none; 6 overflow auto; 7 } 8&#x9; 9 body { 10 margin 0; 11 background color #fff; 12 } 13&#x9; 14 , 15 before, 16 after { 17 margin 0; 18 padding 0; 19 box sizing inherit; 20 } 21&#x9; 22 h1, 23 h2, 24 h3, 25 h4, 26 h5, 27 h6 { 28 margin 0; 29 font weight bold; 30 } 31&#x9; 32 li { 33 list style none; 34 } 35&#x9; 36 p { 37 margin 0; 38 } 39&#x9; 40 flex between { 41 display flex; 42 align items center; 43 justify content space between; 44 } 45&#x9; 46 list heading { 47 font weight bold; 48 } 49&#x9; 50 app { 51 text align center; 52 } 53&#x9; 54 container { 55 width 100%; 56 max width 500px; 57 margin auto; 58 padding 20px 0; 59 text align left; 60 } 61&#x9; 62 header { 63 align items center; 64 padding 25px 0; 65 background color #208aec; 66 } 67&#x9; 68 header logo { 69 height 55px; 70 margin bottom 20px; 71 object fit contain; 72 } 73&#x9; 74 header text bold { 75 margin bottom 3px; 76 color rgba(255, 255, 255, 0 9); 77 font size 16px; 78 font weight bold; 79 } 80&#x9; 81 header text { 82 color rgba(255, 255, 255, 0 9); 83 font size 15px; 84 } 85&#x9; 86 heading { 87 font size 22px; 88 } 89&#x9; 90 form wrapper { 91 margin top 20px; 92 margin bottom 10px; 93 } 94&#x9; 95 form input { 96 margin bottom 20px; 97 } 98&#x9; 99 form button { 100 width 100%; 101 } 102&#x9; 103 messages { 104 margin top 25px; 105 } 106&#x9; 107 message sent { 108 position relative; 109 width 50%; 110 margin left auto; 111 } 112&#x9; 113 message received { 114 position relative; 115 width 50%; 116 } 117&#x9; 118 message bubble { 119 padding 12px; 120 border radius 25px; 121 background color rgba(0, 0, 0, 0 2); 122 } 123&#x9; 124 message sent message bubble { 125 background color #1e88e5; 126 color #fff; 127 } 128&#x9; 129 message time { 130 position absolute; 131 top 35%; 132 left 62px; 133 font size 13px; 134 color rgba(0, 0, 0, 0 35); 135 transform translatey( 50%); 136 } 137&#x9; 138 message sent message time { 139 left initial; 140 right 62px; 141 } 142&#x9; 143 message name { 144 margin top 5px; 145 color rgba(0, 0, 0, 0 55); 146 font size 13px; 147 font weight 600; 148 } 149&#x9; 150 message sent message name { 151 text align right; 152 } 153&#x9; 154 new message { 155 padding top 15px; 156 margin top 20px; 157 margin bottom 10px; 158 border top 1px solid rgba(0, 0, 0, 0 12); 159 } 160&#x9; 161 new message title { 162 margin bottom 15px; 163 } 5 testen der chat anwendung gehen sie voran und testen sie die live chat app, indem sie die chatsetup chatsetup komponente in ihrem app js app js (oder app tsx app tsx ) jsx code deklarieren und aufrufen hier ist ein beispiel, wie sie das tun könnten app js or app tsx 1 import react from "react"; 2 import " /app css"; 3 import { initializeparse } from "@parse/react"; 4 import { chatsetup } from " /chatsetup"; 5&#x9; 6 // your parse initialization configuration goes here 7 // note the live query url instead of the regular server url 8 const parse application id = "your parse application id"; 9 // const parse server url = "https //parseapi back4app com/"; 10 const parse live query url = "https //your app name b4a io/"; 11 const parse javascript key = "your parse javascript key"; 12&#x9; 13 // initialize parse using @parse/react instead of regular parse js sdk 14 initializeparse( 15 parse live query url, 16 parse application id, 17 parse javascript key 18 ); 19&#x9; 20 function app() { 21 return ( 22 \<div classname="app"> 23 \<chatsetup /> 24 \</div> 25 ); 26 } 27&#x9; 28 export default app; starten sie ihre app, indem sie yarn start yarn start in ihrer konsole ausführen sie sollten nun mit dem folgenden bildschirm konfrontiert werden, in dem sie die sendenden und empfangenden spitznamen angeben müssen, um mit dem chatten zu beginnen um besser zu sehen, wie die app und die live query funktionieren, öffnen sie dieselbe app in zwei verschiedenen browserfenstern und stellen sie sie nebeneinander sofort nach dem senden einer nachricht in einem fenster sollten sie sehen, dass sie im anderen fenster erscheint, wenn die spitznamen übereinstimmen und die verbindung aktiv ist fazit am ende dieses leitfadens haben sie gelernt, wie sie den parse react hook für live queries in einem realistischen anwendungsbeispiel verwenden