使用Python Eel集成CoinGecko组件时WebSocket连接失败求助

问题背景 #

使用Python Eel框架开发时，引入CoinGecko静态价格标题组件后，页面显示正常，但Chrome控制台持续报错：WebSocket connection to 'wss://cable.coingecko.com/cable' failed，错误来自官方组件脚本。尝试增大shutdown_delay未解决问题，反而引发新异常。

解决思路 #

1. 拦截组件的WebSocket连接请求 #

由于使用的是静态标题组件，无需实时WebSocket更新。可通过重写浏览器WebSocket构造函数，阻止特定地址的连接请求，避免报错：

<!-- 在index.html的body末尾添加以下脚本 -->
<script>
const originalWebSocket = window.WebSocket;
window.WebSocket = function(url, protocols) {
    if (url.includes('wss://cable.coingecko.com/cable')) {
        console.log('已阻止CoinGecko组件的WebSocket连接');
        // 返回模拟对象避免组件因连接失败报错
        return {
            close: () => {},
            send: () => {},
            addEventListener: () => {},
            removeEventListener: () => {}
        };
    }
    return new originalWebSocket(url, protocols);
};
</script>

2. 改用CoinGecko REST API手动渲染数据 #

绕过官方组件，直接调用CoinGecko免费REST API获取静态价格数据，自行渲染到页面，彻底消除组件带来的WebSocket依赖：

• Python端（app.py）：暴露获取价格的接口

import requests
import eel

@eel.expose
def fetch_coin_price(coin_id, currency):
    api_url = f"https://api.coingecko.com/api/v3/simple/price?ids={coin_id}&vs_currencies={currency}"
    try:
        resp = requests.get(api_url)
        resp.raise_for_status()
        return resp.json().get(coin_id, {}).get(currency)
    except Exception as e:
        print(f"获取价格失败: {e}")
        return None

# 启动Eel的代码保持不变
try:
    eel.start('index.html', mode='chrome', host='localhost', port=8080, cmdline_args=['--start-maximized'])
except OSError:
    pass

• 前端（index.html）：调用接口并渲染

<!-- 替换原组件标签 -->
<div class="coin-price-widget">
    <span>Bitcoin (PHP):</span>
    <span id="btc-price">加载中...</span>
</div>

<script>
// 调用Python接口获取价格并渲染
eel.fetch_coin_price('bitcoin', 'php')(function(price) {
    const priceEl = document.getElementById('btc-price');
    if (price) {
        priceEl.textContent = `₱${price.toLocaleString()}`;
    } else {
        priceEl.textContent = '加载失败';
    }
});
</script>

3. 排查Eel与组件的通信冲突 #

Eel自身依赖WebSocket实现Python与JS的双向通信，可尝试以下操作排查冲突：

• 更换Eel启动端口（如将port=8080改为port=9000）
• 启动Chrome时添加--disable-web-security参数（仅用于测试，生产环境不建议）：

eel.start('index.html', mode='chrome', host='localhost', port=9000, 
          cmdline_args=['--start-maximized', '--disable-web-security'])

内容的提问来源于stack exchange，提问作者John Rey Vilbar