Если вы являетесь веб -разработчиком и не использовали расширение живого сервера в VSCODE, вы даже разработчик? Просто шучу. Но думали ли вы о том, как это работает под капюшоном? В сегодняшнем блоге давайте попробуем понять, как это работает с практической реализацией с использованием Golang. Почему Голанг? Ну, я исследую Голанг в эти дни, и что лучше учиться, чем создать проект? Так что достаточно контекста (не тот, который в Голанге) Давайте начнем.

]

] Как работает живой сервер?

]

, поэтому живой сервер автоматически перезагружает браузер всякий раз, когда он обнаруживает любую модификацию в файлах HTML, CSS или JS. Это началось с обслуживания этих статических файлов через HTTP -сервер. Под капотом он использует наблюдателя файла, такого как fsnotify (мы собираемся использовать это для нашего проекта), Fswatch (в файловой системе на основе Unix) или Chokidar (для Nodejs), чтобы постоянно контролировать каталог проекта для изменений файлов (в основном при сохранении любого файла с расширениями .html, .css, .js).

в ядре он использует соединение WebSocket между сервером вашего (узла JS) и браузером. Когда сервер обнаруживает изменения файла, он отправляет уведомление о перезагрузке через WebSocket в браузер. Браузер, в свою очередь, перезагружает страницу, чтобы отразить новые изменения. Кроме того, он использует инъекцию CSS (обновляя только стили без полной перезагрузки), HMR (замена горячего модуля) для модуля JavaScript. Это гарантирует, что разработчик получает отзывы в реальном времени без необходимости вручную перезагрузить браузер после каждого изменения в коде.

]

] Обзор проекта

]

Итак, с этим проектом моя идея была такой же. Моя цель состояла в том, чтобы следить за изменениями файлов (например, HTML, CSS и JavaScript) и запустить перезагрузку браузера всякий раз, когда были обнаружены какие -либо модификации. Для этого я использовал встроенный HTTP-сервер GO и пакет FSNotify, который эффективно контролирует события файловой системы.

]

] 1. Служа статических файлов

]

первым шагом было настроить простой HTTP -сервер, который обслуживает статические файлы из каталога. Статические файлы, такие как HTML, CSS и JavaScript, будут загружены из папки ./static. Это обрабатывается с помощью http.fileserver:

]

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

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

] 2. Перезагрузить конечную точку

]

Далее мне нужна была конечная точка, которая уведомила бы клиент для перезагрузки, когда было обнаружено изменение файла. Маршрут /Reload действует как триггер, отправляя сообщение «Перезагрузить» в браузер, когда сервер обнаруживает модификацию:

]
]

http.handlefunc ("/reload", func (w http.responsewriter, r *http.request) { http.Handle("/", http.FileServer(http.Dir("./static"))) Этот маршрут прослушивает события на канале, который впоследствии будет заполнен уведомлениями об изменении файла.

]

] 3. Просмотр изменений файла

]

я использовал пакет FSnotify для отслеживания изменений в определенных типах файлов (HTML, CSS и JS). Наблюдатель прослушивает любые модификации и выдвигает уведомление в канал перезагрузки, когда он обнаруживает изменения:

]
]

func scanfilechanges () { Watcher, err: = fsnotify.newwatcher () Если ошибка! = nil { log.fatal (err) } Defer Watcher.close () для { выбирать { Case Event: = http.Handle("/", http.FileServer(http.Dir("./static"))) ] 4. Фильтрация отслеживаемых файлов

]

не каждое изменение файла должно запустить перезагрузку, поэтому я добавил фильтр, который отслеживает только конкретные расширения файла: .html, .css и .js. Это было сделано с использованием функции filePath.ext для проверки типов файлов:

]
]

func istrackedfile (string filename) bool { ext: = strings.tolower (filepath.ext (имя файла)) return ext == ".html" || ext == ".css" || ext == ".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, я смог улучшить рабочий процесс для статической веб -разработки, и я с нетерпением жду возможности еще дальше усовершенствовать этот инструмент.

]

проверьте код: SERD-IT GITHUB

]

] ]