VS Code Live Server扩展如何实现页面自动刷新？

1. 本地静态文件服务搭建 #

Live Server会在本地启动一个HTTP服务器（默认端口5500），将VS Code当前打开的文件夹设为静态资源根目录，负责响应浏览器的文件请求，返回对应的HTML、CSS、JS等资源。

2. WebSocket双向通信核心 #

这是实现自动刷新的关键，并未使用Selenium这类自动化工具，而是通过WebSocket建立服务器与浏览器标签页的长连接：

• 浏览器打开Live Server提供的页面时，会自动加载一段Live Server注入的客户端脚本，该脚本会主动与本地服务器建立WebSocket连接。
• 服务器端会维护所有已连接的客户端（浏览器标签页）列表。

3. 文件变更监听与通知 #

• Live Server通过VS Code的文件监听API或Node.js的fs.watch机制，监听目标文件夹内的文件变化。
• 检测到文件修改并保存后，服务器会通过WebSocket向所有已连接的客户端发送刷新指令。

4. 浏览器端执行刷新 #

客户端脚本收到服务器的刷新指令后，直接调用浏览器原生的location.reload()方法，触发当前标签页的页面重新加载，完成自动刷新。

优化细节 #

针对CSS文件，Live Server做了无刷新更新优化：无需全页重载，仅替换页面中<link>标签的href属性并添加时间戳避免缓存，实现CSS样式的热更新，提升开发体验。注入的客户端脚本仅在页面运行时临时加载，不会修改原项目代码。

内容的提问来源于stack exchange，提问作者Pexicade