🎩 🏻 🖖🏿 साइट पर उपयोगकर्ता गतिविधि की निगरानी के लिए वास्तविक समय प्रणाली। अब Node.js + Socket.IO पर 👩🏾‍🤝‍👨🏻 ⏹️ ◻️

शुभ दोपहर

इस लेख में मैं बात करूंगा कि Node.js और Socket.IO का उपयोग करके उपयोगकर्ता गतिविधि की निगरानी के लिए एक प्रणाली को कैसे लागू किया जाए। यह कुछ इस तरह दिखता है:

यह एक ईआरपी प्रणाली के लिए लिखा गया था जिसमें कर्मचारियों की बातचीत महत्वपूर्ण है, विशेष रूप से स्थितियों से बचने के लिए जब दो ऑपरेटर एक उत्पाद को संपादित करेंगे।

कार्य

इसलिए, Node.js (एक्सप्रेस, कनेक्ट) पर सर्वर के लिए, इस निगरानी प्रणाली को लागू करना आवश्यक था, जो वास्तविक समय में उपयोगकर्ता गतिविधि के बारे में सूचित करेगा (अर्थात, लॉग आउट किया गया उपयोगकर्ता तुरंत " ऑनलाइन उपयोगकर्ता " सूची से गायब हो गया, दूसरे पर स्विच हो गया) पृष्ठ - " इस पृष्ठ को देखें " से गायब हो गया, और वह व्यक्ति जो क्रमशः दर्ज किया गया था, सूचियों में दिखाई दिया)।
तुरंत एक आरक्षण करें कि दुनिया के बाकी हिस्सों से प्रणाली के बंद होने के कारण प्रमाणीकरण एक आवश्यक है।

ठीक है, इससे पहले कि आप शुरू करें - उन लोगों के लिए जो सॉकेट की मूल बातें से परिचित नहीं हैं। I, मैं आपको एक विशिष्ट चैट कार्यान्वयन को देखने की सलाह देता हूं।

ग्राहक

इस व्यवसाय में ग्राहक का हिस्सा काफी सरलता से लागू किया जाता है, इसलिए मैं बाहरी सुंदरता पर ध्यान केंद्रित नहीं करूंगा। मैं बस नीचे दिए गए कोड का उल्लेख करूँगा, जिसे आधार टेम्पलेट में शामिल किया गया है, अर्थात लोड किए गए प्रत्येक पृष्ठ पर मौजूद है।
यहाँ हम क्या चाहते हैं की एक सूची है: आईडी के साथ तत्व = "sockstat" (कनेक्शन की स्थिति प्रदर्शित करने के लिए), आईडी के साथ = "इसके अलावा" (पृष्ठ को देखने वालों की सूची के लिए), आईडी = "ऑनलाइन" (उन सभी की सूची के लिए जो ऑनलाइन हैं ), ज़ाहिर है, ऐसी बात

<script type="text/javascript" src="/js/lib/jquery.js"></script> <script type="text/javascript" src="/socket.io/lib/socket.io.js"></script>

।
और एक छोटा सहायक फ़ंक्शन जो किसी सरणी से बुलेट सूची आइटम बनाता है:

 function lister(arr) { var s = ''; $.each(arr, function(key, value) { s += '<li><b>' + value.name + '</b> (login: ' + value.login + ', id: ' + value.user_id + ')</li>'; }); return s; }

