Membuat aplikasi obrolan seluler di React Native

Ini adalah bagian kedua dari artikel (yang pertama di sini ) yang didedikasikan untuk membuat obrolan menggunakan apollo-server-koa dan react-asli. Ini akan mencakup pembuatan aplikasi obrolan seluler. Di bagian sebelumnya, backend sudah dibuat untuk obrolan ini, untuk rincian lebih lanjut tentang deskripsi proses ini Anda dapat menemukan tautannya .

Pertama-tama, menggunakan expo-cli, buat proyek expo baru, untuk ini kita menjalankan perintah di terminal:

expo init 

Dan ikuti semua langkah wizard untuk membuat aplikasi kosong.

Setelah kami menerima aplikasi yang dibuat, Anda perlu menambahkan dependensi yang akan digunakan di masa depan:

benang tambahkan apollo / reaksi-kait apollo-cache-inememory apollo-klien apollo-link-http apollo-link-ws apollo-utilitas graphql graphql-tag asli-base bereaksi-router-asli berlangganan-transportasi-transport-ws

Selesai, langkah selanjutnya adalah menghubungkan dan mengkonfigurasi klien apollo agar berfungsi dengan backend kami. Untuk melakukan ini, tambahkan kode di bawah ini ke App.js. Saya perhatikan bahwa di sini kita akan mengkonfigurasi apollo untuk terhubung ke backend kita melalui protokol http dan websocket, serta membuat cache di-memori untuk apollo, serta membuat 2 rute: satu untuk formulir login dan yang kedua untuk halaman obrolan.

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

Saya tidak akan menjelaskan pembuatan formulir secara rinci, saya pikir Anda sudah melihat ini beberapa kali, saya hanya akan mengatakan bahwa kode formulir login dapat ditemukan di sini , untuk kesederhanaan saya memutuskan untuk tidak menambahkan otorisasi dan bidang kata sandi, namun, jika Anda mau, Anda dapat dengan mudah melakukannya sendiri .

Saya akan membahas poin yang menarik:

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

Di sini disebut mutasi menambah / menerima pengguna dengan nama pengguna, serta mencatat hasil dalam cache untuk digunakan lebih lanjut di bagian lain dari aplikasi, disebut.

Setelah formulir masuk diterapkan, item berikutnya adalah obrolan.

Sekali lagi, kita tidak akan memikirkan tata letak, seluruh kode dapat ditemukan di sini .

Kami menggunakan fungsionalitas berlangganan untuk menerima pemberitahuan tentang pesan obrolan baru dan hanya memproses utas itu ketika pesan itu tidak dibuat oleh pengguna saat ini, karena jika tidak, pesan itu akan masuk ke cache apollo:

 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 ] } }); } } }); 

Hal lain yang menarik, ketika mengunduh obrolan dengan pesan yang ada di dalamnya, pesan terlama akan ditampilkan di bagian atas layar, ini tidak biasa bagi pengguna, kami akan membuat perilaku aplikasi lebih alami, untuk ini kami menambahkan baris kode berikut:

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

Sekarang, saat menerima data awal atau saat menambahkan pesan baru, obrolan akan dengan lancar menggulir ke pesan terakhir.

Sisa kode tidak masuk akal untuk dipertimbangkan, karena mirip dengan apa yang telah dilakukan, implementasi aplikasi disimpan dalam repositori .

Setelah semua fungsi aplikasi telah diimplementasikan, tetap hanya untuk menguji operabilitas aplikasi bersama dengan backend dari artikel sebelumnya. Aplikasi yang diluncurkan pada emulator terlihat seperti ini: