LiveReload एक बहुत ही तीसरे पक्ष के ब्राउज़र में

फ्लाई पर सभी परिवर्तनों को देखने के लिए NodeJS / ExpressJS एप्लिकेशन विकसित करते समय आईपैड पर ब्राउज़र में पेज को ऑटो-रिफ्रेश करने से मैं भ्रमित हो गया।
कटौती के तहत - मोबाइल गैजेट से विकसित वेब एप्लिकेशन का लाइव दृश्य बनाना बहुत सरल है।

विभिन्न कारणों से, Node.js पर LiveReload लेख ने मेरी मदद नहीं की। किस बात से? यह आसान है - वहाँ लोग मणि-एस के साथ ग्रन्ट्स पर चर्चा करते हैं। और मैं सिर्फ NodeJS / एक्सप्रेस आया। मुझे छोटा मत समझो :)

यह क्यों आवश्यक है?

सुविधा के लिए, और क्यों। मैकबुक एयर पर रीसिंग ने महसूस किया कि यह वह उपकरण है जो मुझे चाहिए था। नकारात्मक पक्ष मॉनिटर पर जगह की कमी और AppleTV की कमी थी विषय को हल करने के लिए (मैंने ट्रोनस्मार्ट T1000 MirrorT2 को एक महत्वपूर्ण छूट के साथ बदलने का आदेश दिया, आइए देखें कि यह कार्यों को कैसे संभालता है, लेकिन यह एक और कहानी है), हालांकि गतिविधि के परिणाम के लाइव चिंतन के लिए टीवी के सामने बैठने का विचार नहीं है। वास्तव में पसंद है ...

मल्टी-प्लेटफ़ॉर्म गैजेट्स के चिड़ियाघर को देखते हुए, मैंने सोचा - मैकबुक के साथ किए गए iPad का उपयोग क्यों नहीं किया जा रहा है, जो कि बनाया जा रहा है? हां, और ताकि आपकी उंगली आइकन में न गिरे ...

टैबलेट से दूसरा मॉनिटर? यह।

पहले तो मैंने सोचा - अब, ऐप में AirDisplay खरीदें (या कम पैसे के लिए इसके एनालॉग, उदाहरण के लिए iDisplay ), एक सर्वर स्थापित करें, और वोइला । लेकिन कई अन्य कार्यों के लिए यह समाधान, शायद उपयोगी और आवश्यक है। लेकिन मेरा नहीं।
इसके अलावा, ट्रोनस्मार्ट को चीन से हमारे भाइयों ने पहले ही भेज दिया है।

हम सही ढंग से कार्य करते हैं।

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

ठीक है, जब कमांड-एस / Ctrl-S (वैसे, विंडोज पर भी काम करता है) तो सर्वर पुनरारंभ हो जाएगा। अब ब्राउज़र को ताज़ा कैसे करें? और फिर, एक संक्षिप्त googlezh मुझे पुनः लोड करने के लिए लाया।

रीलोड मॉड्यूल के विवरण में क्या लिखा है:

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

महान, आपको क्या चाहिए। दो पूरे ताल्ज़ा के साथ, मैं एक चमत्कार को गढ़ने के लिए बैठ गया:

हम एक शुद्ध एक्सप्रेस आवेदन पर परीक्षण करेंगे:

$ express 

हम निर्भरता को खींचते हैं:

 $ npm i 

हम पर्यवेक्षक डालते हैं:

 $ npm i supervisor -g 

और पुनः लोड करें:

 $ npm i reload --save-dev 

सब कुछ, पर्यावरण की तैयारी खत्म हो गई है।

अब आपको दस्तावेज़ के अनुसार रिक्त आवेदन दर्ज करने की आवश्यकता है:

/app.js:

 ... var reload = require('reload'); ... var server = http.createServer(app); reload(server, app); server.listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); }); 

/views/layout.jade:

 head script(src='/reload/reload.js'); 

.Jade फ़ाइलों में परिवर्तन ट्रैक करने के लिए हमारे सुपर सुपरसर्वर को चलाएं:

 $ supervisor -e jade app.js 

और सुनिश्चित करें कि हमारा "कंप्यूटर" ब्राउज़र ठीक वही दिखाता है जो हम लोकलहोस्ट के लिए इंतजार कर रहे हैं : 3000 :


ब्राउज़र और सर्वर के बीच लाइव संचार की जाँच करने के लिए, स्रोत फ़ाइल / साक्षात्कार /index.jade को बदलें

 extends layout block content h1= title p Welcome to #{title} 

पर:

 extends layout block content h1= title h2 , ! p Welcome to #{title} 

और LiveReload नामक लाइव अपडेट प्राप्त करें:


यह काम करता है, लानत है!

Grabelek? मेरे पास है!

जश्न मनाने के लिए, हम अपने गैजेट पर, मेरे मामले में, iPad पर चलते हैं, हम एड्रेस बार में टाइप करते हैं 0.0.0.0eps000 (NodeJS सर्वर के साथ मशीन का IP पता चल रहा है), हमें अपेक्षित परिणाम मिलता है:

इसके अलावा हम h2, Habr के बिना, कोड / साक्षात्कार /index.jade को स्रोत पर लौटाते हैं! , इसे सहेजें और ... फ़ाइल प्राप्त करें:

इसके अलावा, यदि आप पृष्ठ को अपने हाथों से ताज़ा करते हैं, तो सब कुछ वैसा ही प्रदर्शित होगा जैसा होना चाहिए। एम्बुश ... डेडरलोएड ...

उदासी से खुशी तक ...

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

मैं / nod_modules / reload / lib / में पुनः लोड स्रोतों में चढ़ गया (जैसा कि मैंने तुरंत नहीं सोचा था, मेरे लिए शर्म की बात है), और मैं वहां 4 फाइलें खोदता हूं:
reload.js, reload-client.js, reload-server.js, sockjs-0.3-min.js।
तुरंत reload-client.js में रुचि रखते हैं, देखो, और फ़ाइल की बहुत शुरुआत में, दूसरी पंक्ति में, हम मानव जाति की सभी समस्याओं का हल पाते हैं:

 ;(function refresh () { var RLD_TIMEOUT = 300; var sock = new SockJS(window.location.origin + '/sockreload'); sock.onclose = function() { setTimeout(function() { window.location.reload(); },RLD_TIMEOUT); }; })(); 

संक्षेप में, सज्जनों!

जाहिर है , न्यूनतम मूल्य RLD_TIMEOUT = 700 ने मुझे एक बेजान LiveReload बनाने में मदद की ;

वह सब है। मैं समाधान से संतुष्ट हूं, सब कुछ मैं जिस तरह से काम करता हूं, वह व्यक्ति जो वेब विकास और वेब जादू से दूर है, और जरूरत है - आसानी से और स्वाभाविक रूप से, मुख्य बात - बिना परेशानी और अनुनय-विनय के।