🤹 🕹️ 🙍🏼 Node.js पर एक वास्तविक समय के खेल एप्लिकेशन बनाने का एक उदाहरण 🕵🏿 🤶🏾 ⏩

इस लेख में मैं दिखाऊंगा कि कैसे Node.js का उपयोग करके एक वेब एप्लिकेशन बनाया जाए, जो आपको वास्तविक समय में NHL मैचों के परिणामों को ट्रैक करने की अनुमति देता है। खेलों के दौरान स्कोर में बदलाव के अनुसार संकेतक अपडेट किए जाते हैं।

मुझे वास्तव में इस लेख को लिखने में बहुत मज़ा आया, क्योंकि इस पर काम करने में मुझे दो चीजें पसंद थीं: सॉफ्टवेयर विकास और खेल।

काम के दौरान, हम निम्नलिखित उपकरणों का उपयोग करेंगे:

Node.js;
Socket.io;
MySportsFeed.com।

यदि आपके पास Node.js स्थापित नहीं है, तो डाउनलोड पृष्ठ पर जाएं और इंस्टॉल करें, और फिर हम जारी रखेंगे।

सॉकेट क्या है?

यह वह तकनीक है जो क्लाइंट को सर्वर से जोड़ती है। वर्तमान उदाहरण में, क्लाइंट एक वेब ब्राउज़र है, और सर्वर Node.js. सर्वर किसी भी समय कई क्लाइंट्स के साथ एक साथ काम कर सकता है।

एक बार कनेक्शन स्थापित होने के बाद, सर्वर सभी क्लाइंट या उनमें से सिर्फ एक को संदेश भेज सकता है। बदले में, सर्वर को संदेश भेज सकते हैं, दो दिशाओं में संचार प्रदान करते हैं।

सॉकेट.आईओ से पहले, वेब एप्लिकेशन आम तौर पर AJAX पर चलते थे। इसका उपयोग क्लाइंट को नई घटनाओं की तलाश में सर्वर को प्रदूषित करने और इसके विपरीत करने की आवश्यकता के लिए प्रदान किया गया है। उदाहरण के लिए, नए संदेशों की जांच के लिए हर 10 सेकंड में इस तरह के मतदान किए जा सकते हैं।

इसने एक अतिरिक्त बोझ दिया, क्योंकि नए संदेशों की खोज तब भी की जाती थी, जब वे बिल्कुल भी नहीं थे।

सॉकेट.आईओ का उपयोग करते समय, संदेशों को उनकी उपस्थिति की लगातार जांच करने की आवश्यकता के बिना वास्तविक समय में प्राप्त किया जाता है, जिससे लोड कम हो जाता है।

सॉकेट.आईओ नमूना आवेदन

इससे पहले कि हम रीयल-टाइम प्रतियोगिता डेटा एकत्र करना शुरू करें, चलो एक उदाहरण एप्लिकेशन बनाते हैं ताकि यह प्रदर्शित हो सके कि सॉकेट.आईओ कैसे काम करता है।

सबसे पहले, मैं एक Node.js. एप्लिकेशन बनाने जा रहा हूं। कंसोल विंडो में, आपको C: \ GitHub \ NodeJS निर्देशिका में जाने की आवश्यकता है, एप्लिकेशन के लिए एक नया फ़ोल्डर बनाएं और इसमें एक नया एप्लिकेशन:

cd \GitHub\NodeJS mkdir SocketExample cd SocketExample npm init

मैंने डिफ़ॉल्ट सेटिंग्स को छोड़ दिया, आप भी ऐसा कर सकते हैं।

चूंकि हम एक वेब एप्लिकेशन का निर्माण कर रहे हैं, मैं स्थापना को आसान बनाने के लिए एक्सप्रेस नामक एनपीएम पैकेज का उपयोग करूंगा। कमांड प्रॉम्प्ट पर, निम्न आदेश चलाएँ: npm स्थापित एक्सप्रेस --save।