अब सब कुछ तैयार है। तंत्र इस प्रकार है:

 $(document).ready(function() { var socket = io.connect("http://localhost:8080"); //      socket.on("connect", function () { // ,  : $("#sockstat").text("connected ok"); //        socket.emit("iamhere", { location: document.URL } ); //      socket.on("alsohere", function (alsohere) { //        ,  : $("#alsohere").html('  : <ul>' + lister(alsohere) + '</ul>'); }); socket.on("online", function (online) { //      - $("#online").html(' : <ul>' + lister(online) + '</ul>'); }); socket.on("disconnect", function () { //    -    (  ,   ) setTimeout(function () { $("#sockstat").text("connection lost!"); }, 500); }); }); });

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

यह सरल लगता है? और इसलिए यह है।

सर्वर: सतह

लॉन्च किए गए प्रोजेक्ट फ़ाइल के कोड में - index.js में, सभी प्रकार की चीजों के अलावा

 app.configure();

हम अपने हस्तलिखित सॉकेटों को जोड़ते हैं। हमारे व्यवसाय में आवश्यक सॉकेट्स के साथ काम करने के लिए जिम्मेदार है:

 require('./sockets');

घटनाओं के वास्तविक प्रसंस्करण के अलावा, इसमें एक प्राधिकरण फ़ंक्शन होता है - जो कुछ मानदंडों को पूरा करने वालों के लिए एक कनेक्शन बनाने की अनुमति देता है। हमारे मामले में, ये वे हैं जो पहले लॉग इन थे।
सामान्य शब्दों में, यह इस तरह दिखता है ( sio.set ('प्राधिकरण' ...) पर ध्यान दें )।

और अब एल्गोरिथ्म ही। एक शुरुआत के लिए - रूसी में।
2 प्रतीक होंगे:

ऑनलाइन - सभी उपयोगकर्ताओं की एक सूची ऑनलाइन
इसके अलावा - ग्राहक के रूप में एक ही पृष्ठ पर उपयोगकर्ताओं की सूची

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

 socket.emit("iamhere", { location: document.URL } );

ग्राहक, हमें चाहिए:

याद रखें कि कौन गया और कहां गया (इसे ऑनलाइन जोड़ें)
सभी को सक्रिय ऑनलाइन अपडेट भेजें
एक ही पृष्ठ को देखने वाले सभी को भेजें - अद्यतन किया गया

जब ग्राहक डिस्कनेक्ट करता है -

याद रखें कि कौन बाहर आया और कहां गया (इसे ऑनलाइन से हटाएं)
सभी को सक्रिय ऑनलाइन अपडेट भेजें
दर्शकों को उस पृष्ठ पर भेजें जहां से ग्राहक अभी बचा है, और कहीं भी अपडेट नहीं किया गया है

क्या यह तर्कसंगत है? हम जारी रखते हैं।

सर्वर: थोड़ा गहरा

उपरोक्त को लागू करने के लिए, मैंने सॉकेट.जेएस फ़ाइल को विशेष रूप से लोड नहीं करने का निर्णय लिया और "सबमिट-लाएं" फ़ंक्शन को एक अलग फ़ाइल में प्रदान किया - schem.js.
यह इस तरह व्यवस्थित है:

 var auth = function () { "use strict"; // Private -   / var __users = [], ..., return { ... // Public -  / }; }(); module.exports = auth;

मुख्य सॉकेट.जेएस ब्लॉक निम्नानुसार है:

 sio.sockets.on('connection', function (socket) { var hs = socket.handshake; auth.addActiveUser({ login: hs.session.user, name: hs.session.username, id: hs.session.user_id }); //  ,     -      socket.on('iamhere', function (msg) { //        -   auth.addPageActiveUser({ login: hs.session.user, path: msg.location, path_id: socket.id }); auth.getListActiveUser(function (online) { //     online ( 2) socket.emit('online', online); socket.broadcast.emit('online', online); }); auth.getListByPageActiveUser({ path: msg.location }, function (alsohere) { //     -    ,  //    ,   ,   alsohere var i, len; auth.getListByPageConnection({ path: msg.location, users: alsohere }, function (connections) { len = connections.length; for (i = 0; i < len; i++) { sio.sockets.sockets[connections[i].id].emit('alsohere', alsohere); } }); }); }); socket.on('disconnect', function () { //    : var s = auth.getPageByIdConnection(socket.id); // ,    , setTimeout(function () { auth.removeActiveUser({ login: hs.session.user }); //     , auth.getListActiveUser(function (online) { //    online, socket.broadcast.emit('online', online); }); auth.removePageActiveUser({ login: hs.session.user, path_id: socket.id }); //        auth.getListByPageActiveUser({ path: s }, function (alsohere) { //    ,      //    alsohere var i, len; auth.getListByPageConnection({ path: s, users: alsohere }, function (connections) { len = connections.length; for (i = 0; i < len; i++) { sio.sockets.sockets[connections[i].id].emit('alsohere', alsohere); } }); }); }, 1000); //      -    //   "" ,      }); });

देखा।

जादू का खुलासा

ऑक्टोरेट मॉड्यूल में, यह सभी डेटा उपयोगकर्ताओं के बारे में - उनके कनेक्शन और पेज, सत्रों के बारे में - निजी चर __active मॉडल में एक ऑब्जेक्ट के रूप में संग्रहीत किया जाता है।
प्रत्येक उपयोगकर्ता के लिए, एक फ़ील्ड बनाई जाती है - __activeUsers [लॉगिन], जिसमें फ़ील्ड शामिल हैं:

नाम - उपयोगकर्ता नाम - लॉगिन ("वास्य" / "वासिली इवानोविच") के साथ भ्रमित होने की नहीं
user_id - आंतरिक उपयोगकर्ता आईडी - पिछले फ़ील्ड की तरह, क्लाइंट के बाद के ट्रांसमिशन के लिए उपयोग किया जाता है, उदाहरण के लिए, लिंक "/ उपयोगकर्ताओं / user_id" के लिए
स्थान - दो फ़ील्ड से मिलकर ऑब्जेक्ट की एक सरणी: पथ - खुले पृष्ठ का वास्तविक पथ और इस सॉकेट कनेक्शन का आईडी - आईडी

तदनुसार, मॉड्यूल मॉड्यूल केवल सार्वजनिक तरीकों को उजागर करता है जो उपरोक्त चर के साथ काम करते हैं। वे f.-s का प्रतिनिधित्व करते हैं, for..in के लिए खोज करते हैं , इसे ' पुश करें और ब्याह करें ':

addActiveUser - __activeUser में नए उपयोगकर्ता डेटा जोड़ता है
addPageActiveUser - उपयोगकर्ता के लिए एक नया खुला पृष्ठ जोड़ता है ( __activeUser [sLogin] .locations.push ({path: sPath, id: sPath_id}); )
getListActiveUser - सक्रिय उपयोगकर्ताओं की सूची देता है (के लिए (__activeUsers में) {list.ush (...
getListByPageActiveUser - दिए गए पथ पर समान पृष्ठ देखने वाले उपयोगकर्ताओं की सूची देता है
getListByPageConnection - पास किए गए पृष्ठ पते पर कनेक्शन पहचानकर्ताओं की एक सूची देता है जो उसी पृष्ठ से लिंक करते हैं
getPageByIdConnection - कनेक्शन आईडी द्वारा पृष्ठ का पता लौटाता है (पृष्ठ को छोड़कर, ग्राहक हमें केवल आईडी देता है, पथ नहीं)
removeActiveUser - उपयोगकर्ता को खुले पृष्ठों की संख्या में कमी करता है
removePageActiveUser - खुले की सूची से एक बंद पृष्ठ को हटाता है

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

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

पीएस ओपेरा (v.11.62 पर परीक्षण किया गया) जब एफएफ और क्रोम के विपरीत, पृष्ठ बंद करना, क्लाइंट डिस्कनेक्ट के बारे में एक सर्वर संदेश भेजने से परेशान नहीं करता है। इसलिए, जो उपयोगकर्ता पृष्ठ को डिस्कनेक्ट / छोड़ देते हैं, वे सक्रिय उपयोगकर्ताओं की सूची में कुछ और सेकंड के लिए लटकाते हैं, जब तक कि सर्वर स्वचालित रूप से उन्हें टाइमआउट द्वारा डिस्कनेक्ट नहीं करता है।

साइट पर उपयोगकर्ता गतिविधि की निगरानी के लिए वास्तविक समय प्रणाली। अब Node.js + Socket.IO पर

कार्य

ग्राहक

सर्वर: सतह

सर्वर: थोड़ा गहरा

जादू का खुलासा

More articles: