🏣 🤝 ⏯️ हम वास्तविक समय में वेब-मैप पर लॉग से भू-सूचना की कल्पना करते हैं 🤧 🤶🏼 🦅

ताकि कोई अस्पष्टता न हो, मैं सार को इंगित करूंगा। एक नई नौकरी के लिए आवेदन करते समय, उन्होंने मुझे एक परीक्षण कार्य दिया, जिसे संक्षेप में निम्नानुसार वर्णित किया जा सकता है: "कस्टम स्टोर ऑनलाइन स्टोर में प्रवेश करने वाले उपयोगकर्ताओं की घटनाओं को भू-आकार देने के लिए ग्लो का एक एनालॉग लिखें।" सीधे शब्दों में, कुछ घटनाओं की घटना के लिए सिस्टम लॉग की निगरानी करना आवश्यक है और, इन के मामले में, प्रदर्शन (इस मामले में) मानचित्र पर एक बिंदु प्रदर्शित करते हैं, जो उपयोगकर्ता के आईपी पते द्वारा निर्धारित किया जाएगा। कार्यान्वयन का उद्देश्य: प्रस्तुति के प्रयोजनों के लिए एक सुखद-दिखने वाला "खिलौना" बनाना, जो सद्भाव और सौंदर्य सुख के निर्वाण में धारक को विसर्जित करने में सक्षम है। मुख्य स्थिति विकास प्रक्रिया में जावा प्रौद्योगिकियों के ढेर का उपयोग थी, जिसके कारण कई निर्णय अपनाए गए। इसके अलावा, इसे एक-पृष्ठ साइट के रूप में लागू करने का निर्णय लिया गया। और जब से मैं जावा और वेब से बहुत अधिक परिचित था (मैंने मुख्य रूप से C / C ++ में लिखा था), मुझे बहुत कुछ सीखना था। ठीक है, हम इसे एक साथ समझ लेंगे।

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

और वैसे भी, उपरोक्त चमक के स्रोतों का उपयोग क्यों नहीं किया जाता है? सबसे पहले, वे उन आंकड़ों के संस्करणों के लिए काफी विशिष्ट हैं जिन्हें मोज़िला ने संचालित किया था - लॉन्च के दिन फ़ायरफ़ॉक्स की संख्या को याद रखें, साथ ही इस तथ्य को भी स्वीकार करें कि उनका लॉगिंग सिस्टम विकेंद्रीकृत है। हमारे मामले में, प्रति सेकंड लगभग 100 प्रविष्टियां शिखर पर एक एकल लॉग फ़ाइल में लिखी जाती हैं, जिनमें से केवल एक हिस्से की कल्पना की जानी चाहिए। दूसरे, ग्लो में नक्शा देखने में सबसे सुखद नहीं है। और तीसरा, यह एक परीक्षण कार्य है :)

जल्दी देखो

हमारे मिनी-सिस्टम की क्या आवश्यकता है?

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

प्रत्येक आइटम पर एक छोटा सा अध्ययन करने के बाद, निम्नलिखित का फैसला किया गया था। एक छोटा जावा डेमॉन (यह अजीब लगता है, मुझे समझ में आता है, अच्छी तरह से, कुछ भी नहीं) लॉग की निगरानी करेगा, रिकॉर्ड को पार कर रहा है, आईपी को हल कर रहा है, जो HTTP POST के माध्यम से सर्वर को डेटा भेज देगा। यह बाद में सिरदर्द के बिना सिस्टम के अलग-अलग हिस्सों को बदलना आसान बना देगा। सर्वर सर्वलेट कंटेनर का भी हिस्सा होगा, जिसके लिए हम संबंधित सर्वलेट लिखेंगे। क्लाइंट साइड किसी तरह का मैप विजेट (मैप रेंडर) होना चाहिए, जो सर्वर के साथ एसिंक्रोनस रूप से संवाद करेगा। कई मूल तरीके हैं (अधिक जानकारी के लिए, लेख देखें [1] और समीक्षा [2] ):

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

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

लॉग से डेटा प्राप्त करें