बेशक, हमें Socket.io पैकेज भी स्थापित करना होगा: npm स्थापित socket.io --save

अब आपको वेब सर्वर शुरू करने की आवश्यकता है। ऐसा करने के लिए, एक नया index.js फ़ाइल बनाएं और निम्नलिखित कोड अनुभाग रखें:

 var app = require('express')(); var http = require('http').Server(app); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); http.listen(3000, function(){ console.log('HTTP server started on port 3000'); });

यदि एक्सप्रेस आपसे परिचित नहीं है, तो ऊपर दिए गए कोड उदाहरण में एक्सप्रेस लाइब्रेरी शामिल है, यहां हम एक नया HTTP सर्वर बना रहे हैं। उदाहरण में, HTTP सर्वर पोर्ट 3000 पर सुनता है, अर्थात। लोकलहोस्ट : 3000। रास्ता रूट पर जाता है, "/"। परिणाम एक HTML index.html फ़ाइल के रूप में दिया जाता है।

इस फ़ाइल को बनाने से पहले, हम Socket.io को कॉन्फ़िगर करके सर्वर स्टार्टअप को समाप्त करते हैं। सॉकेट सर्वर बनाने के लिए, निम्न कमांड चलाएँ:

 var io = require('socket.io')(http); io.on('connection', function(socket){ console.log('Client connection received'); });

एक्सप्रेस के रूप में, कोड सॉकेट.आईओ लाइब्रेरी को आयात करके शुरू होता है। यह io चर द्वारा इंगित किया गया है। अगला, इस चर का उपयोग करते हुए, फ़ंक्शन के साथ एक इवेंट हैंडलर बनाएं। जब भी कोई क्लाइंट सर्वर से कनेक्ट होता है, तो यह घटना निकाल दी जाती है।

अब एक साधारण ग्राहक बनाते हैं। ऐसा करने के लिए, index.html फ़ाइल बनाएं और निम्नलिखित कोड को अंदर रखें:

 <!doctype html> <html> <head> <title>Socket.IO Example</title> </head> <body> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); </script> </body> </html>

ऊपर का HTML Socket.io JavaScript क्लाइंट को लोड करता है और सर्वर से कनेक्शन को इनिशियलाइज़ करता है। एक उदाहरण देखने के लिए, नोड: नोड index.js चलाएं।

इसके बाद, ब्राउज़र में, लोकलहोस्ट दर्ज करें: 3000। पृष्ठ रिक्त रहेगा, लेकिन यदि आप सांत्वना को देखते हैं कि नोड चल रहा है, तो आपको दो संदेश दिखाई देंगे:

HTTP सर्वर पोर्ट 3000 पर शुरू हुआ
क्लाइंट कनेक्शन प्राप्त हुआ

अब जब हम सफलतापूर्वक जुड़ गए हैं, तो काम जारी रखें। उदाहरण के लिए, सर्वर से क्लाइंट को एक संदेश भेजें। फिर, जब ग्राहक इसे प्राप्त करता है, तो एक प्रतिक्रिया संदेश भेजा जाएगा:

 io.on('connection', function(socket){ console.log('Client connection received'); socket.emit('sendToClient', { hello: 'world' }); socket.on('receivedFromClient', function (data) { console.log(data); }); });

पिछले io.on फ़ंक्शन को कोड की कई नई पंक्तियों को शामिल करने के लिए अपडेट किया गया है। पहला, socket.emit, क्लाइंट को एक संदेश भेजता है। sendToClient इवेंट का नाम है। घटनाओं के नामकरण से, आपको विभिन्न प्रकार के संदेश भेजने की क्षमता मिलती है, जिससे ग्राहक उन्हें अलग तरह से व्याख्या करने में सक्षम होगा। एक अन्य अपडेट सॉकेट.ऑन है, जिसमें एक इवेंट का नाम भी है: ReceFromClient। यह सब एक फ़ंक्शन बनाता है जो क्लाइंट से डेटा प्राप्त करता है। इस मामले में, वे कंसोल विंडो में भी दर्ज किए जाते हैं।

