1 परिचय
अंतिम अद्यतन: 2023-01-27
लीडरबोर्ड बनाने में क्या लगता है?
अपने मूल में, लीडरबोर्ड केवल एक जटिल कारक के साथ स्कोर की तालिकाएँ हैं: किसी दिए गए स्कोर के लिए रैंक पढ़ने के लिए किसी प्रकार के क्रम में अन्य सभी स्कोर के ज्ञान की आवश्यकता होती है। इसके अलावा, यदि आपका गेम आगे बढ़ता है, तो आपके लीडरबोर्ड बड़े हो जाएंगे और उन पर बार-बार पढ़ा और लिखा जाएगा। एक सफल लीडरबोर्ड बनाने के लिए, उसे इस रैंकिंग ऑपरेशन को शीघ्रता से संभालने में सक्षम होना चाहिए।
आप क्या बनाएंगे
इस कोडलैब में, आप विभिन्न अलग-अलग लीडरबोर्ड लागू करेंगे, जिनमें से प्रत्येक एक अलग परिदृश्य के लिए उपयुक्त होगा।
आप क्या सीखेंगे
आप सीखेंगे कि चार अलग-अलग लीडरबोर्ड कैसे लागू करें:
- रैंक निर्धारित करने के लिए सरल रिकॉर्ड-गिनती का उपयोग करके एक सहज कार्यान्वयन
- एक सस्ता, समय-समय पर अद्यतन होने वाला लीडरबोर्ड
- कुछ वृक्ष बकवास के साथ एक वास्तविक समय लीडरबोर्ड
- बहुत बड़े खिलाड़ी आधारों की अनुमानित रैंकिंग के लिए एक स्टोकेस्टिक (संभावित) लीडरबोर्ड
आपको किस चीज़ की ज़रूरत पड़ेगी
- Chrome का नवीनतम संस्करण (107 या बाद का संस्करण)
- Node.js 16 या उच्चतर (यदि आप nvm का उपयोग कर रहे हैं तो अपना संस्करण क्रमांक देखने के लिए
nvm --versionचलाएँ) - सशुल्क फायरबेस ब्लेज़ योजना (वैकल्पिक)
- फायरबेस सीएलआई v11.16.0 या उच्चतर
सीएलआई स्थापित करने के लिए, आपnpm install -g firebase-toolsचला सकते हैं या अधिक इंस्टॉलेशन विकल्पों के लिए सीएलआई दस्तावेज़ देख सकते हैं। - जावास्क्रिप्ट, क्लाउड फायरस्टोर, क्लाउड फ़ंक्शंस और क्रोम डेवटूल्स का ज्ञान
2. स्थापित होना
कोड प्राप्त करें
हमने इस प्रोजेक्ट के लिए आपकी ज़रूरत की सभी चीज़ें Git रेपो में डाल दी हैं। आरंभ करने के लिए, आपको कोड लेना होगा और इसे अपने पसंदीदा डेव परिवेश में खोलना होगा। इस कोडलैब के लिए, हमने वीएस कोड का उपयोग किया, लेकिन कोई भी टेक्स्ट एडिटर करेगा।
और डाउनलोड की गई ज़िप फ़ाइल को अनपैक करें।
या, अपनी पसंद की निर्देशिका में क्लोन करें:
git clone https://github.com/FirebaseExtended/firestore-leaderboards-codelab.git
हमारा शुरुआती बिंदु क्या है?
हमारा प्रोजेक्ट वर्तमान में कुछ खाली कार्यों के साथ एक खाली स्लेट है:
-
index.htmlमें कुछ ग्लू स्क्रिप्ट्स हैं जो हमें डेव कंसोल से फ़ंक्शंस को इनवॉइस करने और उनके आउटपुट देखने देती हैं। हम इसका उपयोग अपने बैकएंड के साथ इंटरफेस करने और अपने फ़ंक्शन इनवोकेशन के परिणाम देखने के लिए करेंगे। वास्तविक दुनिया के परिदृश्य में, आप ये बैकएंड कॉल सीधे अपने गेम से करेंगे—हम इस कोडलैब में गेम का उपयोग नहीं कर रहे हैं क्योंकि हर बार जब आप लीडरबोर्ड में स्कोर जोड़ना चाहेंगे तो गेम खेलने में बहुत लंबा समय लगेगा। . -
functions/index.jsमें हमारे सभी क्लाउड फ़ंक्शंस शामिल हैं। आप कुछ उपयोगिता फ़ंक्शंस देखेंगे, जैसेaddScoresऔरdeleteScores, साथ ही वे फ़ंक्शंस जिन्हें हम इस कोडलैब में लागू करेंगे, जो किसी अन्य फ़ाइल में सहायक फ़ंक्शंस को कॉल करते हैं। -
functions/functions-helpers.jsमें वे खाली फ़ंक्शन शामिल हैं जिन्हें हम लागू करेंगे। प्रत्येक लीडरबोर्ड के लिए, हम रीड, क्रिएट और अपडेट फ़ंक्शंस लागू करेंगे, और आप देखेंगे कि कार्यान्वयन की हमारी पसंद हमारे कार्यान्वयन की जटिलता और इसके स्केलिंग प्रदर्शन दोनों को कैसे प्रभावित करती है। -
functions/utils.jsमें अधिक उपयोगिता फ़ंक्शन शामिल हैं। हम इस कोडलैब में इस फ़ाइल को नहीं छूएंगे।
फायरबेस प्रोजेक्ट बनाएं और कॉन्फ़िगर करें
- फायरबेस कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें।
- एक नया प्रोजेक्ट बनाने के लिए, वांछित प्रोजेक्ट नाम दर्ज करें।
यह प्रोजेक्ट नाम के आधार पर प्रोजेक्ट आईडी (प्रोजेक्ट नाम के नीचे प्रदर्शित) भी सेट कर देगा। आप इसे और अधिक अनुकूलित करने के लिए वैकल्पिक रूप से प्रोजेक्ट आईडी पर संपादन आइकन पर क्लिक कर सकते हैं। - यदि संकेत दिया जाए, तो फायरबेस शर्तों की समीक्षा करें और स्वीकार करें।
- जारी रखें पर क्लिक करें.
- इस प्रोजेक्ट के लिए Google Analytics सक्षम करें विकल्प चुनें और फिर जारी रखें पर क्लिक करें।
- उपयोग करने के लिए मौजूदा Google Analytics खाता चुनें या नया खाता बनाने के लिए नया खाता बनाएं चुनें।
- प्रोजेक्ट बनाएं पर क्लिक करें.
- जब प्रोजेक्ट बन जाए, तो जारी रखें पर क्लिक करें।
- बिल्ड मेनू से, फ़ंक्शंस पर क्लिक करें, और यदि संकेत दिया जाए, तो ब्लेज़ बिलिंग योजना का उपयोग करने के लिए अपने प्रोजेक्ट को अपग्रेड करें।
- बिल्ड मेनू से, फायरस्टोर डेटाबेस पर क्लिक करें।
- दिखाई देने वाले डेटाबेस बनाएँ संवाद में, परीक्षण मोड में प्रारंभ करें चुनें, फिर अगला क्लिक करें।
- क्लाउड फायरस्टोर स्थान ड्रॉप-डाउन से एक क्षेत्र चुनें, फिर सक्षम करें पर क्लिक करें।
अपना लीडरबोर्ड कॉन्फ़िगर करें और चलाएं
- टर्मिनल में, प्रोजेक्ट रूट पर नेविगेट करें और
firebase use --addचलाएं। आपके द्वारा अभी बनाया गया फायरबेस प्रोजेक्ट चुनें। - प्रोजेक्ट के रूट में,
firebase emulators:start --only hostingचलाएँ। - अपने ब्राउज़र में,
localhost:5000पर जाएँ। - Chrome DevTools का JavaScript कंसोल खोलें और
leaderboard.jsआयात करें:const leaderboard = await import("http://localhost:5000/scripts/leaderboard.js"); -
leaderboard.codelab();कंसोल में. यदि आपको कोई स्वागत संदेश दिखाई देता है, तो आप पूरी तरह तैयार हैं! यदि नहीं, तो एमुलेटर बंद करें और चरण 2-4 पुनः चलाएँ।
आइए पहले लीडरबोर्ड कार्यान्वयन पर आगे बढ़ें।
3. एक सरल लीडरबोर्ड लागू करें
इस अनुभाग के अंत तक, हम लीडरबोर्ड में एक स्कोर जोड़ने में सक्षम होंगे और यह हमें हमारी रैंक बताएगा।
आगे बढ़ने से पहले, आइए बताएं कि यह लीडरबोर्ड कार्यान्वयन कैसे काम करता है: सभी खिलाड़ियों को एक ही संग्रह में संग्रहीत किया जाता है, और एक खिलाड़ी की रैंक प्राप्त करने का काम संग्रह को पुनः प्राप्त करके और यह गिनकर किया जाता है कि कितने खिलाड़ी उनसे आगे हैं। इससे स्कोर डालना और अपडेट करना आसान हो जाता है। एक नया स्कोर सम्मिलित करने के लिए, हम बस इसे संग्रह में जोड़ते हैं, और इसे अपडेट करने के लिए, हम अपने वर्तमान उपयोगकर्ता के लिए फ़िल्टर करते हैं और फिर परिणामी दस्तावेज़ को अपडेट करते हैं। आइए देखें कि यह कोड में कैसा दिखता है।
functions/functions-helper.js में, createScore फ़ंक्शन लागू करें, जो लगभग उतना ही सरल है जितना इसे मिलता है:
async function createScore(score, playerID, firestore) {
return firestore.collection("scores").doc().create({
user: playerID,
score: score,
});
}
स्कोर अपडेट करने के लिए, हमें बस यह सुनिश्चित करने के लिए एक त्रुटि जांच जोड़ने की आवश्यकता है कि अपडेट किया जा रहा स्कोर पहले से मौजूद है:
async function updateScore(playerID, newScore, firestore) {
const playerSnapshot = await firestore.collection("scores")
.where("user", "==", playerID).get();
if (playerSnapshot.size !== 1) {
throw Error(`User not found in leaderboard: ${playerID}`);
}
const player = playerSnapshot.docs[0];
const doc = firestore.doc(player.id);
return doc.update({
score: newScore,
});
}
और अंत में, हमारा सरल लेकिन कम-स्केलेबल रैंक फ़ंक्शन:
async function readRank(playerID, firestore) {
const scores = await firestore.collection("scores")
.orderBy("score", "desc").get();
const player = `${playerID}`;
let rank = 1;
for (const doc of scores.docs) {
const user = `${doc.get("user")}`;
if (user === player) {
return {
user: player,
rank: rank,
score: doc.get("score"),
};
}
rank++;
}
// No user found
throw Error(`User not found in leaderboard: ${playerID}`);
}
आइए इसका परीक्षण करें! टर्मिनल में निम्नलिखित चलाकर अपने कार्यों को तैनात करें:
firebase deploy --only functions
और फिर, क्रोम के जेएस कंसोल में, कुछ अन्य स्कोर जोड़ें ताकि हम अन्य खिलाड़ियों के बीच अपनी रैंकिंग देख सकें।
leaderboard.addScores(); // Results may take some time to appear.
अब हम मिश्रण में अपना स्कोर जोड़ सकते हैं:
leaderboard.addScore(999, 11); // You can make up a score (second argument) here.
जब लिखना पूरा हो जाए, तो आपको कंसोल में एक प्रतिक्रिया दिखाई देगी जिसमें लिखा होगा "स्कोर बनाया गया।" इसके बजाय कोई त्रुटि दिख रही है? यह देखने के लिए कि क्या गलत हुआ, फ़ायरबेस कंसोल के माध्यम से फ़ंक्शंस लॉग खोलें।
और, अंततः, हम अपना स्कोर प्राप्त कर सकते हैं और उसे अपडेट कर सकते हैं।
leaderboard.getRank(999);
leaderboard.updateScore(999, 0);
leaderboard.getRank(999); // we should be last place now (11)
हालाँकि, यह कार्यान्वयन हमें किसी दिए गए स्कोर की रैंक प्राप्त करने के लिए अवांछनीय रैखिक समय और मेमोरी आवश्यकताएँ देता है। चूंकि फ़ंक्शन निष्पादन समय और मेमोरी दोनों सीमित हैं, इसका मतलब न केवल यह होगा कि हमारी प्राप्ति तेजी से धीमी हो जाएगी, बल्कि लीडरबोर्ड में पर्याप्त स्कोर जोड़े जाने के बाद, परिणाम देने से पहले हमारे फ़ंक्शन का समय समाप्त हो जाएगा या क्रैश हो जाएगा। स्पष्ट रूप से, यदि हम मुट्ठी भर खिलाड़ियों से आगे बढ़ना चाहते हैं तो हमें कुछ बेहतर की आवश्यकता होगी।
यदि आप फायरस्टोर के प्रशंसक हैं, तो आप COUNT एकत्रीकरण प्रश्नों से अवगत हो सकते हैं, जो इस लीडरबोर्ड को और अधिक प्रदर्शनशील बना देगा। और आप सही होंगे! COUNT क्वेरीज़ के साथ, यह एक मिलियन या उससे अधिक उपयोगकर्ताओं से काफ़ी नीचे है, हालाँकि इसका प्रदर्शन अभी भी रैखिक है।
लेकिन रुकिए, आप खुद सोच रहे होंगे, अगर हम वैसे भी संग्रह में सभी दस्तावेज़ों की गणना करने जा रहे हैं, तो हम प्रत्येक दस्तावेज़ को एक रैंक दे सकते हैं और फिर जब हमें इसे लाने की आवश्यकता होगी, तो हमारा फ़ेच O(1) होगा समय और स्मृति! यह हमें हमारे अगले दृष्टिकोण, समय-समय पर अद्यतन होने वाले लीडरबोर्ड की ओर ले जाता है।
4. समय-समय पर अद्यतन होने वाला लीडरबोर्ड लागू करें
इस दृष्टिकोण की कुंजी रैंक को दस्तावेज़ में ही संग्रहीत करना है, इसलिए इसे लाने से हमें बिना किसी अतिरिक्त कार्य के रैंक मिल जाती है। इसे प्राप्त करने के लिए, हमें एक नए प्रकार के फ़ंक्शन की आवश्यकता होगी।
index.js में, निम्नलिखित जोड़ें:
// Also add this to the top of your file
const admin = require("firebase-admin");
exports.scheduledFunctionCrontab = functions.pubsub.schedule("0 2 * * *")
// Schedule this when most of your users are offline to avoid
// database spikiness.
.timeZone("America/Los_Angeles")
.onRun((context) => {
const scores = admin.firestore().collection("scores");
scores.orderBy("score", "desc").get().then((snapshot) => {
let rank = 1;
const writes = [];
for (const docSnapshot of snapshot.docs) {
const docReference = scores.doc(docSnapshot.id);
writes.push(docReference.set({rank: rank}, admin.firestore.SetOptions.merge()));
rank++;
}
Promise.all(writes).then((result) => {
console.log(`Writes completed with results: ${result}`);
});
});
return null;
});
अब हमारे पढ़ने, अद्यतन करने और लिखने के सभी कार्य अच्छे और सरल हैं। लिखें और अपडेट करें दोनों अपरिवर्तित हैं, लेकिन पढ़ना बन जाता है ( functions-helpers.js में):
async function readRank(playerID, firestore) {
const scores = firestore.collection("scores");
const playerSnapshot = await scores
.where("user", "==", playerID).get();
if (playerSnapshot.size === 0) {
throw Error(`User not found in leaderboard: ${playerID}`);
}
const player = playerSnapshot.docs[0];
if (player.get("rank") === undefined) {
// This score was added before our scheduled function could run,
// but this shouldn't be treated as an error
return {
user: playerID,
rank: null,
score: player.get("score"),
};
}
return {
user: playerID,
rank: player.get("rank"),
score: player.get("score"),
};
}
दुर्भाग्य से, आप अपने प्रोजेक्ट में बिलिंग खाता जोड़े बिना इसे तैनात और परीक्षण नहीं कर पाएंगे। यदि आपके पास एक बिलिंग खाता है, तो निर्धारित फ़ंक्शन पर अंतराल को छोटा करें और देखें कि आपका फ़ंक्शन जादुई रूप से आपके लीडरबोर्ड स्कोर को रैंक प्रदान करता है।
यदि नहीं, तो निर्धारित फ़ंक्शन को हटा दें और अगले कार्यान्वयन पर आगे बढ़ें।
आगे बढ़ें और अगले अनुभाग की तैयारी के लिए स्कोर संग्रह के आगे 3 बिंदुओं पर क्लिक करके अपने फायरस्टोर डेटाबेस में स्कोर हटा दें।
5. एक वास्तविक समय ट्री लीडरबोर्ड लागू करें
यह दृष्टिकोण डेटाबेस संग्रह में ही खोज डेटा संग्रहीत करके काम करता है। एक समान संग्रह करने के बजाय, हमारा लक्ष्य हर चीज़ को एक पेड़ में संग्रहीत करना है जिसे हम दस्तावेज़ों के माध्यम से पार कर सकते हैं। यह हमें किसी दिए गए स्कोर की रैंक के लिए बाइनरी (या एन-एरी) खोज करने की अनुमति देता है। वह कैसा दिख सकता है?
शुरू करने के लिए, हम अपने स्कोर को मोटे तौर पर समान बकेट में वितरित करने में सक्षम होना चाहेंगे, जिसके लिए हमारे उपयोगकर्ताओं द्वारा लॉग किए जा रहे स्कोर के मूल्यों के बारे में कुछ ज्ञान की आवश्यकता होगी; उदाहरण के लिए, यदि आप किसी प्रतिस्पर्धी गेम में कौशल रेटिंग के लिए लीडरबोर्ड बना रहे हैं, तो आपके उपयोगकर्ताओं की कौशल रेटिंग लगभग हमेशा सामान्य रूप से वितरित की जाएंगी। हमारा यादृच्छिक स्कोर जनरेटिंग फ़ंक्शन जावास्क्रिप्ट के Math.random() का उपयोग करता है, जिसके परिणामस्वरूप लगभग समान वितरण होता है, इसलिए हम अपनी बकेट को समान रूप से विभाजित करेंगे।
इस उदाहरण में हम सरलता के लिए 3 बकेट का उपयोग करेंगे, लेकिन आप संभवतः पाएंगे कि यदि आप वास्तविक ऐप में इस कार्यान्वयन का उपयोग करते हैं तो अधिक बकेट तेजी से परिणाम देंगे - एक उथले पेड़ का मतलब है औसतन कम संग्रह प्राप्त करना और कम लॉक विवाद।
किसी खिलाड़ी की रैंक उच्च स्कोर वाले खिलाड़ियों की संख्या के योग से दी जाती है, साथ ही खिलाड़ी के लिए एक अंक भी। scores के अंतर्गत प्रत्येक संग्रह में तीन दस्तावेज़ संग्रहीत होंगे, प्रत्येक में एक श्रेणी, प्रत्येक श्रेणी के अंतर्गत दस्तावेज़ों की संख्या और फिर तीन संबंधित उपसंग्रह होंगे। एक रैंक पढ़ने के लिए हम इस पेड़ को पार करके एक अंक की खोज करेंगे और बड़े अंकों के योग पर नज़र रखेंगे। जब हमें अपना स्कोर मिल जाएगा, तो हमारे पास सही योग भी होगा।
लेखन काफी अधिक जटिल है. सबसे पहले, जब एक ही समय में कई बार लिखा या पढ़ा जाता है तो डेटा विसंगतियों को रोकने के लिए हमें अपने सभी लेखन को लेनदेन के भीतर करने की आवश्यकता होगी। जब हम अपने नए दस्तावेज़ लिखने के लिए पेड़ को पार करते हैं तो हमें ऊपर वर्णित सभी शर्तों को बनाए रखने की भी आवश्यकता होगी। और, अंत में, चूंकि हमारे पास इस नए दृष्टिकोण की सभी जटिलताएं हैं और हमारे सभी मूल दस्तावेज़ों को संग्रहीत करने की आवश्यकता है, इसलिए हमारी भंडारण लागत थोड़ी बढ़ जाएगी (लेकिन यह अभी भी रैखिक है)।
functions-helpers.js में:
async function createScore(playerID, score, firestore) {
/**
* This function assumes a minimum score of 0 and that value
* is between min and max.
* Returns the expected size of a bucket for a given score
* so that bucket sizes stay constant, to avoid expensive
* re-bucketing.
* @param {number} value The new score.
* @param {number} min The min of the previous range.
* @param {number} max The max of the previous range. Must be greater than
* min.
* @return {Object<string, number>} Returns an object containing the new min
* and max.
*/
function bucket(value, min, max) {
const bucketSize = (max - min) / 3;
const bucketMin = Math.floor(value / bucketSize) * bucketSize;
const bucketMax = bucketMin + bucketSize;
return {min: bucketMin, max: bucketMax};
}
/**
* A function used to store pending writes until all reads within a
* transaction have completed.
*
* @callback PendingWrite
* @param {admin.firestore.Transaction} transaction The transaction
* to be used for writes.
* @return {void}
*/
/**
* Recursively searches for the node to write the score to,
* then writes the score and updates any counters along the way.
* @param {number} id The user associated with the score.
* @param {number} value The new score.
* @param {admin.firestore.CollectionReference} coll The collection this
* value should be written to.
* @param {Object<string, number>} range An object with properties min and
* max defining the range this score should be in. Ranges cannot overlap
* without causing problems. Use the bucket function above to determine a
* root range from constant values to ensure consistency.
* @param {admin.firestore.Transaction} transaction The transaction used to
* ensure consistency during tree updates.
* @param {Array<PendingWrite>} pendingWrites A series of writes that should
* occur once all reads within a transaction have completed.
* @return {void} Write error/success is handled via the transaction object.
*/
async function writeScoreToCollection(
id, value, coll, range, transaction, pendingWrites) {
const snapshot = await transaction.get(coll);
if (snapshot.empty) {
// This is the first score to be inserted into this node.
for (const write of pendingWrites) {
write(transaction);
}
const docRef = coll.doc();
transaction.create(docRef, {exact: {score: value, user: id}});
return;
}
const min = range.min;
const max = range.max;
for (const node of snapshot.docs) {
const data = node.data();
if (data.exact !== undefined) {
// This node held an exact score.
const newRange = bucket(value, min, max);
const tempRange = bucket(data.exact.score, min, max);
if (newRange.min === tempRange.min &&
newRange.max === tempRange.max) {
// The scores belong in the same range, so we need to "demote" both
// to a lower level of the tree and convert this node to a range.
const rangeData = {
range: newRange,
count: 2,
};
for (const write of pendingWrites) {
write(transaction);
}
const docReference = node.ref;
transaction.set(docReference, rangeData);
transaction.create(docReference.collection("scores").doc(), data);
transaction.create(
docReference.collection("scores").doc(),
{exact: {score: value, user: id}},
);
return;
} else {
// The scores are in different ranges. Continue and try to find a
// range that fits this score.
continue;
}
}
if (data.range.min <= value && data.range.max > value) {
// The score belongs to this range that may have subvalues.
// Increment the range's count in pendingWrites, since
// subsequent recursion may incur more reads.
const docReference = node.ref;
const newCount = node.get("count") + 1;
pendingWrites.push((t) => {
t.update(docReference, {count: newCount});
});
const newRange = bucket(value, min, max);
return writeScoreToCollection(
id,
value,
docReference.collection("scores"),
newRange,
transaction,
pendingWrites,
);
}
}
// No appropriate range was found, create an `exact` value.
transaction.create(coll.doc(), {exact: {score: value, user: id}});
}
const scores = firestore.collection("scores");
const players = firestore.collection("players");
return firestore.runTransaction((transaction) => {
return writeScoreToCollection(
playerID, score, scores, {min: 0, max: 1000}, transaction, [],
).then(() => {
transaction.create(players.doc(), {
user: playerID,
score: score,
});
});
});
}
यह निश्चित रूप से हमारे पिछले कार्यान्वयन से अधिक जटिल है, जो एक एकल विधि कॉल और कोड की केवल छह पंक्तियाँ थी। एक बार जब आप इस पद्धति को लागू कर लें, तो डेटाबेस में कुछ अंक जोड़ने और परिणामी पेड़ की संरचना का अवलोकन करने का प्रयास करें। आपके JS कंसोल में:
leaderboard.addScores();
परिणामी डेटाबेस संरचना कुछ इस तरह दिखनी चाहिए, जिसमें पेड़ की संरचना स्पष्ट रूप से दिखाई दे और पेड़ की पत्तियाँ व्यक्तिगत स्कोर का प्रतिनिधित्व करें।
scores
- document
range: 0-333.33
count: 2
scores:
- document
exact:
score: 18
user: 1
- document
exact:
score: 22
user: 2
अब जबकि हमारे पास कठिन हिस्सा है, हम पहले बताए अनुसार पेड़ को पार करके स्कोर पढ़ सकते हैं।
async function readRank(playerID, firestore) {
const players = await firestore.collection("players")
.where("user", "==", playerID).get();
if (players.empty) {
throw Error(`Player not found in leaderboard: ${playerID}`);
}
if (players.size > 1) {
console.info(`Multiple scores with player ${playerID}, fetching first`);
}
const player = players.docs[0].data();
const score = player.score;
const scores = firestore.collection("scores");
/**
* Recursively finds a player score in a collection.
* @param {string} id The player's ID, since some players may be tied.
* @param {number} value The player's score.
* @param {admin.firestore.CollectionReference} coll The collection to
* search.
* @param {number} currentCount The current count of players ahead of the
* player.
* @return {Promise<number>} The rank of the player (the number of players
* ahead of them plus one).
*/
async function findPlayerScoreInCollection(id, value, coll, currentCount) {
const snapshot = await coll.get();
for (const doc of snapshot.docs) {
if (doc.get("exact") !== undefined) {
// This is an exact score. If it matches the score we're looking
// for, return. Otherwise, check if it should be counted.
const exact = doc.data().exact;
if (exact.score === value) {
if (exact.user === id) {
// Score found.
return currentCount + 1;
} else {
// The player is tied with another. In this case, don't increment
// the count.
continue;
}
} else if (exact.score > value) {
// Increment count
currentCount++;
continue;
} else {
// Do nothing
continue;
}
} else {
// This is a range. If it matches the score we're looking for,
// search the range recursively, otherwise, check if it should be
// counted.
const range = doc.data().range;
const count = doc.get("count");
if (range.min > value) {
// The range is greater than the score, so add it to the rank
// count.
currentCount += count;
continue;
} else if (range.max <= value) {
// do nothing
continue;
} else {
const subcollection = doc.ref.collection("scores");
return findPlayerScoreInCollection(
id,
value,
subcollection,
currentCount,
);
}
}
}
// There was no range containing the score.
throw Error(`Range not found for score: ${value}`);
}
const rank = await findPlayerScoreInCollection(playerID, score, scores, 0);
return {
user: playerID,
rank: rank,
score: score,
};
}
अपडेट को एक अतिरिक्त अभ्यास के रूप में छोड़ दिया जाता है। leaderboard.addScore(id, score) और leaderboard.getRank(id) तरीकों से अपने जेएस कंसोल में स्कोर जोड़ने और प्राप्त करने का प्रयास करें और देखें कि फायरबेस कंसोल में आपका लीडरबोर्ड कैसे बदलता है।
हालाँकि, इस कार्यान्वयन के साथ, लघुगणकीय प्रदर्शन प्राप्त करने के लिए हमने जो जटिलता जोड़ी है वह एक कीमत पर आती है।
- सबसे पहले, यह लीडरबोर्ड कार्यान्वयन लॉक विवाद के मुद्दों में चल सकता है, क्योंकि लेन-देन के लिए दस्तावेज़ों को पढ़ने और लिखने को लॉक करने की आवश्यकता होती है ताकि यह सुनिश्चित हो सके कि वे सुसंगत रहें।
- दूसरा, फायरस्टोर 100 की उप-संग्रह गहराई सीमा लगाता है, जिसका अर्थ है कि आपको 100 बंधे स्कोर के बाद उप-वृक्ष बनाने से बचना होगा, जो कि यह कार्यान्वयन नहीं करता है।
- और अंत में, यह लीडरबोर्ड केवल आदर्श स्थिति में लघुगणकीय रूप से स्केल करता है जहां पेड़ संतुलित होता है - यदि यह असंतुलित है, तो इस लीडरबोर्ड का सबसे खराब स्थिति प्रदर्शन एक बार फिर रैखिक है।
एक बार जब आप काम पूरा कर लें, तो फायरबेस कंसोल के माध्यम से scores और players संग्रह को हटा दें और हम अपने अंतिम लीडरबोर्ड कार्यान्वयन पर आगे बढ़ेंगे।
6. एक स्टोकेस्टिक (संभावित) लीडरबोर्ड लागू करें
सम्मिलन कोड चलाते समय, आप देख सकते हैं कि यदि आप इसे समानांतर में कई बार चलाते हैं तो लेनदेन लॉक विवाद से संबंधित त्रुटि संदेश के साथ आपके फ़ंक्शन विफल होने लगेंगे। इसके आसपास ऐसे तरीके हैं जिन्हें हम इस कोडलैब में नहीं तलाशेंगे, लेकिन यदि आपको सटीक रैंकिंग की आवश्यकता नहीं है, तो आप सरल और तेज़ दोनों चीज़ों के लिए पिछले दृष्टिकोण की सभी जटिलताओं को छोड़ सकते हैं। आइए देखें कि हम सटीक रैंकिंग के बजाय अपने खिलाड़ियों के स्कोर के लिए अनुमानित रैंक कैसे लौटा सकते हैं, और यह हमारे डेटाबेस तर्क को कैसे बदलता है।
इस दृष्टिकोण के लिए, हम अपने लीडरबोर्ड को 100 बकेट में विभाजित करेंगे, जिनमें से प्रत्येक हमारे द्वारा प्राप्त होने वाले स्कोर का लगभग एक प्रतिशत दर्शाता है। यह दृष्टिकोण हमारे स्कोर वितरण के ज्ञान के बिना भी काम करता है, ऐसी स्थिति में हमारे पास पूरे बकेट में स्कोर के लगभग समान वितरण की गारंटी देने का कोई तरीका नहीं है, लेकिन अगर हम जानते हैं कि हमारे स्कोर कैसे वितरित किए जाएंगे तो हम अपने अनुमानों में अधिक सटीकता प्राप्त करेंगे। .
हमारा दृष्टिकोण इस प्रकार है: पहले की तरह, प्रत्येक बाल्टी अपने भीतर अंकों की संख्या और अंकों की सीमा को संग्रहीत करती है। नया स्कोर डालते समय, हम स्कोर के लिए बकेट ढूंढेंगे और उसकी गिनती बढ़ाएंगे। रैंक प्राप्त करते समय, हम आगे खोज करने के बजाय केवल उसके आगे की बकेट का योग करेंगे और फिर अपनी बकेट के भीतर उसका अनुमान लगाएंगे। इससे हमें बहुत अच्छा निरंतर समय लुकअप और सम्मिलन मिलता है, और बहुत कम कोड की आवश्यकता होती है।
सबसे पहले, प्रविष्टि:
// Add this line to the top of your file.
const admin = require("firebase-admin");
// Implement this method (again).
async function createScore(playerID, score, firestore) {
const scores = await firestore.collection("scores").get();
if (scores.empty) {
// Create the buckets since they don't exist yet.
// In a real app, don't do this in your write function. Do it once
// manually and then keep the buckets in your database forever.
for (let i = 0; i < 10; i++) {
const min = i * 100;
const max = (i + 1) * 100;
const data = {
range: {
min: min,
max: max,
},
count: 0,
};
await firestore.collection("scores").doc().create(data);
}
throw Error("Database not initialized");
}
const buckets = await firestore.collection("scores")
.where("range.min", "<=", score).get();
for (const bucket of buckets.docs) {
const range = bucket.get("range");
if (score < range.max) {
const writeBatch = firestore.batch();
const playerDoc = firestore.collection("players").doc();
writeBatch.create(playerDoc, {
user: playerID,
score: score,
});
writeBatch.update(
bucket.ref,
{count: admin.firestore.FieldValue.increment(1)},
);
const scoreDoc = bucket.ref.collection("scores").doc();
writeBatch.create(scoreDoc, {
user: playerID,
score: score,
});
return writeBatch.commit();
}
}
}
आप देखेंगे कि इस प्रविष्टि कोड में उत्पादन में ऐसा कुछ न करने की चेतावनी के साथ शीर्ष पर आपके डेटाबेस स्थिति को आरंभ करने के लिए कुछ तर्क हैं। आरंभीकरण के लिए कोड दौड़ की स्थितियों से बिल्कुल भी सुरक्षित नहीं है, इसलिए यदि आप ऐसा करते हैं, तो एकाधिक समवर्ती लेखन आपको डुप्लिकेट बकेट का एक समूह देकर आपके डेटाबेस को दूषित कर देगा।
आगे बढ़ें और अपने कार्यों को तैनात करें और फिर शून्य की गिनती के साथ सभी बकेट को आरंभ करने के लिए एक सम्मिलन चलाएँ। यह एक त्रुटि लौटाएगा, जिसे आप सुरक्षित रूप से अनदेखा कर सकते हैं।
leaderboard.addScore(999, 0); // The params aren't important here.
अब जब डेटाबेस सही ढंग से प्रारंभ हो गया है, तो हम addScores चला सकते हैं और Firebase कंसोल में अपने डेटा की संरचना देख सकते हैं। परिणामी संरचना हमारे पिछले कार्यान्वयन की तुलना में बहुत अधिक सपाट है, हालांकि वे सतही रूप से समान हैं।
leaderboard.addScores();
और, अब, स्कोर पढ़ने के लिए:
async function readRank(playerID, firestore) {
const players = await firestore.collection("players")
.where("user", "==", playerID).get();
if (players.empty) {
throw Error(`Player not found in leaderboard: ${playerID}`);
}
if (players.size > 1) {
console.info(`Multiple scores with player ${playerID}, fetching first`);
}
const player = players.docs[0].data();
const score = player.score;
const scores = await firestore.collection("scores").get();
let currentCount = 1; // Player is rank 1 if there's 0 better players.
let interp = -1;
for (const bucket of scores.docs) {
const range = bucket.get("range");
const count = bucket.get("count");
if (score < range.min) {
currentCount += count;
} else if (score >= range.max) {
// do nothing
} else {
// interpolate where the user is in this bucket based on their score.
const relativePosition = (score - range.min) / (range.max - range.min);
interp = Math.round(count - (count * relativePosition));
}
}
if (interp === -1) {
// Didn't find a correct bucket
throw Error(`Score out of bounds: ${score}`);
}
return {
user: playerID,
rank: currentCount + interp,
score: score,
};
}
चूंकि हमने addScores फ़ंक्शन को स्कोर का एक समान वितरण उत्पन्न किया है और हम बकेट के भीतर रैखिक इंटरपोलेशन का उपयोग कर रहे हैं, हमें बहुत सटीक परिणाम मिलेंगे, हमारे लीडरबोर्ड का प्रदर्शन कम नहीं होगा क्योंकि हम उपयोगकर्ताओं की संख्या बढ़ाते हैं, और हमें गिनती अपडेट करते समय लॉक विवाद (जितना अधिक) के बारे में चिंता करने की ज़रूरत नहीं है।
7. परिशिष्ट: धोखा
रुकिए, आप सोच रहे होंगे, अगर मैं ब्राउज़र टैब के जेएस कंसोल के माध्यम से अपने कोडलैब में मान लिख रहा हूं, तो क्या मेरा कोई भी खिलाड़ी लीडरबोर्ड पर झूठ नहीं बोल सकता है और कह सकता है कि उन्हें उच्च स्कोर मिला है जो उन्हें नहीं मिला निष्पक्षता से हासिल करें?
हाँ वे कर सकते हैं। यदि आप धोखाधड़ी को रोकना चाहते हैं, तो ऐसा करने का सबसे मजबूत तरीका सुरक्षा नियमों के माध्यम से अपने डेटाबेस में क्लाइंट राइट्स को अक्षम करना है, अपने क्लाउड फ़ंक्शंस तक सुरक्षित पहुंच सुनिश्चित करना है ताकि क्लाइंट उन्हें सीधे कॉल न कर सकें, और फिर अपने सर्वर पर इन-गेम क्रियाओं को मान्य करें। लीडरबोर्ड पर स्कोर अपडेट भेजना।
यह ध्यान रखना महत्वपूर्ण है कि यह रणनीति धोखाधड़ी के खिलाफ रामबाण नहीं है - पर्याप्त प्रोत्साहन के साथ, धोखेबाज सर्वर-साइड सत्यापन से बचने के तरीके ढूंढ सकते हैं, और कई बड़े, सफल वीडियो गेम लगातार अपने धोखेबाजों की पहचान करने के लिए उनके साथ चूहे-बिल्ली का खेल खेल रहे हैं। नए धोखेबाज़ों और उन्हें फैलने से रोकें। इस घटना का एक कठिन परिणाम यह है कि प्रत्येक गेम के लिए सर्वर-साइड सत्यापन स्वाभाविक रूप से पहले से निर्धारित होता है; हालाँकि फायरबेस ऐप चेक जैसे दुरुपयोग-रोधी उपकरण प्रदान करता है जो उपयोगकर्ता को एक साधारण स्क्रिप्टेड क्लाइंट के माध्यम से आपके गेम को कॉपी करने से रोकेगा, फायरबेस ऐसी कोई भी सेवा प्रदान नहीं करता है जो समग्र एंटी-चीट के बराबर हो।
एक लोकप्रिय पर्याप्त गेम या धोखाधड़ी के लिए पर्याप्त कम बाधा के लिए सर्वर-साइड सत्यापन में कुछ भी कमी, एक लीडरबोर्ड में परिणत होगी जहां शीर्ष मान सभी धोखेबाज़ होंगे।
8. बधाई हो
बधाई हो, आपने फायरबेस पर सफलतापूर्वक चार अलग-अलग लीडरबोर्ड बनाए हैं! आपके गेम की सटीकता और गति की ज़रूरतों के आधार पर, आप उचित कीमत पर आपके लिए काम करने वाले को चुन सकेंगे।
आगे, खेलों के लिए सीखने के रास्ते देखें।