reactjs 如何使用getstream-io使用户能够使用频道的ID加入频道

jgwigjjp  于 5个月前  发布在  React
关注(0)|答案(1)|浏览(43)

我正在制作这个应用程序,我使用流API(getstream-io)。这是我第一次使用API,我试图通过这些知识找到我的方式。
所以,在我的应用程序是一个两个玩家的游戏与观众。观众是谁创造的游戏。
当你创建一个游戏时,你调用API来创建一个通道(来托管游戏)。我使用“消息”类型,因为我正在学习的教程(做一个井字游戏,这有点接近)使用它,所以我想它也应该适合我。
然后你有一个GameID,这是一个6位数的数字,也作为渠道的ID。
我希望这两个球员能够加入这个渠道/游戏,只有与游戏ID.
以下是我目前的情况:
CreateGame.jsx

import React, { useState } from "react";
import { useChatContext, Channel } from "stream-chat-react";

import Split_or_Steal from "./Split_or_steal";
import Cookies from "universal-cookie";

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function CreateGame() {
  const cookies = new Cookies();
  const [gameID, setGameID] = useState("");
  const { client } = useChatContext();
  const [channel, setChannel] = useState(null);
  const createChannel = async () => {
    const gameID=getRandomInt(1000000)
    const newChannel = client.channel('messaging', gameID , {
      members: [cookies.get("userId")],
      session: 3,
      show: false,
      player1_input: null,
      player2_input: null
    });

    await newChannel.watch();
    setChannel(newChannel);
  };
  return (
    <>
      {channel ? (
        <Channel channel={channel}>
          <Split_or_Steal channel={channel} setChannel={setChannel}/>
        </Channel>
      ) : (
        <div className="">
          <button className=" w-52 h-24 border rounded-md bg-white text-black text-bold text-4xl hover:bg-blue-600 hover:text-white" onClick={createChannel}> CREATE </button>
        </div>
      )}
    </>
  );
}

export default CreateGame;

字符串
JoinGame.jsx

import React, { useState } from "react";
import { useChatContext, Channel } from "stream-chat-react";

import Split_or_Steal from "./Split_or_steal";
import Cookies from "universal-cookie";

function JoinGame() {
  const cookies = new Cookies();
  const [gameID, setGameID] = useState("");
  const { client } = useChatContext();
  const [channel, setChannel] = useState(null);

  const joinChannel = async () => 
    {
    
        const filter = { type: 'messaging', id: gameID };
        const sort = [{ last_message_at: -1 }];
        const channels = await client.queryChannels(filter, sort, {
            watch: true, // this is the default
            state: true,
        });
        if (channels.length ===0 ){
            alert("channel not found");
            return;
        }
        const joinedChannel=channels[0];
        await joinedChannel.watch();
        await joinedChannel.addMembers([cookies.get("userId")]);
        setChannel(joinedChannel);
        console.log("joined channel")
    };

  return (
    <>
      {channel ? (
        <Channel channel={channel}>
          <Split_or_Steal channel={channel} setChannel={setChannel}/>
        </Channel>
      ) : (
        <div className="">
          <h4>Join Game</h4>
          <input
            placeholder="Game ID"
            onChange={(event) => {
              setGameID(event.target.value);
            }}
          />
          <button onClick={joinChannel}> Join </button>
        </div>
      )}
    </>
  );
}

export default JoinGame;


它实际上有点像预期的工作,我能够找到与游戏ID的渠道,甚至加入它,只有与谁创造了它的演员
这就是问题所在,当你加入其他账户时,你会得到一个错误,说:
未捕获(在promise中)错误:StreamChat错误代码70:QueryChannels失败,错误为:“1个通道与您的查询匹配,但无法返回,因为您无权访问它们。您是否忘记包括{members:$in:[“fec 7 bc 90 - 260 e-41 c4-bef 1 - 1dbe 695 e082 b”]}?”
所以基本上,用户不能添加自己的频道.任何想法如何解决这个问题?
TLDR:用户没有权限将自己添加到频道!

6rvt4ljy

6rvt4ljy1#

发生的错误正是你提到的:用户没有权利将自己添加到频道。
默认情况下,用户将拥有user的角色。由于不同的原因,他们将没有在随机通道上更新通道成员的权限,这是默认值。

  • 如何解决 *

1.转到dashboard并选择项目
1.转到 * 角色和权限 *
1.点击顶部的 * 编辑 * 按钮
1.对于 Role 选择User,对于 Scope 选择Messaging
1.在搜索字段中输入更新频道成员
1.激活名为更新频道成员的权限复选框
1.点击 * 保存 *
如果这不能解决您的问题,请随时联系我们!另外请记住,用户现在可以进入每个频道,因此您可能需要添加一个自定义机制,让用户限制他们可以加入的频道-如果需要的话。

相关问题