वेब सॉकेट: मुकाबला उपयोग

वेब सॉकेट टीसीपी कनेक्शन पर एक सर्वर के साथ पूर्ण-द्वैध (दो-तरफा) संचार के लिए एक प्रगतिशील मानक है, जो HTTP के साथ संगत है। यह आपको वास्तविक समय में ब्राउज़र और वेब सर्वर के बीच लाइव मैसेजिंग को व्यवस्थित करने की अनुमति देता है, और सामान्य योजना की तुलना में पूरी तरह से अलग तरह से "अनुरोध URL - प्रतिक्रिया।" जब दो साल पहले मैंने इस मानक को करीब से देखा था, तब भी यह अपनी प्रारंभिक अवस्था में था। कुछ ब्राउज़रों और वेब सर्वरों के लिए केवल एक अप्रयुक्त मसौदा स्केच और प्रयोगात्मक समर्थन था, और फ़ायरफ़ॉक्स में सुरक्षा समस्याओं के कारण इसे डिफ़ॉल्ट रूप से बंद कर दिया गया था। हालांकि, अब स्थिति बदल गई है। मानक ने कई संशोधनों का अधिग्रहण किया (जिनमें पिछड़ी संगतता के बिना शामिल हैं), आरएफसी स्थिति ( 6455 ) प्राप्त की और बचपन की बीमारियों से छुटकारा पाया। IE10 सहित सभी आधुनिक ब्राउज़रों में, प्रोटोकॉल संस्करणों में से एक के लिए समर्थन घोषित किया गया है, और ऐसे वेब सर्वर हैं जो औद्योगिक उपयोग के लिए काफी तैयार हैं।

मैंने तय किया कि इसे लाइव प्रोजेक्ट पर आजमाने का समय आ गया है। और अब मैं इसे साझा कर रहा हूं जो इसके बारे में आया था।

कार्य का सार

मेरी व्यक्तिगत छोटी साइट Klavogonki.ru पर एक केंद्रीय भाग है - वर्तमान खेल-दौड़ की एक सूची जो वर्तमान में सक्रिय है। सूची अत्यंत गतिशील है: खिलाड़ी हर कुछ सेकंड में कभी-कभी कई बार एक नई दौड़ बनाते हैं। आगमन एक उलटी गिनती के साथ शुरू होता है, पूरा होने पर, वे खुले खेल अनुभाग से सक्रिय अनुभाग में चले जाते हैं। सभी खिलाड़ियों के बाहर निकलने के बाद, पृष्ठ से दौड़ हटा दी जाती है। एक से, और कभी-कभी एक सौ खिलाड़ियों तक, यह एक दौड़ लेता है, जिसे वहीं प्रदर्शित करना होता है।

यह पहले कैसे काम करता था

प्रारंभ में, जब साइट की कार्यक्षमता के इस हिस्से को बनाना आवश्यक हो गया, तो सूची के गतिशील अद्यतन के साथ बहुत सी कठिनाइयाँ उत्पन्न हुईं। सूची पृष्ठ में एक बार में दर्जनों लोग शामिल हो सकते हैं, जिनमें से प्रत्येक एक ताज़ा तस्वीर देखना चाहता है। कई दौड़ में केवल 10-20 सेकंड में शुरू करने के लिए निर्माण से उलटी गिनती का समय समाप्त हो सकता है, और उन्हें शामिल होने के लिए समय देने के लिए, अपडेट काफी जीवंत होना चाहिए।

टाइमआउट द्वारा पूरे पृष्ठ को अपडेट करना यहाँ बिल्कुल भी फिट नहीं था, और अन्य विकल्पों की तलाश करना आवश्यक था (यहां हमें एक नोट करना था कि मैं उस साइट पर फ्लैश का उपयोग करने के लिए बहुत मजबूत आवश्यकता के बिना नहीं चाहता था)।

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

कई उपयोगकर्ताओं के लिए प्रॉक्सी सर्वर की समस्याओं के कारण HTTP स्ट्रीमिंग का उपयोग नहीं किया जा सका।

इसलिए, मैं ajax अनुरोधों के माध्यम से हर 3 सेकंड में टाइमआउट करके एक पृष्ठ की सामग्री को अपडेट करने के एक सरल संस्करण पर बस गया। सर्वर पर, वर्तमान डेटा को कैश किया गया था और कैश में ग्राहकों से जौन में भेजा गया था, जबकि ट्रैफिक को बचाने के लिए, हर बार पूरी सूची नहीं दी गई थी, लेकिन केवल संस्करण प्रणाली के माध्यम से परिवर्तित डेटा (अनुरोध किए गए संस्करण की तुलना में संस्करण में वृद्धि हुई है - हम आगमन के बारे में नई जानकारी देते हैं, अन्यथा हम केवल वर्तमान देते हैं। संस्करण संख्या)।