पूर्ण किए गए चरण सर्वर की तैयारी को पूरा करते हैं। अब यह किसी भी जुड़े क्लाइंट से डेटा प्राप्त और भेज सकता है।

चलिए इस उदाहरण को SendToClient ईवेंट प्राप्त करके क्लाइंट को अपडेट करके समाप्त करते हैं। जब कोई घटना प्राप्त होती है, तो एक प्रतिक्रिया प्राप्त की जाती है।

यह HTML के जावास्क्रिप्ट भाग का समापन करता है। Index.html में जोड़ें:

 var socket = io(); socket.on('sendToClient', function (data) { console.log(data); socket.emit('receivedFromClient', { my: 'data' }); });

अंतर्निहित सॉकेट चर का उपयोग करते हुए, हमें सॉकेट के साथ सर्वर पर समान तर्क मिलता है। फ़ंक्शन। क्लाइंट SendToClient इवेंट के लिए सुनता है। जैसे ही क्लाइंट जुड़ा होता है, सर्वर यह संदेश भेजता है। क्लाइंट, इसे प्राप्त करने, ब्राउज़र कंसोल में घटना को रिकॉर्ड करता है। उसके बाद, क्लाइंट उसी सॉकेट का उपयोग करता है। मूल इवेंट भेजने के लिए उपयोग किए जाने वाले सर्वर के रूप में। इस स्थिति में, क्लाइंट सर्वर से प्राप्त FromClient ईवेंट भेजता है। जब वह एक संदेश प्राप्त करता है, तो यह कंसोल विंडो में लॉग इन होता है।

इसे स्वयं आज़माएं। सबसे पहले, कंसोल में, अपना नोड एप्लिकेशन लॉन्च करें: नोड index.js। फिर लोकलहोस्ट को ब्राउजर में 3000: लोड करें।

अपने ब्राउज़र कंसोल की जाँच करें और आप JSON लॉग में निम्नलिखित देखेंगे: {hello: "world"}

फिर, जब नोड एप्लिकेशन चल रहा है, तो आप निम्नलिखित देखेंगे:

HTTP सर्वर पोर्ट 3000 पर शुरू हुआ
क्लाइंट कनेक्शन प्राप्त हुआ
{my: 'डेटा'}

क्लाइंट और सर्वर दोनों विशिष्ट कार्य करने के लिए JSON डेटा का उपयोग कर सकते हैं। आइए देखें कि आप वास्तविक समय में प्रतिस्पर्धा डेटा के साथ कैसे काम कर सकते हैं।

प्रतियोगिता की जानकारी

जब हम क्लाइंट और सर्वर द्वारा डेटा भेजने और प्राप्त करने के सिद्धांतों को समझते हैं, तो यह सुनिश्चित करने के लिए लायक है कि अपडेट वास्तविक समय में किए जाते हैं। मैंने प्रतियोगिता के आंकड़ों का उपयोग किया, हालाँकि ऐसा न केवल खेल की जानकारी के साथ किया जा सकता है। लेकिन जब से हम इसके साथ काम कर रहे हैं, हमें स्रोत खोजने की जरूरत है। वे MySportsFeeds की सेवा लेंगे । सेवा का भुगतान किया जाता है - $ 1 प्रति माह से, ध्यान रखें।

एक बार आपका खाता सेट हो जाने के बाद, आप उनके एपीआई के साथ शुरुआत कर सकते हैं। आप इसके लिए NPM पैकेज का उपयोग कर सकते हैं: npm mysportsfeeds-node --save स्थापित करें।

पैकेज को स्थापित करने के बाद, हम एपीआई को कनेक्ट करते हैं:

 var MySportsFeeds = require("mysportsfeeds-node"); var msf = new MySportsFeeds("1.2", true); msf.authenticate("********", "*********"); var today = new Date(); msf.getData('nhl', '2017-2018-regular', 'scoreboard', 'json', { fordate: today.getFullYear() + ('0' + parseInt(today.getMonth() + 1)).slice(-2) + ('0' + today.getDate()).slice(-2), force: true });

ऊपर दिए गए उदाहरण में, मेरे डेटा को अपने साथ बदलें।

कोड आज के NHL प्रतियोगिता परिणाम प्राप्त करने के लिए एक एपीआई कॉल करता है। पूर्वाभास चर वह है जो तिथि को परिभाषित करता है। मैंने डेटा वापस पाने के लिए भी बल और सच्चे का उपयोग किया, भले ही परिणाम समान हों।

वर्तमान सेटअप के साथ, एपीआई कॉल के परिणाम एक पाठ फ़ाइल में लिखे जाते हैं। पिछले उदाहरण में, हम इसे बदल देंगे; प्रदर्शन उद्देश्यों के लिए, उत्तर की सामग्री को समझने के लिए परिणाम फ़ाइल को एक पाठ संपादक में देखा जा सकता है। हमारे परिणाम में, हम परिणाम तालिका ऑब्जेक्ट देखते हैं। इस ऑब्जेक्ट में gameScore नामक एक सरणी है। यह प्रत्येक खेल के परिणाम को बचाता है। बदले में प्रत्येक ऑब्जेक्ट में एक बच्चा ऑब्जेक्ट होता है जिसे गेम कहा जाता है। यह ऑब्जेक्ट कौन खेल रहा है के बारे में जानकारी प्रदान करता है।

गेम ऑब्जेक्ट के बाहर, कई चर हैं जो गेम की वर्तमान स्थिति प्रदर्शित करते हैं। इसके परिणामों के आधार पर डेटा में परिवर्तन होता है। जब खेल अभी तक शुरू नहीं हुआ है, तो चर का उपयोग किया जाता है जो यह होने पर जानकारी प्रदान करते हैं। जब खेल शुरू हो गया है, तो परिणामों पर अतिरिक्त डेटा प्रदान किया जाता है, जिसमें जानकारी है कि अब क्या अवधि है और कितना समय बचा है। दांव पर क्या है यह बेहतर ढंग से समझने के लिए, आइए अगले अनुभाग पर जाएं।

वास्तविक समय अद्यतन

हमारे पास पहेली के सभी टुकड़े हैं, तो चलिए इसे इकट्ठा करते हैं! दुर्भाग्य से, डेटा जारी करने के लिए MySportsFeeds के पास सीमित समर्थन है, इसलिए आपको लगातार जानकारी का अनुरोध करना होगा। यहां एक सकारात्मक बिंदु है: हम जानते हैं कि डेटा हर 10 मिनट में केवल एक बार बदलता है, इसलिए सेवा को बहुत बार पूछताछ करना आवश्यक नहीं है। प्राप्त डेटा सर्वर से सभी जुड़े हुए क्लाइंट को भेजा जा सकता है।

आवश्यक डेटा प्राप्त करने के लिए, मैं setInterval जावास्क्रिप्ट फ़ंक्शन का उपयोग करूंगा, जो आपको अपडेट खोजने के लिए हर 10 मिनट में एपीआई (मेरे मामले में) तक पहुंचने की अनुमति देता है। जब डेटा आता है, तो ईवेंट सभी कनेक्टेड क्लाइंट्स को भेज दिया जाता है। फिर परिणाम एक वेब ब्राउज़र में जावास्क्रिप्ट के माध्यम से अपडेट किए जाते हैं।

