Comment créer une extension de serveur Live simple à l'aide de Golang

Si vous êtes un développeur Web et que vous n'avez pas utilisé l'extension Live Server 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 utilisant Golang. Pourquoi Golang? Eh bien, j'explore Golang ces jours-ci, et quoi de mieux pour apprendre que de construire un projet ? Alors assez de contexte (pas celui de Golang) commençons.

Comment fonctionne le serveur live ?

Ainsi, le serveur live recharge automatiquement le navigateur chaque fois qu'il détecte une modification dans les fichiers html, css ou js. Cela 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 un système de fichiers basé sur UNIX) ou Chokidar (pour Nodejs) pour surveiller en permanence le répertoire du projet pour les modifications de fichiers (essentiellement lorsque vous enregistrez n'importe quel fichier avec les extensions .html,.css,.js ).

À la base, il utilise une connexion WebSocket entre votre serveur (node ​​js) et le navigateur. Lorsque le serveur détecte une modification de fichier, 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 de module à chaud) pour le module javascript. Cela garantit que le développeur reçoit un retour en temps réel sans avoir besoin de recharger manuellement le navigateur après chaque modification de 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 de déclencher un rechargement du navigateur chaque fois que des modifications étaient 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 consistait à configurer un simple serveur HTTP dans Go qui sert les fichiers statiques à partir d'un répertoire. Les fichiers statiques, tels que HTML, CSS et JavaScript, seraient chargés à partir du dossier ./static. Ceci est géré à l'aide du http.FileServer :

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

2. Recharger le point de terminaison

Ensuite, j'avais besoin d'un point de terminaison qui avertirait le client de recharger lorsqu'une modification de fichier était détectée. La route /reload agit comme un déclencheur, envoyant un message "reload" au navigateur lorsque le serveur détecte une modification :

http.HandleFunc("/reload", func(w http.ResponseWriter, r *http.Request) {
    <-reloadChan
    w.Write([]byte("reload"))
})

Cette route écoute les événements sur un canal, qui seront ensuite renseignés par les notifications de modification de fichier.

3. Surveillance des modifications de fichiers

J'ai utilisé le package fsnotify pour suivre les modifications apportées à des types de fichiers spécifiques (HTML, CSS et JS). L'observateur écoute toutes les modifications et envoie une notification au canal de rechargement lorsqu'il détecte des changements :

func scanFileChanges() {
    watcher, err := fsnotify.NewWatcher()
    if err != nil {
        log.Fatal(err)
    }
    defer watcher.Close()

    for {
        select {
        case event := <-watcher.Events:
            if event.Op&fsnotify.Write == fsnotify.Write && isTrackedFile(event.Name) {
                log.Println("Modified File:", event.Name)
                reloadChan <- true
            }
        case err := <-watcher.Errors:
            log.Println("Error:", err)
        }
    }
}

4. Filtrage des fichiers suivis

Tous les changements de fichiers ne devraient pas déclencher un rechargement, j'ai donc ajouté un filtre qui ne suit que les extensions de fichiers spécifiques : .html, .css et .js. Cela a été fait en utilisant la fonction filepath.Ext pour vérifier les types de fichiers :

func isTrackedFile(fileName string) bool {
    ext := strings.ToLower(filepath.Ext(fileName))
    return ext == ".html" || ext == ".css" || ext == ".js"
}

5. Exécution du serveur

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

log.Println("Starting the server at: 8000")
log.Fatal(http.ListenAndServe(":8000", nil))

Pensées finales

Bien que cet exemple se concentre sur le rechargement de fichiers statiques, il reste encore beaucoup à faire, comme l'ajout de la prise en charge de WebSocket pour une communication plus fluide, une meilleure gestion des fichiers et l'extension 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 d'affiner encore cet outil.

Découvrez le code : serve-it GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!