प्रणाली ने अच्छा प्रदर्शन किया और लंबे समय तक काम किया। हालांकि, एक बड़ा माइनस था - शुरुआत से पहले 10-सेकंड टाइमआउट के साथ दौड़ में प्रवेश करना बहुत मुश्किल है। इसके अलावा, यह एक गतिशील ऑनलाइन रेसिंग गेम की भावना के अनुरूप नहीं था और सामान्य रूप से बहुत तकनीकी नहीं दिखता था।

आप इस पृष्ठ को इस लिंक द्वारा इसके पुराने संस्करण में देख सकते हैं।

अब यह कैसे काम करता है

संक्षेप में, वेब सॉकेट ने पूरी प्रक्रिया को चलाना संभव बना दिया है।

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

Php बैकएंड और नोड पर सर्वर के बीच सामान्य संचार वातावरण। js redis pubsub चैनल है । एक नया गेम बनाते समय या डेटा को बदलने वाली किसी भी क्रिया के बाद, php कुछ ऐसा करता है जैसे निम्नलिखित (यहाँ और उसके बाद का कोड बहुत अधिक संशोधित है):

$redis = new Redis(); $redis->pconnect('localhost', 6379); $redis->publish("gamelist", json_encode(array( "game created", array( 'gameId' => $id)))); 

रेडिस एक अलग टीसीपी पोर्ट पर एक अलग डेमॉन के रूप में काम करता है और किसी भी जुड़े क्लाइंट से संदेश प्राप्त / भेजता है। यह सिस्टम को अच्छी तरह से स्केल करने के लिए संभव बनाता है, भले ही प्रक्रियाओं की संख्या (अच्छी तरह से, सर्वर, यदि आप आशावादी हैं) php और नोड ।js. लगभग 50 php प्रक्रियाएँ और 2 नोड .js प्रक्रियाएँ वर्तमान में कताई कर रही हैं।

स्टार्टअप पर नोड.जेएस की ओर, रेडिस-चैनल gamelist को गेमेलिस्ट कहा जाता है:

 var redis = require('redis').createClient(6379, 'localhost'), redis.subscribe('gamelist'); 

क्लाइंट्स के साथ काम करने के लिए, सॉकेट.आईओ बाइंडिंग लाइब्रेरी का उपयोग किया जाता है (टिप्पणी में : Voradiy और Joes कामरेड कहते हैं कि SockJS और बेसेडा जैसे बेहतर विकल्प हैं, जो अच्छी तरह से सच हो सकते हैं)। यह आपको मुख्य परिवहन के रूप में वेब सॉकेट्स का उपयोग करने की अनुमति देता है, जबकि फ्लैश या xhr-polling जैसे अन्य ट्रांसफ़र पर वापस जाता है यदि ब्राउज़र वेब सॉकेट का समर्थन नहीं करता है। इसके अलावा, यह सामान्य रूप से ग्राहकों के साथ काम करने को सरल बनाता है, उदाहरण के लिए, मल्टीप्लेक्सिंग के लिए एक एपीआई प्रदान करता है और कनेक्ट किए गए क्लाइंट को अलग-अलग छद्म-निर्देशिका (चैनल) में अलग करता है, और आपको घटनाओं और कुछ अन्य अच्छाइयों का नाम देता है।

 var io = require('socket.io').listen(80); var gamelistSockets = io.of('/gamelist'); 

जब क्लाइंट ब्राउज़र ws://ws.klavogonki.ru/gamelist से जुड़ा ws://ws.klavogonki.ru/gamelist इसे गेमलिस्ट सॉकेटियो चैनल से जुड़े होने के रूप में पहचाना जाता है। ब्राउज़र इसके लिए निम्न कार्य करता है:

 <script src="http://ws.klavogonki.ru/socket.io/socket.io.js" type="text/javascript"></script> ... <script type="text/javascript"> var socket = io.connect('ws.klavogonki.ru/gamelist'); </script> 

