React应用使用Helia IPFS时遭遇WebSocket连接失败问题求助

核心问题分析 #

你遇到的错误是因为Helia默认依赖的libp2p bootstrap节点在当前网络环境下无法访问，同时WebTransport会话并发数达到上限（64），导致连接重试循环最终引发应用崩溃。

解决方案 #

1. 自定义libp2p配置，替换/调整传输协议与Bootstrap节点

通过自定义libp2p实例，禁用不稳定的WebTransport（或调整其参数），并使用更可靠的bootstrap节点：

首先安装必要的依赖：

npm install @libp2p/websockets @chainsafe/libp2p-noise @chainsafe/libp2p-yamux @libp2p/bootstrap

然后修改初始化代码：

import { useEffect } from 'react';
import { createHelia } from "helia";
import { libp2pDefaults } from "helia/libp2p-defaults";
import { webSockets } from "@libp2p/websockets";
import { noise } from "@chainsafe/libp2p-noise";
import { yamux } from "@chainsafe/libp2p-yamux";
import { bootstrap } from "@libp2p/bootstrap";

function App() {
  useEffect(() => {
    let heliaInstance;

    const initHelia = async () => {
      // 自定义libp2p配置，仅保留WebSocket传输
      const customLibp2p = await libp2pDefaults({
        transports: [webSockets()],
        connectionEncryption: [noise()],
        streamMuxers: [yamux()],
        peerDiscovery: [
          bootstrap({
            list: [
              "/dnsaddr/bootstrap.libp2p.io/p2p/QmNnooDu7bfjPFoTZYxMNLWUQJyrVwtbZg5gBMjTezGAJN",
              "/dnsaddr/bootstrap.libp2p.io/p2p/QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa",
              "/dnsaddr/bootstrap.libp2p.io/p2p/QmbLHAnMoJPWSCR5Zhtx6BHJX9KiKNN6tpvbUcqanj75Nb",
              "/dnsaddr/bootstrap.libp2p.io/p2p/QmcZf59bWwK5XFi76CZX8cbJ4BhTzzA3gU1ZjYZcYW3dwt"
            ]
          })
        ]
      });

      heliaInstance = await createHelia({ libp2p: customLibp2p });
      console.log("Helia initialized successfully");
    };

    initHelia().catch(err => console.error("Helia init error:", err));

    // 组件卸载时清理Helia实例
    return () => {
      if (heliaInstance) {
        heliaInstance.stop().catch(err => console.error("Helia stop error:", err));
      }
    };
  }, []);

  return (
    <div className="App">
      {/* 你的应用内容 */}
    </div>
  );
}

export default App;

2. 限制WebTransport并发会话数（若需保留WebTransport）

如果必须使用WebTransport，可通过配置降低最大pending会话数，避免触发上限：

import { webTransport } from "@libp2p/webtransport";

// 在transports数组中添加WebTransport并配置参数
transports: [
  webTransport({
    maxPendingSessions: 10 // 降低并发会话数，避免超过64限制
  }),
  webSockets()
],

3. 检查网络环境

• 确认当前网络未屏蔽libp2p节点的IP/端口（如4001、9090等）
• 若处于防火墙或企业网络下，尝试切换至公共网络或使用VPN

为什么官方示例也出错？ #

Helia官方示例使用默认libp2p配置，依赖的bootstrap节点在你的网络环境下无法访问，导致出现相同的连接错误。通过上述自定义配置即可解决。

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