TeslaMate 永久加载图标问题分析与解决方案

问题现象

TeslaMate 是一款流行的特斯拉车辆数据监控工具，用户报告在通过 Nginx 反向代理访问 TeslaMate Web 界面时，出现了永久加载图标的问题。界面仅顶部导航栏（包含 TeslaMate 徽标、地理围栏和设置）可以正常工作，其余部分持续显示加载状态，导致界面无法正常使用。

问题根源分析

经过技术分析，这个问题源于 WebSocket 连接未能正确建立。TeslaMate 基于 Phoenix LiveView 框架构建，该框架高度依赖 WebSocket 技术来实现实时数据更新和交互功能。当 WebSocket 连接失败时，前端界面无法获取实时数据，导致持续显示加载状态。

解决方案

Nginx 配置调整

要使 Nginx 正确代理 WebSocket 连接，需要在配置文件中添加以下关键指令：

server {
    listen 80;
    server_name teslamate.yourdomain.com;
    
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        
        # WebSocket 支持关键配置
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        
        proxy_pass http://127.0.0.1:4000;
        proxy_redirect off;
    }
}

配置说明

1. proxy_http_version 1.1：强制使用 HTTP/1.1 协议，这是 WebSocket 工作的基础
2. Upgrade 头：指示服务器将连接升级为 WebSocket
3. Connection 头：设置为 "upgrade" 以完成协议切换

验证与测试

配置完成后，需要执行以下步骤验证解决方案：

1. 重新加载 Nginx 配置
2. 清除浏览器缓存
3. 重新访问 TeslaMate 界面
4. 检查浏览器开发者工具中的网络请求，确认 WebSocket 连接状态为 101 Switching Protocols

替代方案

对于不熟悉 Nginx 配置的用户，可以考虑使用 Traefik 作为反向代理。Traefik 对 WebSocket 有原生支持，配置更为简单直观。

总结

TeslaMate 的实时功能依赖于 WebSocket 技术，传统的 HTTP 反向代理配置无法满足这一需求。通过正确配置 Nginx 的 WebSocket 支持参数，可以解决界面永久加载的问题，确保所有功能正常运作。这一解决方案不仅适用于 TeslaMate，对于其他基于 Phoenix LiveView 或类似技术的应用也同样有效。