إذا كنت مطور ويب ولم تستخدم امتداد الخادم المباشر في VSCODE ، هل أنت حتى مطور؟ أنا فقط أمزح. ولكن هل فكرت في كيفية عمل ذلك تحت الغطاء؟ في مدونة اليوم ، دعونا نحاول أن نفهم كيف يعمل ذلك مع تطبيق عملي باستخدام Golang. لماذا جولانج؟ حسنًا ، أنا أستكشف Golang هذه الأيام ، وما هو الأفضل من التعلم من بناء مشروع؟ لذا فإن السياق الكافي (وليس الشخص الموجود في Golang) دعنا نبدأ.

كيف يعمل الخادم المباشر؟

لذا يقوم الخادم المباشر بإعادة تحميل المتصفح تلقائيًا كلما اكتشف أي تعديل في ملفات HTML أو CSS أو JS. لقد بدأت بتقديم هذه الملفات الثابتة من خلال خادم HTTP. تحت Hood ، توظف مراقب ملفات مثل FSNOtify (سنستخدم هذا لمشروعنا) أو FSWATCH (في نظام الملفات المستند إلى UNIX) أو Chokidar (لـ NodeJs) لمراقبة دليل المشروع بشكل مستمر لتغييرات الملفات (بشكل أساسي عند حفظ أي ملف مع تمديد .HTML ،.

في القلب ، يستخدم اتصال WebSocket بين خادمك (Node JS) الخاص بك والمتصفح. عندما يقوم الخادم باكتشاف ملف يغير ، فإنه يرسل إشعارًا معادلاً عبر WebSocket إلى المتصفح. يقوم المتصفح ، بدوره ، بإعادة تحميل الصفحة لتعكس التغييرات الجديدة التي تم إجراؤها. بالإضافة إلى ذلك ، يستخدم حقن CSS (تحديث الأنماط فقط بدون إعادة التحميل الكامل) ، HMR (استبدال الوحدة النمطية الساخنة) لوحدة JavaScript. هذا يضمن الحصول على ردود فعل في الوقت الفعلي دون الحاجة إلى إعادة تحميل المتصفح يدويًا بعد كل تغيير في الكود.

نظرة عامة على المشروع

لذلك مع هذا المشروع ، كانت فكرتي هي نفسها. كان هدفي هو مراقبة تغييرات الملفات (مثل HTML و CSS و JavaScript) وتشغيل إعادة تحميل المتصفح كلما تم اكتشاف أي تعديلات. لهذا ، استخدمت خادم HTTP المدمج في GO وحزمة FSNOTify ، والتي تراقب أحداث نظام الملفات بكفاءة.

1. تقديم الملفات الثابتة

كانت الخطوة الأولى هي إعداد خادم HTTP بسيط في GO يخدم ملفات ثابتة من دليل. سيتم تحميل الملفات الثابتة ، مثل HTML و CSS و JavaScript ، من المجلد. يتم التعامل مع هذا باستخدام http.fileserver:

http.handle ("/" ، http.fileserver (http.dir ("./ static"))))

http.Handle("/", http.FileServer(http.Dir("./static")))

2

بعد ذلك ، كنت بحاجة إلى نقطة نهاية من شأنها أن تخطر العميل بإعادة التحميل عند اكتشاف تغيير الملف. يعمل مسار /إعادة التحميل كمشغل ، وإرسال رسالة "إعادة التحميل" إلى المتصفح عندما يكتشف الخادم تعديلًا:

http.handlefunc ("/reload" ، func (w http.responseWriter ، r *http.request) { http.Handle("/", http.FileServer(http.Dir("./static"))) يستمع هذا المسار للأحداث على قناة ، والتي سيتم ملؤها لاحقًا بواسطة إشعارات تغيير الملف.

3. مشاهدة الملف يتغير

قمت بالاستفادة من حزمة FSNOTify لتتبع التغييرات في أنواع الملفات المحددة (HTML ، CSS ، و JS). يستمع المراقب عن أي تعديلات ويدفع إشعارًا لقناة إعادة التحميل عند اكتشاف التغييرات:

func scanfilechanges () { مراقب ، خطأ: = fsnotify.newwatcher () إذا خطأ! = لا شيء { log.fatal (err) } تأجيل المراقب. ل { يختار { حدث الحالة: = http.Handle("/", http.FileServer(http.Dir("./static"))) 4. تصفية الملفات المتعقب

لا ينبغي أن يؤدي كل تغيير ملف إلى إعادة تحميل ، لذلك أضفت مرشحًا يتبع فقط ملحقات ملفات محددة: .html ، .css ، و .js. تم ذلك باستخدام وظيفة filepath.ext للتحقق من أنواع الملفات:

func isTrackedFile (سلسلة اسم الملف) Bool { تحويلة: = strings.tolower (filepath.ext (اسم الملف)) إرجاع ext == ".html" || تحويلة == ".css" || تحويلة == ".js" }

http.Handle("/", http.FileServer(http.Dir("./static")))

5. تشغيل الخادم

أخيرًا ، قمت بتشغيل خادم HTTP للاستماع إلى المنفذ 8000 وبدأت عملية مراقبة الملف بشكل متزامن:

log.println ("بدء الخادم على: 8000") log.fatal (http.listenandserve (": 8000" ، لا شيء))

http.Handle("/", http.FileServer(http.Dir("./static")))

الأفكار النهائية

بينما يركز هذا المثال على إعادة تحميل الملفات الثابتة ، هناك متسع كبير للتحسين - مثل إضافة دعم WebSocket للاتصالات الأكثر سلاسة ، ومعالجة الملفات الأفضل ، وتوسيع قائمة الملفات التي تم تتبعها.

مع بضعة أسطر من رمز GO ، تمكنت من تحسين سير العمل لتطوير الويب الثابت ، وأتطلع إلى تحسين هذه الأداة إلى أبعد من ذلك.

تحقق من الكود: serve-it github