Membuat aplikasi backend untuk obrolan online Apollo, Node.js

Beberapa waktu lalu saya sedang mengerjakan aplikasi seluler, yang fungsinya termasuk obrolan online yang nyaman. Dan sekarang saya memutuskan untuk menulis artikel dengan instruksi singkat tentang cara membuat obrolan menggunakan server apollo dan node.js di backend, serta bereaksi klien asli dan apollo di sisi klien.

Artikel ini dibagi menjadi dua bagian agar mudah dibaca. Bagian pertama berisi panduan untuk membuat backend aplikasi, dan yang kedua berisi panduan untuk membuat aplikasi front-end.

Jika Anda terlalu malas untuk membaca, Anda dapat langsung melihat kode di Github'e di sini dan di sini .

Sebagai teknologi utama untuk implementasi, saya memilih kerangka kerja node.js, database postgresql , serta server GraphQL - apollo-server-koa .

Pertama-tama, proyek koa2 kosong dihasilkan, untuk ini saya menggunakan generator koa sederhana dengan mengeksekusi perintah di terminal:

$ koa <project name> 

Kemudian dependensi yang diperlukan dipasang, saya melakukannya dengan benang, tetapi Anda dapat menggunakan npm.

 $ yarn add apollo-server-koa knex objection pg 

Semua perpustakaan yang diperlukan sudah diinstal, sekarang Anda dapat menulis kode

Untuk terhubung ke database, Anda perlu menjelaskan dua file, yang pertama adalah db.js, yang akan mengekspor instance klien knex dan memungkinkan model kami untuk bekerja dengan data dari database, yang kedua adalah knexfile.js, yang berisi pengaturan koneksi database untuk membuat dan migrasi bergulir.

Kode db.js dijelaskan di bawah ini, perhatikan bahwa semua pengaturan diambil dari variabel lingkungan:

 const db = require('knex')({ client: 'pg', connection: {   host : process.env.POSTGRES_HOST,   port: process.env.POSTGRES_PORT,   user : process.env.POSTGRES_USER,   password : process.env.POSTGRES_PASSWORD,   database : process.env.POSTGRES_DATABASE } }); module.exports = db; 

Kode knexfile.js tersedia di sini .

Sekarang Anda dapat menggambarkan migrasi untuk membuat dua tabel yang kami butuhkan.

Tabel itu sendiri akan sesederhana mungkin dan hanya berisi set bidang minimum yang disyaratkan. Perintah untuk membuatnya adalah di bawah ini:

 $ knex migrate:make migration_name 

Anda dapat melihat file migrasi di sini .

Sekarang buat model entitas Pesan dan Pengguna

 class Message extends Model { static get tableName() {   return 'messages'; } $beforeInsert() {   this.created_at = new Date().toISOString(); } static get relationMappings() {   return {     user: {       relation: Model.BelongsToOneRelation,       modelClass: User,       join: {         from: 'messages.user_id',         to: 'users.id'       }     }   }; } } 

Hal yang paling menarik tetap - menghubungkan dan mengkonfigurasi apollo-server-koa, deskripsi skema graphql dan resolvers.

Untuk menghubungkan apollo-server-koa, cukup tambahkan baris kode berikut

app.js:

 const { ApolloServer } = require('apollo-server-koa'); const graphqlSchema = require('./graphqlSchema'); … const apolloServer = new ApolloServer(graphqlSchema); apolloServer.applyMiddleware({ app }); 

www:

 var { app, apolloServer } = require('../app'); ... apolloServer.installSubscriptionHandlers(server); 

Selain menghubungkan apollo-server-koa, kami telah menyertakan kemampuan untuk bekerja dengan langganan untuk memberi tahu pelanggan bahwa pesan baru telah tiba dalam obrolan.

Apollo-server-koa terhubung, langkah selanjutnya adalah deskripsi diagram graphql dengan jenis yang diperlukan untuk obrolan

 input UserInput { username: String! } input MessageInput { text: String! user_id: ID! } type User { id: ID username: String } type Message { id: ID text: String created_at: String user: User } type Query { getLast100Messages: [Message] } type Mutation { findOrCreateUser(user: UserInput!): User createMessage(message: MessageInput!): Message } type Subscription { messageCreated: Message } 

Sirkuit siap, kami menggambarkan resolvers

Contoh resolver untuk mengirim pesan baru:

 const Message = require('../../models/message'); const { pubsub, MESSAGE_CREATED } = require('../../utils'); module.exports = { createMessage: async (obj, { message }, context, info) => {   const createdMessage = await Message     .query()     .insert(message);   const resultMessage = await Message     .query()     .eager('user')     .findById(createdMessage.id);   pubsub.publish(MESSAGE_CREATED, { messageCreated: resultMessage });   return resultMessage; }, }; 

Hal yang menarik adalah bahwa selain menyimpan pesan ke database, fungsi publish () dipanggil di sini, yang memberi tahu semua pelanggan tentang acara MESSAGE_CREATED, mengirimi mereka objek pesan baru (pembaca yang penuh perhatian akan melihat bahwa pengirim juga akan diberitahu tentang pesan barunya, dan kami akan memprosesnya lebih lanjut pada kepada klien, dalam proyek nyata, masuk akal untuk memproses ini di sisi backend, agar tidak menduplikasi logika di antara klien yang berbeda).

Kode resolver yang tersisa dapat ditemukan di sini .

Sisi server obrolan sudah siap, bagaimana saya bisa memverifikasi bahwa semuanya berfungsi?

Buka host di browser Anda dan Anda akan melihat taman bermain graphql di dalamnya.



Di bagian selanjutnya, kita akan membuat aplikasi seluler.