लॉग अपडेट को कैसे मॉनिटर किया जाए, इसकी आवधिक संग्रह-रचना को देखते हुए? आप उदाहरण के लिए, प्रसिद्ध अपाचे कॉमन्स लाइब्रेरी से Tailer क्लास का उपयोग कर सकते हैं, लेकिन हम अपने तरीके से, आंशिक रूप से उसी तरह से जाएंगे। हमारे TailReader वर्ग TailReader उस निर्देशिका द्वारा आरंभीकृत किया जाता है जिसमें लॉग स्थित है, लॉग फ़ाइल का नाम (क्योंकि यह बदल सकता है) और अद्यतन अवधि का वर्णन करने वाली एक नियमित TailReader - वह समय जिसके बाद हम समय-समय पर लॉग में नई प्रविष्टियों की जांच करेंगे। क्लास इंटरफ़ेस मानक इनपुट / आउटपुट स्ट्रीम के साथ काम करता है, हालाँकि, यह निष्पादन प्रक्रिया को तब nextRecord() जब nextRecord() कहा जाता है, अगर लॉग में कोई नई प्रविष्टियाँ नहीं nextRecord() । नई प्रविष्टियों (लॉकिंग के बिना) की जांच करने के लिए, आप hasNext() विधि का उपयोग कर सकते हैं। चूंकि लॉग को एक अलग थ्रेड में मॉनिटर किया जाता है (I / O, थ्रेड के साथ भ्रमित नहीं होना), प्रवाह को नियंत्रित करने के लिए start() और stop() तरीके हैं। यदि फ़ाइल स्ट्रीम बंद हो गई है (लॉग को संग्रह करने के लिए भेजा गया था), तो पढ़ने की कोशिशों की एक निर्दिष्ट संख्या के बाद, क्लास ऑब्जेक्ट तय करता है कि नया लॉग खोलने का समय है। लॉग getLogFile() में निर्दिष्ट नियमों के अनुसार खोजा गया है:

  /** *      - * @return -  null    */ private File getLogFile() { File logCatalog = new File(logFileCatalog); File[] files = logCatalog.listFiles(new FileFilter() { @Override public boolean accept(File pathname) { return pathname.canRead() && pathname.isFile() && pathname.getName().matches(logFileNamePattern); } }); if (0 == files.length) return null; if (files.length > 1) Arrays.sort(files, new Comparator<File>() { @Override public int compare(File o1, File o2) { return (int) (o1.lastModified() - o2.lastModified()); } }); return files[files.length - 1]; }

जब हमने लॉग अपडेट को मॉनिटर करना सीख लिया है, तो आपको इन अपडेट के साथ कुछ करने की आवश्यकता है। सबसे पहले, आपको इस घटना के प्रकार को निर्धारित करने की आवश्यकता है, और यदि इसे मानचित्र पर प्रदर्शित करने की आवश्यकता है, तो क्लाइंट आईपी को बाहर निकालें और इसे जियोकॉर्डिनेट पर हल करें।
RecordParser वर्ग, जैसा कि आप अनुमान लगा सकते हैं, नियमित अभिव्यक्ति का उपयोग करके लॉग फ़ाइल की लाइनों का विश्लेषण करता है। LogEvent parse(String record) विधि ईवेंट टाइप और IP एड्रेस को LogEvent parse(String record) एक साधारण ऑब्जेक्ट लौटाती है, या null अगर यह लॉग एंट्री हमें इंटरेस्ट नहीं करती है (वैसे, यह जावा डेवलपमेंट की दुनिया में सबसे अच्छे अभ्यास से दूर है - Null पैटर्न का उपयोग करना बेहतर है) वस्तु )। उसी समय, रिकॉर्ड भी खोज रोबोटों के अनुरोधों से फ़िल्टर किए जाते हैं (वे वास्तव में उपयोगकर्ताओं को संग्रहीत नहीं करते हैं, सही?)।
अंत में, IpToLocationConverter वर्ग मैक्सिमाइंड सेवाओं ( इसके लिए जावा एपीआई ) का उपयोग करते हुए अपने संबंधित भू-आकृतियों के लिए आईपी पते को IpToLocationConverter और इपगियोबेस ( एक्सएमएल एपीआई के माध्यम से इसका उपयोग होता है, जिसका तर्क पैकेज com.ecwid.geowid.daemon.resolvers )। मैक्समाइंड काफी घटिया रूसी पतों को हल करता है, इसलिए हम इसके अलावा IpGeoBase'om का उपयोग करेंगे। मैक्समाइंड एपीआई तुच्छ है, जिसका समाधान स्थानीय रूप से स्थित डेटाबेस फ़ाइल के माध्यम से किया जाता है। स्पष्ट कारणों के लिए कैशिंग सर्विस कॉल को IpGeoBase के लिए एक रिज़ॉल्वर लिखा गया था।
सर्वर को लोड न करने के लिए, हम इसे कई टुकड़ों के पैक में भेजेंगे ताकि एक पैक में रिकॉर्ड समय में थोड़ा अलग न हो। ऐसा करने के लिए, मानचित्र पर विज़ुअलाइज़ेशन के लिए संचित पॉइंट ऑब्जेक्ट्स ( Point क्लास) एक बफर में संग्रहीत किए जाते हैं - PointsBuffer क्लास का एक ऑब्जेक्ट और इसे "त्याग" किया जाता है जब इसे JSON फॉर्मेट में सर्वर से भरा जाता है (हम Gson का उपयोग करके ऑब्जेक्ट्स को सीरियल करते हैं )।
सभी दानव तर्क GeowidDaemon वर्ग में है। डेमॉन सेटिंग्स को एक्सएमएल में संग्रहीत किया जाता है (मेरे हिस्से में अश्लीलता, व्यक्ति को प्रॉपर फाइलों के साथ मिल सकता है या यम एलएल ले सकता है, लेकिन मैं वास्तव में एक्सएमएल टू ऑब्जेक्ट मैपिंग की कोशिश करना चाहता था)। पर ध्यान दें

  <events> <event> <type>def</type> <pattern>\b((?:\d{1,3}\.){3}\d{1,3})\b\s+script\.js</pattern> </event> <event> <type>mob</type> <pattern>\b((?:\d{1,3}\.){3}\d{1,3})\b\s+mobile:</pattern> </event> <event> <type>api</type> <pattern>\b((?:\d{1,3}\.){3}\d{1,3})\b\s+api:</pattern> </event> </events>

