📞 🧜 👩🏾‍🤝‍👩🏻 साथियों के साथ सहकर्मी से सहकर्मी संदेश भेजना 👴🏻 🌀 🔔

अभिवादन, प्रिय पाठकों। पिछले लेख में, मैंने PeerJS का उपयोग करके ब्राउज़र में एक सरल डायलर बनाने के तरीके के बारे में बात की थी। और आज मैं यह विचार करने की योजना बनाता हूं कि बिना देरी किए सीधे दो उपयोगकर्ताओं के बीच संदेशों का आदान-प्रदान कैसे किया जाए।

कौन परवाह करता है? यदि आप एक ऑनलाइन गेम विकसित कर रहे हैं जिसमें आपको खिलाड़ियों के बीच डेटा के त्वरित आदान-प्रदान की आवश्यकता होती है, तो प्रत्यक्ष संदेश शायद वह है जो आपको चाहिए।

मार्कअप और आरंभीकरण

मैं दिखाऊंगा कि दो उपयोगकर्ताओं के बीच एक सरल चैट के उदाहरण का उपयोग करके तकनीक कैसे काम करती है, और आपको यह भी बताती है कि गेम डेटा के आदान-प्रदान के लिए कोड को कैसे अनुकूलित किया जाए।

आइए आरंभिक मार्कअप और सहकर्मी वस्तु के आरंभ के साथ शुरू करते हैं

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>PeerJS  </title> <script src="https://unpkg.com/peerjs@1.0.0/dist/peerjs.min.js"></script> </head> <body> <h3> ID: <span id=myid ></span></h3> <input id=otherPeerId type=text placeholder="otherPeerId" ><button onclick="connectToNode(document.getElementById('otherPeerId').value)"></button> <div id=messages style="width:400px;height:60vh; background:#ADD8E6;margin:5px;"> </div><br> <textarea id=mess style="width:400px;height:15vh" ></textarea><br> <button onclick="sendMess(document.getElementById('mess'))"></button> <script> var messList=[]; function addMess(mess) { messList.push(mess); document.getElementById('messages').innerHTML=messList.join(""); } var peer=new Peer(); // peer var conn; //,   peer.on('open', function(peerID) { document.getElementById('myid').innerHTML=peerID; }); </script> </body>

हेडिंग में हम PeerJS को जोड़ते हैं। कॉल आलेख में सूचक myid और otherPeerId के साथ क्या भूमिका निभाते हैं

मेसिस्टलिस्ट सरणी मेसेज फीड को स्टोर करेगा। AddMess फ़ंक्शन इस सरणी में तत्वों को जोड़ेगा और पत्राचार कंटेनर में इसकी सामग्री को आउटपुट करेगा।

आगे सहकर्मी वस्तु का आरंभीकरण है, जिसका वर्णन पिछले लेख में भी किया गया है।

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

एक कनेक्शन स्थापित करें

 peer.on('connection', function(c) { // ... conn=c; initConn(); }); function connectToNode(partnerPeer) { // ... conn = peer.connect(partnerPeer); conn.partnerPeer=partnerPeer; initConn(); }

सहकर्मी वस्तु के लिए 'कनेक्शन' घटना आने वाले कनेक्शन पर होती है। और सहकर्मी का कनेक्ट फ़ंक्शन ऐसे कनेक्शन को स्थापित करता है। दोनों मामलों में, हम कनेक्शन ऑब्जेक्ट को चर कॉनवे पर सहेजेंगे। चूंकि वर्तमान प्रशिक्षण उदाहरण के लिए कनेक्शन के साथ आगे की कार्रवाई समान होगी (हालांकि मुकाबला परियोजना में अंतर हो सकता है), मैंने एक अलग फ़ंक्शन में initConn डाला।

 function initConn() { conn.on ('open', function () { //  addMess("<div><h4> </h4></div>"); conn.on ('data', function (data) { //  addMess("<div><b>: </b>"+data+"</div>"); }); }); conn.on('close',function() {addMess('----------- -------------');}); }

यहां हम 2 हैंडलर लटकाते हैं: कनेक्शन खोलने और बंद करने के लिए। कनेक्शन खोलने के लिए हैंडलर में, हम डेटा प्राप्त करने के लिए हैंडलर को जोड़ते हैं, जो संवाद कंटेनर में आने वाले संदेश को जोड़ देगा।

यह केवल एक फ़ंक्शन को लागू करने के लिए बना हुआ है जो सेंड बटन दबाकर एक संदेश भेजेगा, जो:

अपने फ़ीड में एक संदेश जोड़ता है
भागीदार को संदेश भेजता है (कनेक्शन ऑब्जेक्ट की विधि भेजें)

संदेश प्रविष्टि फ़ील्ड को साफ़ करता है

 function sendMess(elem) { addMess("<div><b>: </b>"+elem.value+"</div>"); conn.send(elem.value); elem.value=""; }

खेल डेटा स्थानांतरित करने के लिए अनुकूलन

सादे पाठ में नहीं बल्कि उसी तरह भेजने के लिए क्या किया जाना चाहिए, लेकिन खेल के दौरान डेटा का आदान-प्रदान करने की आवश्यकता है? वास्तव में कुछ खास नहीं। JS में, JSON.stringify और JSON.parse विधियाँ हैं जो किसी ऑब्जेक्ट को स्ट्रिंग में परिवर्तित करती हैं और इसके विपरीत। बस अपना डेटा ऑब्जेक्ट लपेटें, ऑब्जेक्ट को भेजने से पहले एक स्ट्रिंग (JSON.stringify) में कनवर्ट करें और प्राप्त डेटा को ऑब्जेक्ट (JSON.parse) में बदल दें।

 // gameObject={x:2,y:5,...} conn.send(JSON.stringify(gameObject)); // conn.on ('data', function (data) { //  gameObject=JSON.parse(data); });

आमतौर पर, गेम ऑब्जेक्ट और टेक्स्ट संदेश भेजने के लिए बड़ी मात्रा में डेटा की आवश्यकता नहीं होती है। लेकिन अगर आप पृष्ठ (HTML कोड का एक गुच्छा) पर पूरे कंटेनर की सामग्री को आगे बढ़ाने जा रहे हैं, तो ध्यान रखें कि एक बड़ा कनेक्शन अपरिवर्तित तक नहीं पहुंच सकता है।

व्यक्तिगत अनुभव से मैं कहूँगा: आपको इस तरह से 10 केबी (~ 10,000 वर्ण) से अधिक संदेशों को अग्रेषित नहीं करना चाहिए। इस तरह के संदेश को एक अस्थायी फ़ाइल में लिखना बेहतर है और इस फ़ाइल से कोड पढ़ने के लिए साथी को एक आदेश भेजें (मुझे लगता है कि आपको बिंदु मिल गया है)।

हम इस पर रोक लगा सकते हैं, यदि नहीं ...

कनेक्शन टूट गया

जी हां, ऐसा हो रहा है। इसका कारण अस्थिर इंटरनेट है। क्या कभी ऐसा हुआ है कि आप लगभग जीत गए हैं, लेकिन कनेक्शन टूट गया है और आप अपनी सारी प्रगति खो बैठे हैं? इससे बचने के लिए, आइए एक कोड जोड़ें जो एक गिरे हुए कनेक्शन को बढ़ाएगा। हम इसके लिए इवेंट 'करीब' संभाल लेंगे। यह घटना होती है अगर:

जानबूझकर कनेक्शन बंद कर दिया गया था

खराब इंटरनेट के कारण कनेक्शन खो गया था या साथी ने केवल टैब बंद कर दिया था

 conn.on('close',function() { setTimeout(function() { if(conn.partnerPeer) { var pp=conn.partnerPeer; conn = peer.connect(conn.partnerPeer); conn.partnerPeer=pp; initConn(); } else conn=null; } ,2000); addMess('----------- -------------'); });

यहां, डिस्कनेक्ट करने के बाद 2 सेकंड की देरी के साथ, हम बस एक नया स्थापित करने की कोशिश कर रहे हैं।

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

और अब पूरा कोड:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>PeerJS  </title> <script src="https://unpkg.com/peerjs@1.0.0/dist/peerjs.min.js"></script> </head> <body> <h3> ID: <span id=myid ></span></h3> <input id=otherPeerId type=text placeholder="otherPeerId" ><button onclick="connectToNode(document.getElementById('otherPeerId').value)"></button> <div id=messages style="width:400px;height:60vh; background:#ADD8E6;margin:5px;"> </div><br> <textarea id=mess style="width:400px;height:15vh" ></textarea><br> <button onclick="sendMess(document.getElementById('mess'))"></button> <script> var messList=[]; function addMess(mess) { messList.push(mess); document.getElementById('messages').innerHTML=messList.join(""); } var peer=new Peer(); var conn; //,   peer.on('open', function(peerID) { document.getElementById('myid').innerHTML=peerID; }); peer.on('connection', function(c) { // ... conn=c; initConn(); }); function connectToNode(partnerPeer) { // ... conn = peer.connect(partnerPeer); initConn(); } function initConn() { conn.on ('open', function () { //  addMess("<div><h4> </h4></div>"); conn.on ('data', function (data) { //  addMess("<div><b>: </b>"+data+"</div>"); }); }); conn.on('close',function() {addMess('----------- -------------');}); } function sendMess(elem) { addMess("<div><b>: </b>"+elem.value+"</div>"); conn.send(elem.value); elem.value=""; } </script> </body>

साथियों के साथ सहकर्मी से सहकर्मी संदेश भेजना

मार्कअप और आरंभीकरण

एक कनेक्शन स्थापित करें

खेल डेटा स्थानांतरित करने के लिए अनुकूलन

कनेक्शन टूट गया

More articles: