Wenn Sie ein Webentwickler sind und die Live -Server -Erweiterung in VSCODE nicht verwendet haben, sind Sie überhaupt ein Entwickler? Nur ein Scherz. Aber haben Sie darüber nachgedacht, wie das unter der Motorhaube funktioniert? Versuchen wir im heutigen Blog zu verstehen, wie das mit einer praktischen Implementierung mit Golang funktioniert. Warum Golang? Nun, ich erforsche Golang heutzutage und was ist besser zu lernen, als ein Projekt zu bauen? Also genug Kontext (nicht der in Golang), fangen wir an.

Wie funktioniert Live -Server?

Der Live -Server lädt also den Browser automatisch neu, wenn er eine Änderung in HTML-, CSS- oder JS -Dateien erkennt. Es begann mit dem Servieren dieser statischen Dateien über einen HTTP -Server. Unter der Haube verwendet es einen Dateibeobachter wie fSnotify (wir werden dies für unser Projekt verwenden), FSWatch (im UNIX-basierten Dateisystem) oder Chokidar (für NodeJs), um das Projektverzeichnis kontinuierlich für Dateiänderungen zu überwachen (im Grunde genommen, wenn Sie any-Dateien mit Extensions .html, .css, .js, .js, .js,.

Im Kern verwendet es eine WebSocket -Verbindung zwischen dem Server Ihres (Knoten -JS) und dem Browser. Wenn der Server eine Datei ändert, wird eine Reload -Benachrichtigung über WebSocket an den Browser gesendet. Der Browser lädt wiederum die Seite neu, um die neuen Änderungen widerzuspiegeln. Zusätzlich verwendet es CSS -Injektion (Aktualisierung von nur Stilen ohne vollständige Reload), HMR (Hot -Modul -Ersatz) für JavaScript -Modul. Dies stellt sicher, dass der Entwickler ein Echtzeit -Feedback erhält, ohne den Browser nach jeder Änderung des Code manuell neu zu laden.

Projektübersicht

Mit diesem Projekt war meine Idee dieselbe. Mein Ziel war es, nach Dateiänderungen (wie HTML, CSS und JavaScript) zu achten und einen Browser -Nachladen auszulösen, wenn Änderungen erkannt wurden. Dafür habe ich den integrierten HTTP-Server von GO und das FSNotify-Paket verwendet, das Dateisystemereignisse effizient überwacht.

1. Servieren statische Dateien

Der erste Schritt bestand darin, einen einfachen HTTP -Server in GO zu errichten, der statische Dateien aus einem Verzeichnis dient. Die statischen Dateien wie HTML, CSS und JavaScript werden aus dem Ordner ./static geladen. Dies wird mit dem http.fileServer behandelt:

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

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

2. Endpunkt neu laden

Als nächstes brauchte ich einen Endpunkt, der den Client zum Nachladen benachrichtigen würde, wenn eine Dateiänderung erkannt wurde. Die /Reload -Route fungiert als Auslöser und sendet eine "Reload" -Meldung an den Browser, wenn der Server eine Änderung erkennt:

http.handlefunc ("/reload", func (w http.responsewriter, r *http.request) {{ http.Handle("/", http.FileServer(http.Dir("./static"))) Diese Route hört auf Ereignisse auf einem Kanal zu, die später durch Benachrichtigungen von Dateien ändern.

3.. Anschauen von Dateiänderungen

Ich habe das FSNotify -Paket genutzt, um Änderungen in bestimmten Dateitypen (HTML, CSS und JS) zu verfolgen. Der Beobachter hört auf Änderungen und drückt eine Benachrichtigung zum Nachladen von Kanal, wenn er Änderungen erkennt:

func scanfilechanges () { Beobachter, err: = fsnotify.newWatcher () Wenn er! = nil { log.fatal (err) } Beobachter aufschieben.CLOSE () für { wählen { Fallereignis: = http.Handle("/", http.FileServer(http.Dir("./static"))) 4. Filterung verfolgte Dateien filtern

Nicht jede Dateiänderung sollte ein Reload auslösen, daher habe ich einen Filter hinzugefügt, der nur bestimmte Dateierweiterungen verfolgt: .html, .css und .js. Dies geschah mit der Funktion filepath.ext, um Dateitypen zu überprüfen:

func isTrackedFile (Dateiname String) bool { ext: = strings.tolower (filepath.ext (Dateiname)) return ext == ".html" || ext == ".css" || ext == ".js" }

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

5. Ausführen des Servers

Schließlich habe ich den HTTP -Server so gestartet, dass ich Port 8000 anhörte, und startete gleichzeitig den Dateianwechslungsprozess:

log.println ("den Server bei: 8000" starten) log.fatal (http.listenandServe (": 8000", nil))

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

Letzte Gedanken

Während sich dieses Beispiel auf das Nachladen statischer Dateien konzentriert, gibt es viel Raum für Verbesserungen - wie das Hinzufügen von Websocket -Unterstützung für eine reibungslose Kommunikation, bessere Dateibehandlung und Erweiterung der Liste der verfolgten Dateien.

Mit nur wenigen Zeilen von Go -Code konnte ich den Workflow für die statische Webentwicklung verbessern, und ich freue mich darauf, dieses Tool noch weiter zu verfeinern.

Schauen Sie sich den Code an: serve-it github