जब पहली बार नोड एप्लिकेशन लॉन्च किया जाता है तो MySportsFeeds भी कहा जाता है। परिणामों का उपयोग किसी भी क्लाइंट के लिए किया जाएगा जो पहले 10 मिनट के अंतराल से पहले जुड़ता है। इस बारे में जानकारी एक वैश्विक चर में संग्रहीत की जाती है। यह, बदले में, एक अंतराल सर्वेक्षण के भाग के रूप में अद्यतन किया जाता है। यह सुनिश्चित करता है कि प्रत्येक क्लाइंट के पास प्रासंगिक परिणाम होंगे।

मुख्य index.js फ़ाइल में सब कुछ ठीक होने के लिए, मैंने data.js. नामक एक नई फ़ाइल बनाई। इसमें index.js से निर्यात किया गया एक फ़ंक्शन होता है जो MySportsFeeds API के लिए पिछली कॉल करता है। यहाँ इस फ़ाइल की पूरी सामग्री है:

 var MySportsFeeds = require("mysportsfeeds-node"); var msf = new MySportsFeeds("1.2", true, null); msf.authenticate("*******", "******"); var today = new Date(); exports.getData = function() { return msf.getData('nhl', '2017-2018-regular', 'scoreboard', 'json', { fordate: today.getFullYear() + ('0' + parseInt(today.getMonth() + 1)).slice(-2) + ('0' + today.getDate()).slice(-2), force: true }); };

GetData फ़ंक्शन निर्यात किया जाता है और कॉल के परिणाम लौटाता है। आइए देखें कि हमारे पास index.js फ़ाइल में क्या है।

 var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var data = require('./data.js'); // Global variable to store the latest NHL results var latestData; // Load the NHL data for when client's first connect // This will be updated every 10 minutes data.getData().then((result) => { latestData = result; }); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); http.listen(3000, function(){ console.log('HTTP server started on port 3000'); }); io.on('connection', function(socket){ // when clients connect, send the latest data socket.emit('data', latestData); }); // refresh data setInterval(function() { data.getData().then((result) => { // Update latest results for when new client's connect latestData = result; // send it to all connected clients io.emit('data', result); console.log('Last updated: ' + new Date()); }); }, 300000);

कोड की पहली सात पंक्तियाँ आवश्यक पुस्तकालयों को आरंभीकृत करती हैं और नवीनतमडाटा को वैश्विक चर कहती हैं। उपयोग की जाने वाली पुस्तकालयों की नवीनतम सूची है: एक्सप्रेस, एचटीपी सर्वर, जो एक्सप्रेस, सॉकेट का उपयोग करके बनाया गया है। इसके अलावा डेटा.जेएस फ़ाइल भी बनाई गई है।

जरूरतों को ध्यान में रखते हुए, एप्लिकेशन उन ग्राहकों के लिए नवीनतम डेटा (लेटेस्ट डेटा) में भरता है जो सर्वर के शुरू होने पर कनेक्ट होते हैं:

 // Global variable to store the latest NHL results var latestData; // Load the NHL data for when client's first connect // This will be updated every 10 minutes data.getData().then((result) => { latestData = result; });

अगली कुछ पंक्तियाँ साइट के मुख्य पृष्ठ के लिए पथ निर्धारित करती हैं (हमारे मामले में लोकलहोस्ट : 3000 /) और HTTP सर्वर को पोर्ट 3000 पर सुनने का निर्देश देती हैं।

Socket.io को फिर नए कनेक्शन की खोज के लिए कॉन्फ़िगर किया गया है। जब उनका पता लगाया जाता है, तो सर्वर नवीनतम डेटा की सामग्री के साथ ईवेंट डेटा भेजता है।

और अंत में, कोड का अंतिम टुकड़ा आवश्यक मतदान अंतराल बनाता है। जब इसका पता लगाया जाता है, तो नवीनतमडाटा चर एपीआई कॉल के परिणामों के साथ अपडेट किया जाता है। यह डेटा तब सभी क्लाइंट के लिए समान ईवेंट पास करता है।

 // refresh data setInterval(function() { data.getData().then((result) => { // Update latest results for when new client's connect latestData = result; // send it to all connected clients io.emit('data', result); console.log('Last updated: ' + new Date()); }); }, 300000);

