Миний GraphQL ур чадварыг дээшлүүлэх: Бодит цагийн захиалга

Хэдэн жилийн турш би технологичдод оюуны өмчийн үнэ цэнийг нэмэгдүүлэхэд анхаарлаа төвлөрүүлэх боломжийг олгодог тогтолцоо, бүтээгдэхүүн, үйлчилгээг тодорхойлохыг хичээсэн. Энэ бол миний хувьд суралцах өвөрмөц боломжоор дүүрэн гайхалтай аялал хэвээр байна.

Миний дотор байгаа инженер саяхан миний өмнө ярьж байсан одоо байгаа үзэл баримтлалд хоёрдогч ашиг олох нөхцөл байдал байгаа эсэхийг гайхаж байсан. Өөрөөр хэлбэл, би өмнө нь хүлээн зөвшөөрөгдсөн эхийн шийдэлтэй ижил түвшний нөлөө бүхий өөр ашиг тусыг тодорхойлж чадах уу?

Энэ нийтлэлийн хувьд би юу олж болохыг харахын тулд GraphQL-д илүү гүнзгий орохыг хүссэн.

Би “ АМРАХ цаг нь болсон ” нийтлэлдээ GraphQL-ийг RESTful үйлчилгээнээс илүүд үзэх бодит нөхцөл байдлын талаар ярьсан. Бид Apollo Server ашиглан GraphQL API-г хэрхэн бүтээж, байршуулахыг үзсэн.

Энэхүү дараагийн бичлэгт би бодит цагийн мэдээлэл авах захиалгаар дамжуулан GraphQL-ийн талаарх мэдлэгээ дээшлүүлэхээр төлөвлөж байна. Мөн бид захиалгыг ашиглах WebSocket үйлчилгээг бий болгоно.

Дүгнэлт: Хэрэглэгчийн 360 хэрэглээний тохиолдол

Миний өмнөх нийтлэл нь Хэрэглэгчийн 360 хэрэглээний жишээн дээр төвлөрсөн бөгөөд миний зохиомол бизнесийн үйлчлүүлэгчид дараах мэдээллийн цуглуулгыг хадгалдаг:

• Хэрэглэгчийн мэдээлэл
• Хаягийн мэдээлэл
• Холбоо барих аргууд
• Зээлийн шинж чанарууд

GraphQL-г ашиглахад маш том ялалт бол нэг GraphQL хүсэлт нь хэрэглэгчийн токен (өвөрмөц таних тэмдэг)-д шаардлагатай бүх өгөгдлийг олж авах боломжтой юм.

 type Query { addresses: [Address] address(customer_token: String): Address contacts: [Contact] contact(customer_token: String): Contact customers: [Customer] customer(token: String): Customer credits: [Credit] credit(customer_token: String): Credit }

Үйлчлүүлэгчийн дан (360) харагдацыг сэргээхийн тулд RESTful хандлагыг ашиглах нь олон хүсэлт, хариултыг хооронд нь нийлүүлэх шаардлагатай болно. GraphQL нь илүү сайн гүйцэтгэлтэй шийдлийг бидэнд өгдөг.

Түвшин дээшлүүлэх зорилтууд

Амьдралын аль ч салбарт ахихын тулд хүн шинэ зорилгод хүрэх ёстой. Миний өөрийн зорилгын хувьд энэ нь:

• GraphQL доторх захиалгын үнийн саналыг ойлгож, хэрэгжүүлэх.
• GraphQL захиалгыг ашиглахын тулд WebSocket хэрэгжүүлэлтийг ашиглах.

Дараах нөхцөлүүд хангагдсан тохиолдолд GraphQL доторх асуулга болон мутаци дээр захиалга ашиглах санаа нь илүүд үздэг арга юм.

• Том объектуудад жижиг, өсөн нэмэгдэж буй өөрчлөлтүүд
• Хоцролт багатай, бодит цагийн шинэчлэлтүүд (чатын програм гэх мэт)

GraphQL доторх захиалгыг хэрэгжүүлэх нь тийм ч энгийн зүйл биш тул энэ нь чухал юм. Зөвхөн үндсэн серверийг шинэчлэхээс гадна хэрэглээний программыг дахин боловсруулах шаардлагатай болно.

Аз болоход, бидний Хэрэглэгчийн 360 жишээн дээр ашиглах тохиолдол нь захиалгад маш тохиромжтой. Мөн бид эдгээр захиалгыг ашиглах WebSocket аргыг хэрэгжүүлэх болно.

Өмнөх шигээ би Аполлоныг цаашид үргэлжлүүлэн ашиглах болно.

Захиалгын кредитээр түвшин ахих