जब कोई घटना रेडिस चैनल के माध्यम से बैकएंड से आती है, तो यह पूरी तरह से पूर्व-विश्लेषण किया जाता है और फिर गेमलिस्ट में सभी कनेक्टेड क्लाइंट्स को भेजा जाता है:

 redis.on('message', function(channel, rawMsgData) { if(channel == 'gamelist') { var msgData = JSON.parse(rawMsgData); var msgName = msgData[0]; var msgArgs = msgData[1]; switch(msgName) { case 'game created': { ... gamelistSockets.emit('game created', info); break; } case 'game updated': { ... gamelistSockets.emit('game updated', info); break; } case 'player updated': { ... gamelistSockets.emit('player updated', info); break; } } } }); 

ब्राउज़र ठीक उसी तरह से घटना को प्राप्त करता है और पृष्ठ पर आवश्यक परिवर्तनों को प्रस्तुत करता है।

 socket.on('game created', function(data) { insertGame(data); }); socket.on('game updated', function(data) { updateGame(data); }); socket.on('player updated', function(data) { updatePlayer(data); }); 

सिद्धांत पूरी तरह से सरल और स्पष्ट है। इस योजना के केंद्र में उन्नत प्रौद्योगिकियां प्रक्रिया को सरल बना सकती हैं और कार्य के तर्क पर ध्यान केंद्रित कर सकती हैं। हालाँकि मुझे "हम एक बदलाव, एक स्थिति नहीं" की विचारधारा में काम करने के लिए php कोड के कुछ हिस्सों के कुछ परिवर्तन के साथ छेड़छाड़ करनी थी, और वेबसोकेट के डोमेन को मुख्य मशीन से एक अलग से लेना (ताकि पोर्ट 80 पर साझाकरण प्रॉक्सी के साथ पीड़ित न हो), लेकिन सूखा अवशेष प्लसस बहुत महत्वपूर्ण है:

• उच्चतम गतिशील इंटरफ़ेस, अपडेट वास्तविक समय में होता है, आप एक ऑनलाइन गेम में एकल परिवर्तनों को महसूस कर सकते हैं और 90 के चैट पेज पर नहीं।
  
• कैशिंग की लगभग कोई आवश्यकता नहीं है, क्योंकि डेटा बैकएंड से ब्राउज़र में सीधे पारगमन में जाता है।
• केवल आवश्यक राज्य परिवर्तन भेजकर कार्बनिक यातायात की बचत (यदि आप संपीड़न को कसने की कोशिश करते हैं, तो यह और भी दिलचस्प होगा)।
• नेटवर्क लोड की वृद्धि लगभग अगोचर है, क्योंकि नोड.जेएस को केवल एक साथ कनेक्शन के किसी भी अनुमान योग्य संख्या को पकड़ने और संसाधित करने के लिए विकसित किया गया था; और सीपीयू पर लोड भी गिर गया, क्योंकि राज्य परिवर्तन की गणना बैकएंड पर एक बार की जाती है और तैयार किए गए सभी ग्राहकों को भेजी जाती है।
• एक इवेंट-ओरिएंटेड स्कीम से डेटा परिवर्तन के सभी क्षणों के बारे में जानना संभव हो जाता है और, उदाहरण के लिए, एक ही समय में फ़्लोटिंग और फ़्लोटिंग का एनीमेशन बनाना।

ठोस लाभ, संक्षेप में।

आप अंत में यहाँ क्या हुआ देख सकते हैं । अंतर नग्न आंखों को दिखाई देता है।

एक बोनस के रूप में, दो गोलियां हैं, Klavogonok के दर्शकों पर कुछ आँकड़े, सॉकेट में उपयोग किए गए ब्राउज़र और ट्रांसपोर्ट।

ब्राउज़र	शेयर	ट्रांसपोर्ट	शेयर
क्रोम	51%	WebSocket	90%
फ़ायरफ़ॉक्स	20%	XHR-मतदान	5%
ओपेरा	15%	flashsocket	4%
IE (लगभग 8 और 9 में)	6%	jsonppolling	1%

जाहिर है, यह उपयोग के लिए काफी तैयार है।

परिणाम

परिणाम, ग्रंथ सूची और नैतिकता के साथ एक अंतिम सारांश हिस्सा हो सकता है। लेकिन मैं आपका समय बचाऊंगा और बस इतना कहूंगा: वेब सॉकेट बहुत अच्छे हैं!

PS परियोजना के नए विकसित हिस्सों में (ऊपर वर्णित एक सहित), ऐसे दिलचस्प शब्द जैसे कि मोंगोडब और कोणीय.जे का भी उपयोग किया जाता है । यदि रुचि है, तो इस विषय पर निम्नलिखित विषय होंगे।