Իմ GraphQL հմտությունների մակարդակի բարձրացում. իրական ժամանակի բաժանորդագրություններ

Արդեն մի քանի տարի է, ես փորձել եմ բացահայտել շրջանակներ, ապրանքներ և ծառայություններ, որոնք թույլ են տալիս տեխնոլոգներին պահպանել իրենց ուշադրությունը իրենց մտավոր սեփականության արժեքի ընդլայնման վրա: Սա ինձ համար շարունակում է մնալ հրաշալի ճանապարհորդություն՝ լի եզակի ուսուցման հնարավորություններով: Ինժեները իմ մեջ վերջերս մտածեց, թե արդյոք կա մի իրավիճակ, որտեղ ես կարող եմ երկրորդական օգուտ գտնել գոյություն ունեցող հայեցակարգի համար, որի մասին ես նախկինում խոսել եմ: Այլ կերպ ասած, ես կարո՞ղ եմ բացահայտել մեկ այլ օգուտ նույն ազդեցության մակարդակով, ինչ նախկինում ճանաչված սկզբնական մայր լուծումը: Այս հոդվածի համար ես ուզում էի ավելի խորանալ GraphQL-ի մեջ՝ տեսնելու, թե ինչ կարող եմ գտնել: Իմ « » հոդվածում ես խոսեցի այն մասին, թե ինչպես կան իրական աշխարհի սցենարներ, երբ GraphQL-ը գերադասելի է RESTful ծառայության փոխարեն: Մենք քայլեցինք, թե ինչպես կարելի է կառուցել և տեղակայել GraphQL API՝ օգտագործելով Apollo Server: Երբ հանգստանալու ժամանակն է Այս հաջորդական գրառման մեջ ես նախատեսում եմ բարձրացնել իմ գիտելիքները GraphQL-ի մասին՝ անցնելով իրական ժամանակում տվյալների որոնման բաժանորդագրությունների միջով: Մենք նաև կկառուցենք WebSocket ծառայություն՝ բաժանորդագրությունները սպառելու համար: Recap. Customer 360 Use Case Իմ նախորդ հոդվածը կենտրոնացած էր Հաճախորդ 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-ում բաժանորդագրության արժեքի առաջարկի ըմբռնում և իրականացում: Օգտագործելով WebSocket ներդրումը GraphQL բաժանորդագրությունը սպառելու համար: GraphQL հարցումների և մուտացիաների վրա բաժանորդագրություններ օգտագործելու գաղափարը նախընտրելի մեթոդ է, երբ բավարարվում են հետևյալ պայմանները. Փոքր, աստիճանական փոփոխություններ մեծ օբյեկտների նկատմամբ Ցածր հետաձգման, իրական ժամանակի թարմացումներ (օրինակ՝ զրույցի հավելված) Սա կարևոր է, քանի որ GraphQL-ի ներսում բաժանորդագրություններ իրականացնելը մանրուք չէ: Ոչ միայն հիմքում ընկած սերվերը պետք է թարմացվի, այլև սպառող հավելվածը կպահանջի որոշակի վերանախագծում: Բարեբախտաբար, օգտագործման դեպքը, որը մենք հետապնդում ենք մեր Հաճախորդ 360 օրինակով, հիանալի հարմար է բաժանորդագրությունների համար: Բացի այդ, մենք կիրականացնենք WebSocket մոտեցում՝ այդ բաժանորդագրությունները օգտագործելու համար: Ինչպես նախկինում, ես կշարունակեմ օգտագործել Apollo-ն առաջ գնալով: Բաժանորդագրության վարկերի մակարդակի բարձրացում Նախ, մենք պետք է տեղադրենք անհրաժեշտ գրադարանները՝ իմ Apollo GraphQL սերվերով բաժանորդագրություններն աջակցելու համար. npm install ws npm install graphql-ws @graphql-tools/schema npm install graphql-subscriptions Տեղադրված այդ տարրերով ես կենտրոնացա թարմացման վրա իմ սկզբնական պահոցից՝ ընդլայնելու հաստատունը հետևյալով. index.ts typedefs 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 Server-ը անջատում է Apollo Explorer-ը արտադրական միջավայրերում: Որպեսզի Apollo Explorer-ը հասանելի լինի մեր կարիքների համար, ես պետք է սահմանեի միջավայրի փոփոխականը զարգացման համար: Ես դա սահմանեցի հետևյալ CLI հրամանով. NODE_ENV $ 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 Dashboard-ի արագ տեսքը ցույց տվեց, որ իմ Apollo սերվերը աշխատում է առանց որևէ խնդիրների. Կարգավորումների բաժնում ես գտա Heroku հավելվածի URL-ը այս ծառայության օրինակի համար. https://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/ Խնդրում ենք նկատի ունենալ. այս հղումն այլևս չի գործի մինչև այս հոդվածը հրապարակվի: Առայժմ ես կարող եմ GraphQL-ն ավելացնել այս URL-ին՝ Apollo Server Studio-ին գործարկելու համար: Սա թույլ կտա ինձ տեսնել, որ բաժանորդագրությունները աշխատում են այնպես, ինչպես սպասվում էր. Ուշադրություն դարձրեք Բաժանորդագրության պատասխաններին էկրանի աջ կողմում: Հարթեցում WebSocket Skillz-ի միջոցով Մենք կարող ենք օգտագործել և Heroku-ի հնարավորությունները՝ ստեղծելու այնպիսի իրականացում, որը սպառում է մեր ստեղծած բաժանորդագրությունը: WebSocket-ի աջակցությունը Իմ դեպքում ես ստեղծեցի 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-ում, համոզվելով, որ միջավայրի փոփոխականը սահմանել ենք Heroku հավելվածի URL-ին, որը մենք նախկինում օգտագործել ենք: GRAPHQL_SUBSCRIPTION_HOST Ես նաև ստեղծեցի հետևյալ Հերոկուին պատմելու համար, թե ինչպես գործարկել իմ հավելվածը. 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 Dashboard-ում. Դիտելով Heroku Dashboard-ի տեղեկամատյանները օրինակի համար՝ մենք կարող ենք տեսնել ծառայության հատկության բազմաթիվ թարմացումները: Իմ ցուցադրությունում ես նույնիսկ կարողացա ֆիքսել օգտագործման դեպքը, երբ մնացորդը զրոյի է հասցվել՝ նմանակելով, որ վճարում է կատարվել. jvc-websocket-example jvc-graphql-server-sub balance Տերմինալում մենք կարող ենք մուտք գործել այդ նույն տեղեկամատյանները CLI հրամանի heroku տեղեկամատյաններով: 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 սերվերի թարմացումները՝ օգտագործելով մեկ այլ ծառայություն, որը նույնպես գործում է Heroku-ի վրա՝ Node.js-ի վրա հիմնված հավելված, որն օգտագործում է WebSockets: Օգտագործելով թեթև բաժանորդագրությունները՝ մենք խուսափեցինք անփոփոխ տվյալների համար հարցումներ ուղարկելուց, այլ պարզապես բաժանորդագրվեցինք՝ ստանալու վարկային մնացորդի թարմացումները, երբ դրանք տեղի էին ունենում: Ներածությունում ես նշեցի, որ որոնել լրացուցիչ արժեքային սկզբունք այն թեմայի ներսում, որի մասին նախկինում գրել եմ: GraphQL բաժանորդագրությունները հիանալի օրինակ են այն ամենի, ինչ ես ունեի, քանի որ այն թույլ է տալիս սպառողներին անմիջապես թարմացումներ ստանալ՝ առանց աղբյուրի տվյալների դեմ հարցումներ անելու անհրաժեշտության: Սա շատ կհուզի Հաճախորդ 360-ի տվյալների սպառողներին՝ իմանալով, որ նրանք կարող են թարմացումներ կատարել, ինչպես դրանք տեղի են ունենում: Heroku-ն ևս մեկ օրինակ է, որը շարունակում է հավատարիմ մնալ իմ առաքելության հայտարարությանը` առաջարկելով հարթակ, որն ինձ հնարավորություն է տալիս արագորեն նախատիպել լուծումները՝ օգտագործելով CLI և ստանդարտ Git հրամանները: Սա ոչ միայն ինձ հեշտ միջոց է տալիս ցուցադրելու իմ բաժանորդագրության օգտագործման դեպքը, այլև WebSockets օգտագործող սպառողին իրականացնելու համար: Եթե ձեզ հետաքրքրում է այս հոդվածի սկզբնական կոդը, ստուգեք իմ պահեստները GitLab-ում. graphql-server-customer-բաժանորդագրություն websocket-օրինակ Ես վստահ եմ զգում, երբ ասում եմ, որ այս ջանքերով ես հաջողությամբ բարձրացրել եմ իմ GraphQL հմտությունները: Այս ճամփորդությունն ինձ համար նոր և դժվար էր… և նաև շատ զվարճալի: Հաջորդիվ ես նախատեսում եմ սուզվել նույնականացման մեջ, ինչը, հուսով եմ, ևս մեկ հնարավորություն է տալիս մակարդակի բարձրանալու GraphQL-ի և Apollo Server-ի հետ: Հետևե՛ք: Ունեցեք իսկապես հիանալի օր: