我遇到了一个问题。

我在使用LiveKit/react-native进行WebRTC直播，但每次为一个新课堂生成新的令牌时，我都会遇到这个特定错误：

“无法建立信令连接：令牌无效”，或者有时是“授权令牌无效”。

我已正确设置后端（使用PHP）通过cURL连接到LiveKit API。

下面是在我的React Native前端中的一些代码行：

const [livekitToken, setLivekitToken] = useState(null);
  const [livekitRoom, setLivekitRoom]   = useState(null);

  const [tokenReady, setTokenReady] = useState(false);
useEffect(() => {
  Promise.all([
    AsyncStorage.getItem('livekitToken'),
    AsyncStorage.getItem('livekitRoom'),
  ]).then(([t, r]) => {
    setLivekitToken(t && t !== 'null' ? t : null);
    setLivekitRoom(r && r !== 'null' ? r : null);
    setTokenReady(true);
  });
}, []);

我当前的liveKitToken和 LiveKitRoom ID存储在AsyncStorage中。 下面是我如何使用LiveKitRoom组件。

<LiveKitRoom
    serverUrl='wss://project-random.livekit.cloud'
    token={livekitToken}
    connect={!!livekitToken && livekitToken !== 'null' && livekitToken !== ''}
    audio={micOn}
    video={camOn}
    options={{
      adaptiveStream: true,
      dynacast: true,
    }}
    onError={(err) => console.error('LiveKit error:', err)}
  >

{/other contents/}

（出于某些原因，我修改了serverUrl属性） 请问，有人知道该如何解决这个问题吗？

解决方案

从你的代码实现来看，有两种可能的情形。

LiveKitRoom挂载时令牌尚未获取

从Async Storage检索令牌是一个异步操作，可能需要一些时间。在检索到所有必需的令牌并相应更新应用状态之前，应推迟渲染 <LiveKitRoom /> 组件。

在令牌就绪之前，应显示加载状态或占位UI。

function LiveScreen() {
  const [livekitToken, setLivekitToken] = useState(null);
  const [livekitRoom, setLivekitRoom] = useState(null);

  const [tokenReady, setTokenReady] = useState(false);
  useEffect(() => {
    Promise.all([
      AsyncStorage.getItem("livekitToken"),
      AsyncStorage.getItem("livekitRoom"),
    ]).then(([t, r]) => {
      setLivekitToken(t && t !== "null" ? t : null);
      setLivekitRoom(r && r !== "null" ? r : null);
      setTokenReady(true);
    });
  }, []);

  if (!tokenReady) return <ActivityIndicator />;

  return (
    <LiveKitRoom
      serverUrl="wss://project-random.livekit.cloud"
      token={livekitToken}
      connect={!!livekitToken && livekitToken !== "null" && livekitToken !== ""}
      audio={micOn}
      video={camOn}
      options={{
        adaptiveStream: true,
        dynacast: true,
      }}
      onError={(err) => console.error("LiveKit error:", err)}
    />
  );
}

令牌已过期。

根据LiveKit文档，访问令牌的最大有效期为10分钟。因此，你应该实现一个机制来检查令牌的过期状态并在需要时进行刷新。

在Async Storage中存储令牌时，也应持久化生成时间戳。这使你能够计算经过的时间以及判断是否已超过10分钟的有效期。

https://docs.livekit.io/frontends/reference/tokens-grants/#token-refresh