जैसा कि हम देखते हैं, जब एक ग्राहक कनेक्ट होता है और एक घटना परिभाषित होती है, तो इसे सॉकेट चर के साथ जारी किया जाता है। यह आपको किसी विशिष्ट कनेक्टेड क्लाइंट को एक ईवेंट भेजने की अनुमति देता है। अंतराल के अंदर, वैश्विक io का उपयोग घटना को भेजने के लिए किया जाता है। यह सभी क्लाइंट को डेटा भेजता है। सर्वर सेटअप पूर्ण है।

कैसा लगेगा

अब क्लाइंट के फ्रंट पर काम करते हैं। एक प्रारंभिक उदाहरण में, मैंने आधार index.html फ़ाइल बनाई, जो सर्वर घटनाओं को रिकॉर्ड करने और उन्हें भेजने के लिए क्लाइंट के साथ एक कनेक्शन स्थापित करती है। अब मैं फ़ाइल की क्षमताओं का विस्तार करूंगा।

चूंकि सर्वर हमें JSON ऑब्जेक्ट भेजता है, मैं jQuery और JRRender नामक jQuery एक्सटेंशन का उपयोग करूंगा। यह एक टेम्पलेट लाइब्रेरी है। यह मुझे एक HTML टेम्पलेट बनाने की अनुमति देगा जिसका उपयोग सुविधाजनक तरीके से प्रत्येक एनएचएल गेम की सामग्री को प्रदर्शित करने के लिए किया जाएगा। अब आप इसकी क्षमताओं की चौड़ाई देख सकते हैं। कोड में 40 से अधिक लाइनें हैं, इसलिए मैं इसे कई छोटे वर्गों में विभाजित करूंगा, और अंत में मैं सभी HTML सामग्री दिखाऊंगा।

यहाँ खेल डेटा प्रदर्शित करने के लिए प्रयोग किया जाता है:

 <script id="gameTemplate" type="text/x-jsrender"> <div class="game"> <div> {{:game.awayTeam.City}} {{:game.awayTeam.Name}} at {{:game.homeTeam.City}} {{:game.homeTeam.Name}} </div> <div> {{if isUnplayed == "true" }} Game starts at {{:game.time}} {{else isCompleted == "false"}} <div>Current Score: {{:awayScore}} - {{:homeScore}}</div> <div> {{if currentIntermission}} {{:~ordinal_suffix_of(currentIntermission)}} Intermission {{else currentPeriod}} {{:~ordinal_suffix_of(currentPeriod)}}<br/> {{:~time_left(currentPeriodSecondsRemaining)}} {{else}} 1st {{/if}} </div> {{else}} Final Score: {{:awayScore}} - {{:homeScore}} {{/if}} </div> </div> </script>

टेम्पलेट को स्क्रिप्ट टैग का उपयोग करके परिभाषित किया गया है। इसमें एक टेम्प्लेट पहचानकर्ता और एक विशेष स्क्रिप्ट प्रकार होता है जिसे टेक्स्ट / x-jsrender कहा जाता है। टेम्पलेट प्रत्येक गेम के लिए एक डिव कंटेनर को परिभाषित करता है जिसमें एक विशिष्ट आधार शैली को लागू करने के लिए एक गेम क्लास होता है। इस div के अंदर टेम्पलेट की शुरुआत है।

अगली div अतिथि टीम और मेजबान टीम को प्रदर्शित करती है। यह MySportsFeeds डेटा से गेम ऑब्जेक्ट के साथ शहर के नाम और टीम के नाम को मिलाकर लागू किया गया है।

{{: game.awayTeam.City}} यह है कि कैसे मैं एक वस्तु को परिभाषित करता हूं जिसे टेम्पलेट को प्रस्तुत करते समय एक भौतिक मूल्य द्वारा प्रतिस्थापित किया जाएगा। यह सिंटैक्स JsRender लाइब्रेरी द्वारा परिभाषित किया गया है।

जब खेल अप्रकाशित होता है, तो एक रेखा दिखाई देती है जिसमें खेल {{: game.time}} से शुरू होता है।

खेल पूरा होने तक, वर्तमान स्कोर प्रदर्शित किया जाता है: {{: awayScore}} - {{: homeScore}}। और, अंत में, एक छोटी सी चाल जो यह निर्धारित करेगी कि अब क्या अवधि है, और यह स्पष्ट करने के लिए कि क्या अब विराम है।

यदि परिणाम में currentIntermission चर दिखाई देता है, तो मैं I फ़ंक्शन का उपयोग करता हूं, जो ordinal_suffix_of द्वारा परिभाषित किया गया है, जो अवधि संख्या को निम्न पाठ में परिवर्तित करता है: 1 (2, 3, आदि) ब्रेक।

जब कोई ब्रेक नहीं होता है, तो मैं करंटपिरियोड के मूल्य की तलाश करता हूं। ऑर्डिनल_सुफीक्स_ऑफ का उपयोग यहां यह दिखाने के लिए भी किया जाता है कि खेल 1 (2, 3, आदि) अवधि में है।

इसके अलावा, एक अन्य फ़ंक्शन जिसे मैंने time_left के रूप में परिभाषित किया है, का उपयोग अवधि के अंत तक शेष सेकंड की संख्या में परिवर्तित करने के लिए किया जाता है। उदाहरण के लिए: 10:12।

कोड का अंतिम भाग खेल पूरा होने पर अंतिम परिणाम प्रदर्शित करता है।

यहाँ एक उदाहरण है कि यह कैसे दिखता है जब पूर्ण गेमों की एक मिश्रित सूची होती है, ऐसे गेम जो अभी समाप्त नहीं हुए हैं, और ऐसे गेम जो अभी शुरू नहीं हुए हैं (मैं बहुत अच्छा डिज़ाइनर नहीं हूं, इसलिए परिणाम ऐसा दिखता है जब डेवलपर एक कस्टम बनाता है यह अपने आप आवेदन इंटरफ़ेस):

अगला एक जावास्क्रिप्ट स्निपेट है जो एक सॉकेट, हेल्पर फ़ंक्शन ordinal_suffix_of और time_left बनाता है, और एक चर जो उत्पन्न jQuery टेम्पलेट को संदर्भित करता है।

 <script> var socket = io(); var tmpl = $.templates("#gameTemplate"); var helpers = { ordinal_suffix_of: function(i) { var j = i % 10, k = i % 100; if (j == 1 && k != 11) { return i + "st"; } if (j == 2 && k != 12) { return i + "nd"; } if (j == 3 && k != 13) { return i + "rd"; } return i + "th"; }, time_left: function(time) { var minutes = Math.floor(time / 60); var seconds = time - minutes * 60; return minutes + ':' + ('0' + seconds).slice(-2); } }; </script>

अंतिम टुकड़ा सॉकेट ईवेंट प्राप्त करने और टेम्पलेट को प्रस्तुत करने के लिए कोड है:

 socket.on('data', function (data) { console.log(data); $('#data').html(tmpl.render(data.scoreboard.gameScore, helpers)); });

मेरे पास डेटा आईडी वाला एक सीमांकक है। टेम्पलेट रेंडर (tmpl.render) का परिणाम HTML को इस कंटेनर में लिखता है। जो वास्तव में अच्छा है - JsRender पुस्तकालय डेटा का एक सरणी ले सकता है, इस मामले में data.scoreboard.gameScore, जो सरणी में प्रत्येक तत्व के माध्यम से पुनरावृत्ति करता है और प्रति तत्व एक गेम बनाता है।

यहां ऊपर दिया गया अंतिम संस्करण दिया गया है, जहां HTML और जावास्क्रिप्ट एक साथ रखे गए हैं:

 <!doctype html> <html> <head> <title>Socket.IO Example</title> </head> <body> <div id="data"> </div> <script id="gameTemplate" type="text/x-jsrender"> <div class="game"> <div> {{:game.awayTeam.City}} {{:game.awayTeam.Name}} at {{:game.homeTeam.City}} {{:game.homeTeam.Name}} </div> <div> {{if isUnplayed == "true" }} Game starts at {{:game.time}} {{else isCompleted == "false"}} <div>Current Score: {{:awayScore}} - {{:homeScore}}</div> <div> {{if currentIntermission}} {{:~ordinal_suffix_of(currentIntermission)}} Intermission {{else currentPeriod}} {{:~ordinal_suffix_of(currentPeriod)}}<br/> {{:~time_left(currentPeriodSecondsRemaining)}} {{else}} 1st {{/if}} </div> {{else}} Final Score: {{:awayScore}} - {{:homeScore}} {{/if}} </div> </div> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.90/jsrender.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); var helpers = { ordinal_suffix_of: function(i) { var j = i % 10, k = i % 100; if (j == 1 && k != 11) { return i + "st"; } if (j == 2 && k != 12) { return i + "nd"; } if (j == 3 && k != 13) { return i + "rd"; } return i + "th"; }, time_left: function(time) { var minutes = Math.floor(time / 60); var seconds = time - minutes * 60; return minutes + ':' + ('0' + seconds).slice(-2); } }; var tmpl = $.templates("#gameTemplate"); socket.on('data', function (data) { console.log(data); $('#data').html(tmpl.render(data.scoreboard.gameScore, helpers)); }); </script> <style> .game { border: 1px solid #000; float: left; margin: 1%; padding: 1em; width: 25%; } </style> </body> </html>

अब नोड एप्लिकेशन लॉन्च करने और स्थानीयहोस्ट खोलने का समय है: परिणाम देखने के लिए 3000!

प्रत्येक X मिनट, सर्वर क्लाइंट को एक ईवेंट भेजता है। क्लाइंट, बदले में, अपडेट किए गए डेटा के साथ गेम तत्वों को फिर से तैयार करेगा। इसलिए, जब आप साइट को खुला छोड़ देते हैं, तो गेम के परिणाम लगातार अपडेट होते रहेंगे।

निष्कर्ष

अंतिम उत्पाद एक सॉकेट बनाने के लिए सॉकेट का उपयोग करता है जिससे क्लाइंट कनेक्ट होते हैं। सर्वर डेटा को पुनः प्राप्त करता है और क्लाइंट को भेजता है। जब कोई ग्राहक डेटा प्राप्त करता है, तो वह धीरे-धीरे परिणामों को अपडेट कर सकता है। यह सर्वर पर लोड को कम करता है क्योंकि क्लाइंट केवल तभी कार्य करता है जब वह सर्वर से कोई घटना प्राप्त करता है।

सर्वर क्लाइंट और क्लाइंट को संदेश भेज सकता है, बदले में, सर्वर को। जब सर्वर संदेश प्राप्त करता है, तो यह डेटा प्रोसेसिंग करता है।

चैट एप्लिकेशन उसी तरह से काम करते हैं। सर्वर को क्लाइंट से एक संदेश प्राप्त होगा, और फिर कनेक्ट किए गए क्लाइंट को सभी डेटा संचारित करने के लिए संकेत देगा कि किसी ने एक नया संदेश भेजा है।

मुझे आशा है कि आपने इस लेख का आनंद लिया है, क्योंकि जब मैंने इस वास्तविक समय के खेल एप्लिकेशन को विकसित किया, तो मुझे सिर्फ खुशी का पहाड़ मिला जिसे मैं अपने ज्ञान के साथ साझा करना चाहता था। आखिरकार, हॉकी मेरे पसंदीदा खेलों में से एक है!