Нэгдүгээрт, бид миний Apollo GraphQL серверийн захиалгыг дэмжихэд шаардлагатай номын сангуудыг суулгах хэрэгтэй.

 npm install ws npm install graphql-ws @graphql-tools/schema npm install graphql-subscriptions

Эдгээр зүйлсийг суулгасны дараа би typedefs тогтмолыг дараах байдлаар өргөтгөхийн тулд анхны репозитороос index.ts -г шинэчлэхэд анхаарлаа хандуулсан:

 type Subscription { creditUpdated: Credit }

Би мөн PubSub ийн шинэ жишээг байрлуулах тогтмолыг үүсгэсэн бөгөөд дараа нь ашиглах загвар захиалга үүсгэсэн:

 const pubsub = new PubSub(); pubsub.publish('CREDIT_BALANCE_UPDATED', { creditUpdated: { } });

Би одоо байгаа шийдүүлэгчдийг цэвэрлэж, энэ шинэ хэрэглээний тохиолдолд шинэ Subscription нэмсэн:

 const resolvers = { Query: { addresses: () => addresses, address: (parent, args) => { const customer_token = args.customer_token; return addresses.find(address => address.customer_token === customer_token); }, contacts: () => contacts, contact: (parent, args) => { const customer_token = args.customer_token; return contacts.find(contact => contact.customer_token === customer_token); }, customers: () => customers, customer: (parent, args) => { const token = args.token; return customers.find(customer => customer.token === token); }, credits: () => credits, credit: (parent, args) => { const customer_token = args.customer_token; return credits.find(credit => credit.customer_token === customer_token); } }, Subscription: { creditUpdated: { subscribe: () => pubsub.asyncIterator(['CREDIT_BALANCE_UPDATED']), } } };

Дараа нь би серверийн тохиргоог дахин засварлаж, захиалгын загварыг танилцуулав:

 const app = express(); const httpServer = createServer(app); const wsServer = new WebSocketServer({ server: httpServer, path: '/graphql' }); const schema = makeExecutableSchema({ typeDefs, resolvers }); const serverCleanup = useServer({ schema }, wsServer); const server = new ApolloServer({ schema, plugins: [ ApolloServerPluginDrainHttpServer({ httpServer }), { async serverWillStart() { return { async drainServer() { serverCleanup.dispose(); } }; } } ], }); await server.start(); app.use('/graphql', cors(), express.json(), expressMiddleware(server, { context: async () => ({ pubsub }) })); const PORT = Number.parseInt(process.env.PORT) || 4000; httpServer.listen(PORT, () => { console.log(`Server is now running on http://localhost:${PORT}/graphql`); console.log(`Subscription is now running on ws://localhost:${PORT}/graphql`); });

Үйлчлүүлэгчид тулгуурласан шинэчлэлтүүдийг дуурайхын тулд би үйлчилгээ ажиллаж байх үед зээлийн үлдэгдлийг таван секунд тутамд 50 доллараар нэмэгдүүлэх дараах аргыг бий болгосон. Үлдэгдэл нь 10,000 долларын зээлийн хязгаарт хүрсэн (эсвэл хэтэрсэн) үед би үлдэгдлийг 2,500 доллар болгон дахин тохируулж, үлдэгдлийн төлбөр хийгдэж байна.

 function incrementCreditBalance() { if (credits[0].balance >= credits[0].credit_limit) { credits[0].balance = 0.00; console.log(`Credit balance reset to ${credits[0].balance}`); } else { credits[0].balance += 50.00; console.log(`Credit balance updated to ${credits[0].balance}`); } pubsub.publish('CREDIT_BALANCE_UPDATED', { creditUpdated: credits[0] }); setTimeout(incrementCreditBalance, 5000); } incrementCreditBalance();

Бүрэн index.ts файлыг эндээс олж болно.

Хероку руу байршуулах

Үйлчилгээ бэлэн болсон тул бид үйлчилгээтэй харьцах боломжтой болгох цаг нь болсон. Хероку өнгөрсөн удаа маш сайн ажилласан (мөн үүнийг ашиглахад хялбар) тул энэ арга барилаа баримталцгаая.

Эхлэхийн тулд би дараах Heroku CLI тушаалуудыг ажиллуулах шаардлагатай болсон:

 $ heroku login $ heroku create jvc-graphql-server-sub Creating ⬢ jvc-graphql-server-sub... done https://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/ | https://git.heroku.com/jvc-graphql-server-sub.git

Энэ тушаал нь Херокугийн алсын удирдлага болгон ашигладаг агуулахыг автоматаар нэмсэн:

 $ git remote heroku origin

