Si es un desarrollador web y no ha usado la extensión del servidor en vivo en VScode, ¿es incluso un desarrollador? Es una broma. ¿Pero has pensado en cómo funciona bajo el capó? En el blog de hoy, intentemos entender cómo funciona con una implementación práctica usando Golang. ¿Por qué Golang? Bueno, estoy explorando Golang en estos días, ¿y qué es mejor aprender que construir un proyecto? Entonces, suficiente contexto (no el de Golang) Comencemos.

¿Cómo funciona el servidor en vivo?

Entonces el servidor en vivo recarga automáticamente el navegador cada vez que detecta cualquier modificación en los archivos HTML, CSS o JS. Comenzó sirviendo estos archivos estáticos a través de un servidor HTTP. Debajo del capó, emplea un observador de archivos como fsnotify (vamos a usar esto para nuestro proyecto), fswatch (en sistema de archivos basado en UNIX) o chokidar (para nodejs) para monitorear continuamente el directorio del proyecto para los cambios de archivo (básicamente cuando guarde cualquier archivo con extensiones .html, .css, .js).

en el núcleo utiliza una conexión WebSocket entre el servidor (nodo JS) y el navegador. Cuando el servidor detecta un archivo cambia, envía una notificación de recarga a través de WebSocket al navegador. El navegador, a su vez, recarga la página para reflejar los nuevos cambios que se realizan. Además, utiliza la inyección CSS (actualización solo de estilos sin una recarga completa), HMR (reemplazo del módulo caliente) para el módulo JavaScript. Esto garantiza que el desarrollador reciba un comentario en tiempo real sin la necesidad de recargar manualmente el navegador después de cada cambio en el código.

Descripción general del proyecto

Entonces con este proyecto, mi idea era la misma. Mi objetivo era observar los cambios de archivo (como HTML, CSS y JavaScript) y activar un recarga de un navegador cada vez que se detectara modificaciones. Para esto, utilicé el servidor HTTP incorporado de GO y el paquete FSNotify, que monitorea eficientemente los eventos del sistema de archivos.

1. Servir archivos estáticos

El primer paso fue configurar un servidor HTTP simple en GO que sirve archivos estáticos desde un directorio. Los archivos estáticos, como HTML, CSS y JavaScript, se cargarían desde la carpeta ./static. Esto se maneja usando http.fileserver:

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

2. Recargar el punto final

A continuación, necesitaba un punto final que notifique al cliente que recargue cuando se detectara un cambio de archivo. La ruta /recarga actúa como un desencadenante, enviando un mensaje de "recarga" al navegador cuando el servidor detecta una modificación:

http.HandleFunc("/reload", func(w http.ResponseWriter, r *http.Request) {
    



 Esta ruta escucha eventos en un canal, que luego estará poblado por notificaciones de cambio de archivo. 


  
  
  3. Viendo cambios en el archivo


 Aproveché el paquete FSNotify para rastrear los cambios en tipos de archivos específicos (HTML, CSS y JS). El observador escucha cualquier modificación y presiona una notificación al canal de recarga cuando detecta los cambios: 



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

    for {
        select {
        case event := 




  
  
  4. Filtrando archivos rastreados


 No todos los cambios de archivo deben activar una recarga, por lo que agregué un filtro que solo rastrea extensiones de archivo específicas: .html, .css y .js. Esto se realizó usando la función FilePath.ext para verificar los tipos de archivos: 



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





  
  
  5. Ejecutando el servidor


 Finalmente, inicié el servidor HTTP para escuchar en el puerto 8000 y comencé el proceso de observación del archivo simultáneamente: 



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





  
  
  Pensamientos finales


 Si bien este ejemplo se enfoca en recargar archivos estáticos, hay mucho espacio para mejorar, como agregar soporte de WebSocket para una comunicación más suave, un mejor manejo de archivos y ampliar la lista de archivos rastreados. 

 Con solo unas pocas líneas de código GO, pude mejorar el flujo de trabajo para el desarrollo web estático, y espero refinar esta herramienta aún más. 

 consulte el código: servir-it github