Si vous êtes un développeur Web et que vous n'avez pas utilisé l'extension du serveur en direct dans VScode, êtes-vous même un développeur? Je plaisante. Mais avez-vous réfléchi à la façon dont cela fonctionne sous le capot? Dans le blog d'aujourd'hui, essayons de comprendre comment cela fonctionne avec une implémentation pratique à l'aide de Golang. Pourquoi Golang? Eh bien, j'explore Golang ces jours-ci, et quoi de mieux à apprendre que de construire un projet? Donc, un contexte assez (pas celui de Golang) commençons.

Comment fonctionne le serveur en direct?

Le serveur en direct recharge automatiquement le navigateur chaque fois qu'il détecte une modification dans les fichiers HTML, CSS ou JS. Il a commencé par servir ces fichiers statiques via un serveur HTTP. Sous le capot, il utilise un observateur de fichiers comme Fsnotify (nous allons l'utiliser pour notre projet), FSWATCH (dans le système de fichiers basé sur UNIX) ou Chokidar (pour NodeJS) pour surveiller en continu le répertoire du projet pour les modifications de fichiers (essentiellement lorsque vous enregistrez n'importe quel fichier avec des extensions .html, .css, .js).

Au cœur, il utilise une connexion WebSocket entre le serveur Your (Node JS) et le navigateur. Lorsque le serveur détecte un fichier modifie, il envoie une notification de rechargement via WebSocket au navigateur. Le navigateur, à son tour, recharge la page pour refléter les nouvelles modifications apportées. De plus, il utilise l'injection CSS (mise à jour uniquement des styles sans rechargement complet), HMR (remplacement du module chaud) pour le module JavaScript. Cela garantit que le développeur est un commentaire en temps réel sans avoir besoin de recharger manuellement le navigateur après chaque modification du code.

Aperçu du projet

Donc, avec ce projet, mon idée était la même. Mon objectif était de surveiller les modifications de fichiers (comme HTML, CSS et JavaScript) et déclencher un rechargement de navigateur chaque fois que des modifications ont été détectées. Pour cela, j'ai utilisé le serveur HTTP intégré de Go et le package FSNotify, qui surveille efficacement les événements du système de fichiers.

1. Servir des fichiers statiques

La première étape a été de configurer un serveur HTTP simple dans Go qui sert des fichiers statiques à partir d'un répertoire. Les fichiers statiques, tels que HTML, CSS et JavaScript, seraient chargés du dossier ./Static. Ceci est géré à l'aide du http.fileServer:

http.handle ("/", http.fileServer (http.dir ("./ statique")))

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

2. Recharger le point de terminaison

Ensuite, j'avais besoin d'un point de terminaison qui informerait le client de recharger lorsqu'un changement de fichier a été détecté. La route / rechargement agit comme un déclencheur, envoyant un message "Recharger" au navigateur lorsque le serveur détecte une modification:

http.handlefunc ("/ reload", func (w http.ResponseWriter, r * http.request) { http.Handle("/", http.FileServer(http.Dir("./static"))) Cette route écoute les événements sur une chaîne, qui sera plus tard remplie de notifications de changement de fichier.

3. Regarder les modifications du fichier

J'ai exploité le package FSNotify pour suivre les modifications dans des types de fichiers spécifiques (HTML, CSS et JS). L'observateur écoute toute modification et pousse une notification au canal de rechargement lorsqu'il détecte les modifications:

func ScanFileChanges () { Watcher, err: = fsnotify.newwatcher () Si err! = Nil { log.fatal (err) } Defer Watcher.Close () pour { sélectionner { Événement de cas: = http.Handle("/", http.FileServer(http.Dir("./static"))) 4. Filtrage des fichiers suivis

tous les changements de fichier ne doivent pas déclencher un rechargement, j'ai donc ajouté un filtre qui ne suit que des extensions de fichiers spécifiques: .html, .css et .js. Cela a été fait à l'aide de la fonction filepath.ext pour vérifier les types de fichiers:

func istrackedfile (fileName String) bool { ext: = Strings.tolower (filepath.ext (nom de fichier))) return ext == ".html" || ext == ".css" || ext == ".js" }

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

5. Exécution du serveur

Enfin, j'ai lancé le serveur HTTP pour écouter sur le port 8000 et commencé le processus d'observation de fichiers simultanément:

log.println ("Démarrage du serveur à: 8000") Log.fatal (http.ListenandServe (": 8000", nil))

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

Réflexions finales

Bien que cet exemple se concentre sur le rechargement des fichiers statiques, il y a beaucoup de place à l'amélioration, comme l'ajout de la prise en charge de WebSocket pour la communication plus fluide, une meilleure gestion des fichiers et l'élargissement de la liste des fichiers suivis.

Avec seulement quelques lignes de code Go, j'ai pu améliorer le flux de travail pour le développement Web statique, et j'ai hâte de raffiner cet outil encore plus.

Consultez le code: serv-it github