Өмнөх нийтлэлдээ дурдсанчлан Аполло сервер нь үйлдвэрлэлийн орчинд Apollo Explorer програмыг идэвхгүй болгодог. Apollo Explorer-г бидний хэрэгцээнд ашиглах боломжтой байлгахын тулд би NODE_ENV орчны хувьсагчийг хөгжүүлэлт болгон тохируулах шаардлагатай болсон. Би үүнийг дараах CLI тушаалаар тохируулсан:

 $ heroku config:set NODE_ENV=development Setting NODE_ENV and restarting ⬢ jvc-graphql-server-sub... done, v3 NODE_ENV: development

Би Хероку руу өөрийн кодыг байрлуулахад бэлэн байсан:

 $ git commit --allow-empty -m 'Deploy to Heroku' $ git push heroku

Heroku хяналтын самбарыг хурдан харвал миний Аполло сервер ямар ч асуудалгүй ажиллаж байгааг харуулсан.

Тохиргоо хэсгээс би энэ үйлчилгээний жишээнд зориулсан Heroku програмын URL-г олсон:

https://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/

Анхаарна уу - энэ нийтлэлийг нийтлэх үед энэ холбоос ажиллахгүй болно.

Одоохондоо би Apollo Server Studio-г эхлүүлэхийн тулд энэ URL-д GraphQL-г нэмж оруулах боломжтой. Энэ нь захиалга хүлээж байгаагаар ажиллаж байгааг харах боломжийг надад олгоно:

Дэлгэцийн баруун талд байгаа захиалгын хариултуудыг анхаарч үзээрэй.

WebSocket Skillz-ээр түвшин ахих

Бид WebSocket-ийн дэмжлэг болон Heroku-ийн чадавхийг ашиглан бидний үүсгэсэн захиалгыг ашигладаг хэрэгжилтийг бий болгож чадна.

Миний хувьд би дараах агуулгатай index.js файл үүсгэсэн. Үндсэндээ энэ нь WebSocket клиентийг үүсгэсэн бөгөөд үйлчлүүлэгч ажиллаж байгаа эсэхийг шалгахын тулд би ашиглаж болох хуурамч HTTP үйлчилгээг бий болгосон:

 import { createClient } from "graphql-ws"; import { WebSocket } from "ws"; import http from "http"; // Create a dummy HTTP server to bind to Heroku's $PORT const PORT = process.env.PORT || 3000; http.createServer((req, res) => res.end('Server is running')).listen(PORT, () => { console.log(`HTTP server running on port ${PORT}`); }); const host_url = process.env.GRAPHQL_SUBSCRIPTION_HOST || 'ws://localhost:4000/graphql'; const client = createClient({ url: host_url, webSocketImpl: WebSocket }); const query = `subscription { creditUpdated { token customer_token credit_limit balance credit_score } }`; function handleCreditUpdated(data) { console.log('Received credit update:', data); } // Subscribe to the creditUpdated subscription client.subscribe( { query, }, { next: (data) => handleCreditUpdated(data.data.creditUpdated), error: (err) => console.error('Subscription error:', err), complete: () => console.log('Subscription complete'), } );

index.js файлыг бүрэн эхээр нь эндээс олж болно.

Бид энэ энгийн Node.js програмыг Heroku-д суулгаж болох бөгөөд GRAPHQL_SUBSCRIPTION_HOST орчны хувьсагчийг өмнө нь ашиглаж байсан Heroku програмын URL-д тохируулна уу.

Би мөн Херокуд програмаа хэрхэн эхлүүлэхийг хэлэхийн тулд дараах Procfile үүсгэсэн:

 web: node src/index.js

Дараа нь би шинэ Heroku програм үүсгэсэн:

 $ heroku create jvc-websocket-example Creating ⬢ jvc-websocket-example... done https://jvc-websocket-example-62824c0b1df4.herokuapp.com/ | https://git.heroku.com/jvc-websocket-example.git

Дараа нь би ажиллаж байгаа GraphQL сервер рүү чиглүүлэхийн тулд GRAPHQL_SUBSCRIPTION_HOST орчны хувьсагчийг тохируулсан:

 $ heroku --app jvc-websocket-example \ config:set \ GRAPHQL_SUBSCRIPTION_HOST=ws://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/graphql

Энэ үед бид Хероку руу өөрийн кодыг байрлуулахад бэлэн байна.

 $ git commit --allow-empty -m 'Deploy to Heroku' $ git push heroku

WebSocket клиент ажиллаж эхэлмэгц бид түүний статусыг Heroku хяналтын самбараас харж болно:

jvc-websocket-example жишээн дээр Heroku хяналтын самбар доторх логуудыг харснаар бид jvc-graphql-server-sub үйлчилгээний balance өмчийн олон шинэчлэлтийг харж болно. Миний үзүүлэн дээр би төлбөр хийгдсэнийг дуурайж, үлдэгдэл тэг болж буурсан хэрэглээний тохиолдлыг ч авч чадсан:

Терминал дээр бид CLI командын heroku logs-ийн тусламжтайгаар ижил бүртгэлд хандах боломжтой.

 2024-08-28T12:14:48.463846+00:00 app[web.1]: Received credit update: { 2024-08-28T12:14:48.463874+00:00 app[web.1]: token: 'credit-token-1', 2024-08-28T12:14:48.463875+00:00 app[web.1]: customer_token: 'customer-token-1', 2024-08-28T12:14:48.463875+00:00 app[web.1]: credit_limit: 10000, 2024-08-28T12:14:48.463875+00:00 app[web.1]: balance: 9950, 2024-08-28T12:14:48.463876+00:00 app[web.1]: credit_score: 750 2024-08-28T12:14:48.463876+00:00 app[web.1]: }

Бид захиалгын хэрэгжилттэй GraphQL үйлчилгээтэй болоод зогсохгүй эдгээр шинэчлэлтүүдийг ашигладаг WebSocket клиенттэй болсон.

Дүгнэлт

Миний уншигчид миний хувийн эрхэм зорилгын мэдэгдлийг санаж байгаа байх, би үүнийг ямар ч мэдээллийн технологийн мэргэжилтэнд хэрэглэж болно гэж бодож байна:

“Таны оюуны өмчийн үнэ цэнийг нэмэгдүүлэх онцлог/функцийг бий болгоход цаг заваа зориул. Хүрээ, бүтээгдэхүүн, үйлчилгээг бусад бүх зүйлд ашиглаарай." - Ж.Вестер

GraphQL-ийн захиалгыг гүнзгийрүүлэн судлахдаа бид Heroku дээр ажиллаж байгаа Apollo серверийн шинэчлэлтийг WebSockets ашигладаг Node.js-д суурилсан программ болох Heroku дээр ажилладаг өөр үйлчилгээг ашиглан амжилттай хийсэн. Хөнгөн захиалгыг ашигласнаар бид өөрчлөгдөөгүй өгөгдөлд зориулсан асуулга илгээхээс зайлсхийж, зээлийн үлдэгдлийн шинэчлэлтүүдийг тохиолдоход нь хүлээн авахаар захиалсан.

Оршил хэсэгт би өмнө нь бичиж байсан сэдвийнхээ дотроос нэмэлт үнэ цэнийн зарчмыг хайж олох талаар дурдсан. GraphQL-ийн захиалга нь хэрэглэгчдэд эх өгөгдлийн эсрэг асуулга хийх шаардлагагүйгээр нэн даруй шинэчлэлтүүдийг хүлээн авах боломжийг олгодог тул миний бодож байсан зүйлийн гайхалтай жишээ юм. Энэ нь Хэрэглэгчийн 360 өгөгдлийн хэрэглэгчдийг маш их баярлуулж, шинэчлэлтүүдийг хийх боломжтой гэдгийг мэдэж байх болно.

Хероку бол CLI болон стандарт Git командуудыг ашиглан шийдлүүдийг хурдан гаргах боломжийг олгодог платформыг санал болгосноор миний эрхэм зорилгыг дагаж мөрддөг өөр нэг жишээ юм. Энэ нь надад захиалгын ашиглалтын жишээг харуулах хялбар аргыг төдийгүй WebSockets ашиглан хэрэглэгчийг хэрэгжүүлэх боломжийг олгодог.

Хэрэв та энэ нийтлэлийн эх кодыг сонирхож байгаа бол GitLab дээрх миний агуулахуудыг шалгана уу:

• graphql-сервер-хэрэглэгчийн-захиалга
• вэбсокет-жишээ

Би энэ хичээл зүтгэлээр GraphQL-ийн ур чадвараа амжилттай ахиулсан гэж хэлэхэд өөртөө итгэлтэй байна. Энэ аялал миний хувьд шинэ бөгөөд сорилт байсан ... бас маш хөгжилтэй байсан!

Би дараа нь баталгаажуулалт хийхээр төлөвлөж байгаа бөгөөд энэ нь GraphQL болон Apollo Server-ийн түвшинг дээшлүүлэх өөр нэг боломжийг олгоно гэж найдаж байна. Хамтдаа байгаарай!

Өдрийг үнэхээр сайхан өнгөрүүлээрэй!