ईवेंट के प्रकार: def - एक "नियमित" कस्टमोमर खोलना, mob - एक मोबाइल कस्टमर खोलना, api - एक एपीआई सेवा कॉल करना। प्रकार उस स्थान के द्वारा निर्धारित किया जाता है जो सबस्टेशन के लॉग प्रविष्टि में विशेष नियमित के लिए होता है जिसमें आईपी समूह को आवंटित किया जाता है।
नेटवर्क की विशालता में डेमन को लॉन्च करने के लिए एक अद्भुत स्क्रिप्ट मिली।

हम ग्राहकों के साथ डेटा साझा करते हैं

आइए रॉक करते हैं, जेट्टी एपीआई (हम सर्वर के 7 वें संस्करण का उपयोग करने के लिए सहमत होंगे) में क्या जारी है? यह कोड के उदाहरणों सहित प्रलेखन [3] में उत्कृष्ट रूप से लिखा गया है। हम उनका उपयोग करेंगे। हमारा GeowidServlet सर्वलेट न्यूनतम है: यह डेमॉन से डेटा प्राप्त कर सकता है और ग्राहकों को दे सकता है। इस संबंध में निम्नलिखित कोड सबसे दिलचस्प है:

  @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { synchronized (continuations) { for (Continuation continuation : continuations.values()) { continuation.setAttribute(resultAttribute, req.getParameter(requestKey)); try { continuation.resume(); } catch (IllegalStateException e) { // ok } } continuations.clear(); resp.setStatus(HttpServletResponse.SC_OK); } } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String reqId = req.getParameter(idParameterName); if (null == reqId) { resp.sendError(HttpServletResponse.SC_BAD_REQUEST, "Request ID needed"); logger.info("Request without ID rejected [{}]", req.getRequestURI()); return; } Object result = req.getAttribute(resultAttribute); if (null == result) { Continuation continuation = ContinuationSupport.getContinuation(req); synchronized (continuations) { if (!continuations.containsKey(reqId)) { continuation.setTimeout(timeOut); try { continuation.suspend(); continuations.put(reqId, continuation); } catch (IllegalStateException e) { logger.warn("Continuation with reqID={} can't be suspended", reqId); resp.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR); } } else if (continuation.isExpired()) { synchronized (continuations) { continuations.remove(reqId); } resp.setContentType(contentType); resp.getWriter().println(emptyResult); } else { resp.sendError(HttpServletResponse.SC_BAD_REQUEST, "Request ID conflict"); } } } else { resp.setContentType(contentType); resp.getWriter().println((String) result); } }

यहां क्या हो रहा है?
जब कोई ग्राहक नए डेटा के लिए आता है, तो हम GET अनुरोध के मापदंडों में एक अद्वितीय पहचानकर्ता की उपस्थिति की जांच करते हैं (जो कि, वास्तव में, छद्म-अद्वितीय है, ग्राहक भाग के कार्यान्वयन को देखें, getPseudoGUID() फ़ंक्शन यहां ), अगर कोई आईडी नहीं है, तो हम ग्राहक को "भेज" देते हैं। किसी विशेष क्लाइंट से जुड़ी निरंतरता की सही पहचान करने के लिए यह आवश्यक है। अगला, हम जांचते हैं कि इस अनुरोध के लिए आवश्यक डेटा वाली विशेषता सेट है या नहीं। स्वाभाविक रूप से, यदि ग्राहक पहली बार हमारे पास आया, तो किसी भी डेटा की कोई बात नहीं हो सकती है। इसलिए, हम एक निश्चित समय-सीमा के साथ इसके लिए एक निरंतरता बनाते हैं, इसे निलंबित करते हैं और भंडारण के लिए एक हैश तालिका में डालते हैं। हालांकि, ऐसी स्थितियां हैं जब निरंतरता का समय समाप्त हो गया है, लेकिन कोई डेटा भी नहीं है। इस मामले में, जाँच करना if (continuation.isExpired()) स्थिति हमें मदद करती है, जब गुजरती है, तो सर्वलेट जेन्सन में क्लाइंट को एक खाली सरणी देता है, टेबल से दिए गए क्लाइंट के अनुरूप निरंतरता को अनावश्यक रूप से हटा देता है।
यदि डेटा विशेषता सेट है, तो हम इस डेटा को क्लाइंट को वापस कर देते हैं। यह डेटा कहां से आता है? पोस्ट रिक्वेस्ट हैंडलर में, बिल्कुल। जैसे ही डेमन ने डेटा भेजा, सर्वलेट "निलंबित" निरंतरता तालिका के माध्यम से चलता है, प्रत्येक विशेषता को डेटा के साथ सेट करता है और प्रत्येक को फिर से शुरू (फिर से शुरू) करता है, और फिर तालिका को साफ़ करता है। यह इस समय है कि प्रत्येक निरंतरता के लिए doGet() विधि को फिर से दर्ज किया गया है, लेकिन डेटा के साथ उपयोगकर्ता की आवश्यकता है।

उदाहरण के लिए, आप लोड के तहत एक प्रोफाइलर का उपयोग करके इन बहुत निरंतरताओं की रहस्यमय शक्ति को माप सकते हैं। इसके लिए लेखक ने VisualVM और घेराबंदी का इस्तेमाल किया। लेखक से, परीक्षक औसत दर्जे का है, इसलिए परीक्षण बेहद कृत्रिम लग रहा था। JVM ने लगभग एक घंटे तक "वार्म अप" किया, जो 15Mb हीप स्पेस पर बस गया। उसके बाद, घेराबंदी का उपयोग करते हुए, हम सर्वर को 5 मिनट के लिए समानांतर 3000 अनुरोधों के साथ लोड करते हैं (मैं खुली फाइलों, आदि पर सीमाएं बढ़ाने के लिए सिस्टम में चारों ओर प्रहार नहीं करना चाहता था)। JVM ने ~ 250Mb हीप स्पेस खाया, प्रोसेसर कोर को ~ 10-15% तक लोड किया। मुझे लगता है कि शुरुआती लोगों के लिए एक अच्छा परिणाम है।

विज़ुअलाइज़ेशन सर

मैं तुरंत एक आरक्षण कर दूंगा: शायद मेरा जावास्क्रिप्ट कोड आपको एक पेशेवर फ्रंटएंड डेवलपर के दृष्टिकोण से "असंगत" लगेगा। उन लोगों का न्याय करने के लिए जो मेरे कोड को समझेंगे :)

इसलिए, हम USC का उपयोग करते हैं। हम मानचित्र पर अंक कैसे प्रदर्शित करेंगे? मानक मार्कर अनुपयुक्त दिखते हैं। Png या, W3C, gif का उपयोग करके, आप बिंदुओं के एनीमेशन के साथ एक अच्छी तस्वीर प्राप्त नहीं कर सकते। इसके दो तरीके हैं:

एसवीजी के माध्यम से एनीमेशन। इस विषय पर एक उत्कृष्ट लेख हाल ही में एक हब पर फिसल गया पेशेवरों: कैटलॉग में पहले से ही एक उत्कृष्ट प्लगइन है (पृष्ठ के निचले भाग में डेमो पर ध्यान दें) उत्कृष्ट राफेल पुस्तकालय का उपयोग कर रहा है, और यह पुस्तकालय आपको IE6 (अधिक सटीक, वीएमएल) पर भी एसवीजी आकर्षित करने की अनुमति देता है। विपक्ष: एसवीजी की बारीकियों के कारण, इस पर एनीमेशन काफी संसाधन-गहन संचालन है (ब्राउज़र के स्थान पर खुद को कल्पना करें: आपको अधिकांश समय XML को पार्स करना होगा और इसमें परिवर्तनों के अनुसार ग्राफिक्स को प्रस्तुत करना होगा)।
एचटीएमएल 5 का . , , , ( www.html5canvastutorials.com KineticJS). : , . : .

हम वास्तविक समय में वेब-मैप पर लॉग से भू-सूचना की कल्पना करते हैं

जल्दी देखो

लॉग से डेटा प्राप्त करें

हम ग्राहकों के साथ डेटा साझा करते हैं

विज़ुअलाइज़ेशन सर

More articles: