使用Parse React创建Slack实时聊天应用教程

react slack 克隆应用 介绍 在本指南中，我们将通过创建一个 slack 克隆应用继续探索 parse react hook parse react hook 在有用的情况下。该应用将具有基本功能，如注册/登录、频道和实时聊天。此外，react 组件突显了使用实时查询、用户管理功能和执行查询（关系型）的灵活性来实现实时通知的实用性。 您可以随时快速在 vercel 上部署一个 slack 克隆应用 先决条件 要完成本教程，您需要 一个 back4app 免费 账户 通过我们的 github 仓库克隆或下载此项目，以便您可以与指南一起运行它。确保按照 readme 文件中的说明在本地环境中成功设置它 javascript 示例仓库 typescript 示例仓库 目标 使用 @parse/react @parse/react hook 构建一个 slack 克隆应用程序。 1 从模板创建您的 parse 应用 该应用包含两个数据库类： 频道 频道 和 消息 消息 , 包含指向 parse 用户类的指针。我们不需要从头开始创建应用和数据库类，而是可以在 back4app 数据库中心 点击“克隆数据库”按钮，然后登录并创建您的应用。有关如何克隆的更多详细信息，请查看 克隆应用指南 现在您的应用已经具备在 back4app 上创建 slack 克隆所需的完整后端结构。 2 启用实时查询 现在您已经创建了应用和类，您需要启用实时查询（实时）。前往您的 back4app 控制面板，导航到 应用设置 应用设置 > 服务器设置 服务器设置 > 服务器 url 和实时查询 服务器 url 和实时查询 激活您的 back4app 子域后，您可以通过选择类 消息 消息 和 频道 频道 来激活实时查询。之后，保存更改。 上面的 url 是您的 实时查询 url 实时查询 url ，请确保复制它以正确初始化 parse 钩子。 现在让我们深入了解核心的 react 组件： 频道列表 频道列表 , 消息列表 消息列表 , 和 主页 主页 3 列表组件 该 channellist channellist 和 messagelist messagelist 组件使用 @parse/react @parse/react 钩子通过实时查询检索用户数据。它们的模式结构与 react livechat 指南 https //www back4app com/docs/react/real time/react chat app 相同。它们使用初始参数（通过 props props 对象检索，这些参数动态组合它们的实时查询。看看它们的查询以及类之间的关系 javascript 1 // note that parse object coming from props need to be changed into pointers 2 // to be able to be used by parse, since react changes the object structure 3 // when passing down parameters to child components 4&#x9; 5 // channellist js 6&#x9; 7 const ownerquery = new parse query("channel"); 8 ownerquery equalto("owner", props currentuser topointer()); 9 const membersquery = new parse query("channel"); 10 membersquery containedin("members", \[props currentuser topointer()]); 11 // creates the or query 12 const parsequery = parse query or(ownerquery, membersquery); 13 // set results ordering 14 parsequery ascending("name"); 15 // include all pointer fields 16 parsequery includeall(); 17&#x9; 18 // messagelist js 19&#x9; 20 const parsequery = new parse query("message"); 21 // get messages that involve both nicknames 22 parsequery equalto("channel", props currentchannel topointer()); 23 // set results ordering 24 parsequery ascending("createdat"); 25 // include nickname fields, to enable name getting on list 26 parsequery includeall();1 // note that parse object coming from props need to be changed into pointers 2 // to be able to be used by parse, since react changes the object structure 3 // when passing down parameters to child components 4&#x9; 5 // channellist tsx 6&#x9; 7 // this query is a composite or one, combining the results of both 8 const ownerquery parse query = new parse query("channel"); 9 ownerquery equalto("owner", props currentuser topointer()); 10 const membersquery parse query = new parse query("channel"); 11 membersquery containedin("members", \[props currentuser topointer()]); 12 // creates the or query 13 const parsequery parse query = parse query or(ownerquery, membersquery); 14 // set results ordering 15 parsequery ascending("name"); 16 // include all pointer fields 17 parsequery includeall(); 18&#x9; 19 // messagelist tsx 20&#x9; 21 const parsequery parse query = new parse query("message"); 22 // get messages that involve both nicknames 23 parsequery equalto("channel", props currentchannel topointer()); 24 // set results ordering 25 parsequery ascending("createdat"); 26 // include nickname fields, to enable name getting on list 27 parsequery includeall(); 这些查询将在每次类数据发生变化时运行，因此如果频道中的其他用户发送消息，您将看到它实时出现。 4 主页组件 该 主页 主页 组件作为主应用程序屏幕，其中列表组件在需要时有条件地呈现和实例化。您可以在下面找到组件代码。查看创建频道和邀请用户的函数。 home js 1 import react, { useeffect, usestate } from "react"; 2 import " /app css"; 3 import { modal } from "antd"; 4 import { usehistory } from "react router dom"; 5 import parse from "parse"; 6 import { channellist } from " /channellist"; 7 import { messagelist } from " /messagelist"; 8 import { memberlist } from " /memberlist"; 9&#x9; 10 export const home = () => { 11 const history = usehistory(); 12&#x9; 13 // state variables holding input values and flags 14 const \[currentuser, setcurrentuser] = usestate(null); 15 const \[iscreatechannelmodalvisible, setiscreatechannelmodalvisible] = 16 usestate(false); 17 const \[createchannelinput, setcreatechannelinput] = usestate(""); 18 const \[currentchannel, setcurrentchannel] = usestate(null); 19&#x9; 20 // this effect hook runs at every render and checks if there is a 21 // logged in user, redirecting to login screen if needed 22 useeffect(() => { 23 const checkcurrentuser = async () => { 24 try { 25 const user = await parse user currentasync(); 26 if (user === null || user === undefined) { 27 history push("/"); 28 } else { 29 if (currentuser === null) { 30 setcurrentuser(user); 31 } 32 } 33 return true; 34 } catch ( error) {} 35 return false; 36 }; 37 checkcurrentuser(); 38 }); 39&#x9; 40 // logout function 41 const dologout = async () => { 42 // logout 43 try { 44 await parse user logout(); 45 // force useeffect execution to redirect back to login 46 setcurrentuser(null); 47 return true; 48 } catch (error) { 49 alert(error); 50 return false; 51 } 52 }; 53&#x9; 54 // makes modal visible 55 const showcreatechannelmodal = () => { 56 setiscreatechannelmodalvisible(true); 57 }; 58&#x9; 59 // clear input and hide modal on cancel 60 const handlecreatechannelmodalcancel = () => { 61 setcreatechannelinput(""); 62 setiscreatechannelmodalvisible(false); 63 }; 64&#x9; 65 // creates a channel based on input from modal 66 const docreatechannel = async () => { 67 const channelname = createchannelinput; 68&#x9; 69 if (channelname === "") { 70 alert("please inform your new channel name!"); 71 return false; 72 } 73&#x9; 74 // creates a new parse object instance and set parameters 75 const channel = new parse object("channel"); 76 channel set("name", channelname); 77 channel set("owner", currentuser); 78 // members is an array of parse user objects, so add() should be used to 79 // concatenate the value inside the array 80 channel add("members", currentuser); 81&#x9; 82 // clears input value and hide modal 83 setcreatechannelinput(""); 84 setiscreatechannelmodalvisible(false); 85&#x9; 86 try { 87 // save object on parse server 88 const saveresult = await channel save(); 89 // set the created channel as the active channel, 90 // showing the message list for this channel 91 setcurrentchannel(saveresult); 92 alert(`success on creating channel ${channelname}`); 93 return true; 94 } catch (error) { 95 alert(error); 96 return false; 97 } 98 }; 99&#x9; 100 // changes the active channel and shows the message list for it 101 // this is called using a callback in the channellist component 102 const doselectchannel = (channel) => { 103 setcurrentchannel(null); 104 setcurrentchannel(channel); 105 }; 106&#x9; 107 // settings current channel to null hides the message list component 108 // this is called using a callback in the messagelist component 109 const doclearcurrentchannel = () => { 110 setcurrentchannel(null); 111 }; 112&#x9; 113 return ( 114 \<div classname="grid"> 115 \<div classname="organizations"> 116 \<div classname="organization"> 117 \<picture classname="organization picture"> 118 \<img 119 classname="organization img" 120 src="https //scontent fsqx1 1 fna fbcdn net/v/t1 6435 9/29136314 969639596535770 8356900498426560512 n png? nc cat=103\&ccb=1 5& nc sid=973b4a& nc ohc=d9actpsb8duax zaa7f& nc ht=scontent fsqx1 1 fna\&oh=96679a09c5c4524f0a6c86110de697b6\&oe=618525f9" 121 alt="" 122 /> 123 \</picture> 124 \<p classname="organization title">back4app\</p> 125 \</div> 126 \<button classname="button inline" onclick={dologout}> 127 \<svg 128 classname="button inline icon" 129 xmlns="http //www w3 org/2000/svg" 130 width="24" 131 height="24" 132 viewbox="0 0 24 24" 133 fill="none" 134 stroke="currentcolor" 135 strokewidth="2" 136 strokelinecap="round" 137 strokelinejoin="round" 138 > 139 \<polyline points="9 10 4 15 9 20">\</polyline> 140 \<path d="m20 4v7a4 4 0 0 1 4 4h4">\</path> 141 \</svg> 142 \<span classname="button inline label">log out\</span> 143 \</button> 144 \</div> 145 \<div classname="channels"> 146 {/ action buttons (new channel and logout) /} 147 \<div> 148 \<modal 149 title="create new channel" 150 visible={iscreatechannelmodalvisible} 151 onok={docreatechannel} 152 oncancel={handlecreatechannelmodalcancel} 153 oktext={"create"} 154 > 155 <> 156 \<label>{"channel name"}\</label> 157 \<input 158 type={"text"} 159 value={createchannelinput} 160 placeholder={"new channel name"} 161 onchange={(event) => setcreatechannelinput(event target value)} 162 >\</input> 163 \</> 164 \</modal> 165 \</div> 166 \<div classname="channels header" onclick={showcreatechannelmodal}> 167 \<p classname="channels header label">channels\</p> 168 \<svg 169 classname="channels header icon" 170 xmlns="http //www w3 org/2000/svg" 171 height="24px" 172 viewbox="0 0 24 24" 173 width="24px" 174 fill="#000000" 175 > 176 \<path d="m0 0h24v24h0z" fill="none" /> 177 \<path d="m19 13h 6v6h 2v 6h5v 2h6v5h2v6h6v2z" /> 178 \</svg> 179 \</div> 180 {/ channel list component, instantiated only when the user is successfully fetched /} 181 {currentuser !== null && ( 182 \<channellist 183 currentuser={currentuser} 184 selectchannelcallback={doselectchannel} 185 /> 186 )} 187 \</div> 188 \<div classname="messages"> 189 {/ message list component, instantiated only when there is a selected channel /} 190 {currentuser !== null && currentchannel !== null && ( 191 \<messagelist 192 currentuser={currentuser} 193 currentchannel={currentchannel} 194 closechannelcallback={doclearcurrentchannel} 195 /> 196 )} 197 \</div> 198 \<div classname="info"> 199 {/ member list component, instantiated only when there is a selected channel /} 200 {currentuser !== null && currentchannel !== null && ( 201 \<memberlist 202 currentuser={currentuser} 203 currentchannel={currentchannel} 204 closechannelcallback={doclearcurrentchannel} 205 /> 206 )} 207 \</div> 208 \</div> 209 ); 210 }; home tsx 1 import react, { useeffect, usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { modal } from 'antd'; 4 import { usehistory } from 'react router dom'; 5 import parse from 'parse'; 6 import { channellist } from ' /channellist'; 7 import { messagelist } from ' /messagelist'; 8 import { memberlist } from ' /memberlist'; 9&#x9; 10 export const home fc<{}> = () reactelement => { 11 const history = usehistory(); 12&#x9; 13 // state variables holding input values and flags 14 const \[currentuser, setcurrentuser] = usestate\<parse user | null>(null); 15 const \[iscreatechannelmodalvisible, setiscreatechannelmodalvisible] = usestate(false); 16 const \[createchannelinput, setcreatechannelinput] = usestate(''); 17 const \[currentchannel, setcurrentchannel] = usestate\<parse object | null>(null); 18&#x9; 19 // this effect hook runs at every render and checks if there is a 20 // logged in user, redirecting to login screen if needed 21 useeffect(() => { 22 const checkcurrentuser = async () promise\<boolean> => { 23 try { 24 const user (parse user | null) = await parse user currentasync(); 25 if (user === null || user === undefined) { 26 history push('/'); 27 } else { 28 if (currentuser === null) { 29 setcurrentuser(user); 30 } 31 } 32 return true; 33 } catch ( error any) {} 34 return false; 35 } 36 checkcurrentuser(); 37 }); 38&#x9; 39 // logout function 40 const dologout = async () promise\<boolean> => { 41 // logout 42 try { 43 await parse user logout(); 44 // force useeffect execution to redirect back to login 45 setcurrentuser(null); 46 return true; 47 } catch (error any) { 48 alert(error); 49 return false; 50 } 51 }; 52&#x9; 53 // makes modal visible 54 const showcreatechannelmodal = () void => { 55 setiscreatechannelmodalvisible(true); 56 } 57&#x9; 58 // clear input and hide modal on cancel 59 const handlecreatechannelmodalcancel = () void => { 60 setcreatechannelinput(""); 61 setiscreatechannelmodalvisible(false); 62 } 63&#x9; 64 // creates a channel based on input from modal 65 const docreatechannel = async () promise\<boolean> => { 66 const channelname string = createchannelinput; 67 68 if (channelname === '') { 69 alert("please inform your new channel name!"); 70 return false; 71 } 72&#x9; 73 // creates a new parse object instance and set parameters 74 const channel parse object = new parse object("channel"); 75 channel set('name', channelname); 76 channel set('owner', currentuser); 77 // members is an array of parse user objects, so add() should be used to 78 // concatenate the value inside the array 79 channel add('members', currentuser); 80&#x9; 81 // clears input value and hide modal 82 setcreatechannelinput(""); 83 setiscreatechannelmodalvisible(false); 84&#x9; 85 try { 86 // save object on parse server 87 const saveresult parse object = await channel save(); 88 // set the created channel as the active channel, 89 // showing the message list for this channel 90 setcurrentchannel(saveresult); 91 alert(`success on creating channel ${channelname}`); 92 return true; 93 } catch (error any) { 94 alert(error); 95 return false; 96 } 97 } 98&#x9; 99 // changes the active channel and shows the message list for it 100 // this is called using a callback in the channellist component 101 const doselectchannel = (channel parse object) void => { 102 setcurrentchannel(null); 103 setcurrentchannel(channel); 104 } 105&#x9; 106 // settings current channel to null hides the message list component 107 // this is called using a callback in the messagelist component 108 const doclearcurrentchannel = () void => { 109 setcurrentchannel(null); 110 } 111&#x9; 112 return ( 113 \<div classname="grid"> 114 \<div classname="organizations"> 115 \<div classname="organization"> 116 \<picture classname="organization picture"> 117 \<img classname="organization img" src="https //scontent fsqx1 1 fna fbcdn net/v/t1 6435 9/29136314 969639596535770 8356900498426560512 n png? nc cat=103\&ccb=1 5& nc sid=973b4a& nc ohc=d9actpsb8duax zaa7f& nc ht=scontent fsqx1 1 fna\&oh=96679a09c5c4524f0a6c86110de697b6\&oe=618525f9" alt="" /> 118 \</picture> 119 \<p classname="organization title">back4app\</p> 120 \</div> 121 \<button classname="button inline" onclick={dologout}> 122 \<svg classname="button inline icon" xmlns="http //www w3 org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentcolor" strokewidth="2" strokelinecap="round" strokelinejoin="round">\<polyline points="9 10 4 15 9 20">\</polyline>\<path d="m20 4v7a4 4 0 0 1 4 4h4">\</path>\</svg> 123 \<span classname="button inline label">log out\</span> 124 \</button> 125 \</div> 126 \<div classname="channels"> 127 {/ action buttons (new channel and logout) /} 128 \<div> 129 \<modal 130 title="create new channel" 131 visible={iscreatechannelmodalvisible} 132 onok={docreatechannel} 133 oncancel={handlecreatechannelmodalcancel} 134 oktext={'create'} 135 > 136 <> 137 \<label>{'channel name'}\</label> 138 \<input 139 type={"text"} 140 value={createchannelinput} 141 placeholder={"new channel name"} 142 onchange={(event) => setcreatechannelinput(event target value)} 143 >\</input> 144 \</> 145 \</modal> 146 \</div> 147 \<div classname="channels header" onclick={showcreatechannelmodal}> 148 \<p classname="channels header label">channels\</p> 149 \<svg classname="channels header icon" xmlns="http //www w3 org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#000000">\<path d="m0 0h24v24h0z" fill="none"/>\<path d="m19 13h 6v6h 2v 6h5v 2h6v5h2v6h6v2z"/>\</svg> 150 \</div> 151 {/ channel list component, instantiated only when the user is successfully fetched /} 152 {currentuser !== null && ( 153 \<channellist 154 currentuser={currentuser} 155 selectchannelcallback={doselectchannel} 156 /> 157 )} 158 \</div> 159 \<div classname="messages"> 160 {/ message list component, instantiated only when there is a selected channel /} 161 {currentuser !== null && currentchannel !== null && ( 162 \<messagelist 163 currentuser={currentuser} 164 currentchannel={currentchannel} 165 closechannelcallback={doclearcurrentchannel} 166 /> 167 )} 168 \</div> 169 \<div classname="info"> 170 {/ member list component, instantiated only when there is a selected channel /} 171 {currentuser !== null && currentchannel !== null && ( 172 \<memberlist 173 currentuser={currentuser} 174 currentchannel={currentchannel} 175 closechannelcallback={doclearcurrentchannel} 176 /> 177 )} 178 \</div> 179 \</div> 180 ); 181 }; 这种动态实例化实时查询组件的方法使我们能够在用户更改活动频道、创建新频道、发送消息等时重用它们。以下是完整应用程序的外观。 5 在 vercel 上部署 您可以随时通过点击下面的链接在 vercel 上部署应用程序 确保您拥有您的 应用程序 id 应用程序 id , 客户端密钥 客户端密钥 和 实时查询 url 实时查询 url 对于密钥，您可以前往 应用设置 应用设置 > 安全性与密钥 安全性与密钥 然后复制。对于 实时查询 url 实时查询 url ，您可以转到第 2 步并复制它。 结论 在本指南的最后，您了解了如何在 parse 中使用 parse react 钩子进行实时查询，以及如何使用 back4app 的数据库中心。