प्रतिक्रिया मूल पर मोबाइल चैट एप्लिकेशन बनाना

यह लेख का दूसरा भाग ( यहां पहला) अपोलो-सर्वर-कोआ और प्रतिक्रिया-मूलक का उपयोग करके चैट बनाने के लिए समर्पित है। यह मोबाइल चैट एप्लिकेशन के निर्माण को कवर करेगा। पिछले भाग में, इस चैट का बैकएंड पहले ही बनाया जा चुका है, इस प्रक्रिया के विवरण के बारे में अधिक जानकारी के लिए आप लिंक पा सकते हैं।

सबसे पहले, एक्सपो-क्ली का उपयोग करते हुए, एक नया एक्सपो प्रोजेक्ट बनाएं, इसके लिए हम टर्मिनल में कमांड निष्पादित करते हैं:

expo init 

और खाली एप्लिकेशन बनाने के लिए विज़ार्ड के सभी चरणों का पालन करें।

हमने बनाया एप्लिकेशन प्राप्त करने के बाद, आपको भविष्य में उपयोग की जाने वाली निर्भरताएं जोड़ने की आवश्यकता है:

यार्न ऐड अपोलो / रिएक्शन-हुक अपोलो-कैश-इनमोरी अपोलो-क्लाइंट अपोलो-लिंक-http अपोलो-लिंक-डब्ल्यूएस अपोलो-यूटिलिटीज ग्राफकल-टैग देशी-बेस रिएक्टर-राउटर-देशी सब्सक्रिप्शन-ट्रांसपोर्ट-डब्ल्यूएस

हो गया, अगला कदम हमारे बैकएंड के साथ काम करने के लिए अपोलो क्लाइंट को कनेक्ट और कॉन्फ़िगर करना है। ऐसा करने के लिए, नीचे दिए गए कोड को App.js. में जोड़ें मैं ध्यान देता हूं कि यहां हम अपोलो को http और वेबसोकेट प्रोटोकॉल के माध्यम से अपने बैकएंड से कनेक्ट करने के लिए कॉन्फ़िगर करेंगे, साथ ही अपोलो के लिए एक इन-मेमोरी कैश भी बनाएंगे, साथ ही 2 मार्ग भी बनाएंगे: एक लॉगिन फॉर्म के लिए और दूसरा चैट पेज के लिए।

 get link() { const BACKEND_URL = Platform.OS === 'ios' ? 'localhost:3000' : '10.0.2.2:3000'; const httpLink = new HttpLink({ uri: `http://${BACKEND_URL}/graphql` }); const wsLink = new WebSocketLink({ uri: `ws://${BACKEND_URL}/graphql`, options: { reconnect: true } }); return split( // split based on operation type ({ query }) => { const definition = getMainDefinition(query); return ( definition.kind === 'OperationDefinition' && definition.operation === 'subscription' ); }, wsLink, httpLink, ); } async componentDidMount() { const cache = new InMemoryCache(); this.client = new ApolloClient({ link: this.link, cache }); …. } render() { return ( ... <ApolloProvider client={this.client}> <NativeRouter> <Route exact path="/" component={UsernameForm}/> <Route path="/chat" component={Chat}/> </NativeRouter> </ApolloProvider> ) } 

मैं प्रपत्र के निर्माण का विस्तार से वर्णन नहीं करूंगा, मुझे लगता है कि आपने पहले ही यह कई बार देखा है, मैं केवल यह कहूंगा कि लॉगिन फॉर्म का कोड यहां पाया जा सकता है , सादगी के लिए मैंने प्राधिकरण और एक पासवर्ड फ़ील्ड को नहीं जोड़ने का फैसला किया, हालांकि, यदि आप चाहें, तो आप आसानी से खुद कर सकते हैं। ।

मैं एक दिलचस्प बिंदु पर ध्यान केन्द्रित करूंगा:

 const [ findOrCreateUser ] = useMutation(FIND_OR_CREATE_USER, { update(cache, { data: { findOrCreateUser: { id, username } } }) { cache.writeQuery({ query: GET_CURRENT_USER, data: { id, username }, }); } }); 

यहां, इसके उपयोगकर्ता नाम को जोड़ने / प्राप्त करने का म्यूटेशन, साथ ही एप्लिकेशन के अन्य भागों में इसके आगे उपयोग के लिए कैश में परिणाम की रिकॉर्डिंग कहा जाता है।

लॉगिन फॉर्म लागू होने के बाद, अगला आइटम चैट है।

फिर से, हम लेआउट पर निवासी नहीं होंगे, संपूर्ण कोड यहां पाया जा सकता है ।

हम एक नए चैट संदेश के बारे में सूचनाएं प्राप्त करने के लिए सदस्यता कार्यक्षमता का उपयोग करते हैं और केवल उस थ्रेड को संसाधित करते हैं जब संदेश वर्तमान उपयोगकर्ता द्वारा नहीं बनाया गया था, क्योंकि अन्यथा, संदेश पहले ही अपोलो कैश में जाएगा:

 useSubscription(MESSAGE_CREATED, { onSubscriptionData: ({ client, subscriptionData: { data: { messageCreated } } }) => { const { getLast100Messages } = client.readQuery({ query: GET_LAST_100_MESSAGES }); if (messageCreated.user.id !== id) { client.writeQuery({ query: GET_LAST_100_MESSAGES, data: { getLast100Messages: [ ...getLast100Messages, messageCreated ] } }); } } }); 

एक और दिलचस्प बिंदु, जब इसमें मौजूदा संदेशों के साथ एक चैट को डाउनलोड किया जाता है, तो सबसे पुराना संदेश स्क्रीन के शीर्ष पर प्रदर्शित होगा, यह उपयोगकर्ताओं के लिए असामान्य है, हम एप्लिकेशन व्यवहार को और अधिक प्राकृतिक बना देंगे, इसके लिए हम कोड की निम्नलिखित पंक्तियों को जोड़ते हैं:

 const scrollEl = useRef(null); … <Content ref={scrollEl} onContentSizeChange={() => { scrollEl.current.wrappedInstance.scrollToEnd({ animated: true }); }} > 

अब, प्रारंभिक डेटा प्राप्त करते समय या नया संदेश जोड़ते समय, चैट बहुत ही अंतिम संदेश को आसानी से स्क्रॉल करेगा।

बाकी कोड पर विचार करने का कोई मतलब नहीं है, क्योंकि यह पहले से ही किया गया समान है, आवेदन कार्यान्वयन भंडार में संग्रहीत किया जाता है ।

आवेदन की सभी कार्यक्षमता लागू होने के बाद, यह केवल पिछले लेख के बैकएंड के साथ आवेदन की संचालन क्षमता का परीक्षण करने के लिए बनी हुई है। एमुलेटर पर लॉन्च किया गया एप्लिकेशन इस तरह दिखता है: